person

Здравствуйте, Гость

Поиск по форуму:
Файлы сайта
Популярные темы
Каталог аддонов
noAvatar зарегистрируйтесь на нашем сайте
Воскресенье 29.12.2024, 12:23:08
  • Страница 1 из 1
  • 1
Форум » ...iT заметки [общие компьютерные темы] » web мастерская » html • css » Красивое меню на сайт
Красивое меню на сайт
avatar
Админ | Оффлайн
репутация 19
Код который вставлять в блок :

Code

<div class="glossymenu">    
<a class="menuitem submenuheader" href="/" >Название раздела 1</a>
<div class="submenu">    
<ul>    
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
</ul>

</div>

<a class="menuitem submenuheader" href="/" >Sinners.PP.Ua</a>
<div class="submenu">
<ul>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>
<li><a href="/">by Sinners.PP.Ua</a></li>

</ul>
</div>

<a class="menuitem submenuheader" href="/" >Название раздела 3</a>
<div class="submenu">
<ul>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
</ul>
</div>

<a class="menuitem submenuheader" href="/" >Название раздела 4</a>

<div class="submenu">
<ul>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
<li><a href="/">Ваша ссылка</a></li>
</ul>

</div>


Это в CSS

Code

/* GlossyMenu* /
.glossymenu{    
margin: 5px 0;    
padding: 0;    
width: 185px; /*width of menu*/    
border: 1px solid #5d5d5d;    
border-bottom-width: 0;    
}    

.glossymenu a.menuitem{    
background: black url(http://sinners.pp.ua/SINNERS/1/img/4.11.png);    
font: normal 10px "Visitor_Rus", "Visitor_Rus", Visitor_Rus, Visitor_Rus, Visitor_Rus;    
color: #5d5d5d;    
display: block;    
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/    
width: auto;    
padding: 4px 0;    
padding-left: 10px;    
text-decoration: none;
border-top: 0px solid #5d5d5d;
border-bottom: 1px solid #5d5d5d;    
}    

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{    
color: #5d5d5d;    
}    

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/    
position: absolute;    
top: 5px;    
right: 5px;    
border: none;    
}    

.glossymenu a.menuitem:hover{    
background-image: url(http://sinners.pp.ua/SINNERS/1/img/4.11.png);    
}    

.glossymenu div.submenu{ /*DIV that contains each sub menu*/    
background-image: url();    
}    

.glossymenu div.submenu ul{ /*UL of each sub menu*/    
list-style-type: none;    
margin: 0;    
padding: 0;    
}    

.glossymenu div.submenu ul li{    
border-bottom: 1px solid #5d5d5d;    
}    

.glossymenu div.submenu ul li a{    
display: block;    
font: normal 10px "Visitor_Rus", "Visitor_Rus", Visitor_Rus, Visitor_Rus, Visitor_Rus;    
color: #5d5d5d;    
text-decoration: none;    
padding: 2px 0;    
padding-left: 10px;    
}    

.glossymenu div.submenu ul li a:hover{    
background-image: url(http://sinners.pp.ua/SINNERS/1/img/4.11.png);    
colorz: #999999;    
text-shadow:0px 1px 0px #fff;
}    

.glossymenu{margin: 5px 0; padding: 0; width: 180px; /*width of menu*/ border: 1px solid #5d5d5d; border-bottom-width: 0; }    

.glossymenu a.menuitem{background: black url(http://sinners.pp.ua/SINNERS/1/img/4.11.png);font: normal 10px "Arial", "Arial", Arial, Arial, Arial;
color: #5d5d5d;    
display: block;    
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/    
width: auto;    
padding: 4px 0;    
padding-left: 10px;    
text-decoration: none;
border-top: 0px solid #5d5d5d;
border-bottom: 1px solid #5d5d5d;    
}    

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{    
color: #5d5d5d;    
}    

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/    
position: absolute;    
top: 5px;    
right: 5px;    
border: none;    
}    

.glossymenu a.menuitem:hover{    
background-image: url(http://sinners.pp.ua/SINNERS/1/img/4.111.png);    
text-shadow:0px 1px 0px #fff;
}    

.glossymenu div.submenu{ /*DIV that contains each sub menu*/    
background:#e0e0e0;    
}    

.glossymenu div.submenu ul{ /*UL of each sub menu*/    
list-style-type: none;    
margin: 0;    
padding: 0;    
}    

.glossymenu div.submenu ul li{    
border-bottom: 1px solid #5d5d5d;    
}    

.glossymenu div.submenu ul li a{    
display: block;    
font: normal 10px "Arial", "Arial", Arial, Arial, Arial;    
color: #5d5d5d;    
background:url(http://sinners.pp.ua/SINNERS/1/img/menutiem.png);
text-decoration: none;    
padding: 2px 0;    
padding-left: 10px;    
}    

.glossymenu div.submenu ul li a:hover{    
background:url('http://sinners.pp.ua/SINNERS/1/img/menutiem.png');background-position:0px 19px;    
colorz: #999999;    
text-shadow:0px 1px 0px #fff;
}    
/* --------- */


И подключить JS-Файлы в <HEAD> страницы

Code
<script type="text/javascript" src="http://rayven.at.ua/_fr/2/ddaccordion.js"></script>
   <script type="text/javascript" src="http://rayven.at.ua/_fr/2/sdmenu.js"></script>  

Never Back Down [NBD] Никогда не сдавайся и ты увидишь как сдаются другие !
[Сообщение # 1]  
avatar
Админ | Оффлайн
репутация 19
ddaccordion.js и sdmenu.js можно забрать тут
Прикрепления: ddaccordion.js (11.4 Kb) · sdmenu.js (1.7 Kb)


Never Back Down [NBD] Никогда не сдавайся и ты увидишь как сдаются другие !
[Сообщение # 2]  
avatar
Админ | Оффлайн
репутация 19
Хорошо пойдет под любой сайт и под любой шаблон.

В конец css ставим:
Code
.block{width:218px;float:left;padding:0 0 10px 0;*float:none;}    
.greenblock_header{background:url(../images/greenblock_header.gif) no-repeat;width:209px;height:39px;}    
.greenblock_header h3{padding:11px 0 0 36px;*padding:12px 0 0 36px;}    
.block_center{background:url(../images/block_center.gif) repeat-y;width:209px;float:left;padding:0 0 2px 0;}    
.block_centertxt{padding:15px 10px 0 10px;}    
.block_bot{background:url(../images/block_bot.gif) no-repeat;width:209px;height:10px;float:left;}    

.leftmenu{padding:5px 0 0 0;}    
.leftmenu_cat{background:#F2F2F2;text-align:center;padding:5px 0 5px 0;color:#4fbeeb;border-bottom:1px solid #EDEDED;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;}    
.leftmenu_catbg{padding:3px 0 0 0;}    

ul.leftmenu_list{padding:0;margin:0;list-style:none;}    
ul.leftmenu_list li{border-bottom:1px solid #EDEDED;padding:5px 0 5px 10px;}    
ul.leftmenu_list li a{color:#626262;}    
ul.leftmenu_list li a:hover{color:#4fbeeb;text-decoration: underline;}


Там где хотим видеть меню ставим это:
Code
<div class="block">    
    <div class="greenblock_header"><h3>Навигация</h3></div>    
    <div class="block_center">    
    <div class="leftmenu">    
    <div class="leftmenu_cat">Движки сайтов</div>    
    <ul class="leftmenu_list">    
    <li><a title="Datalife Engine" href="javascript:ShowOrHide('menu1');">Datalife Engine</a></li>    
    <div id="menu1" style="display:none;">    
    <ul>    
    <li><a href="/dle_relizi/">Релизы</a>    
    <li><a href="/bugs/">Баг-Фиксы</a>    
    <li><a href="/dle_sborki/">Сборки</a>    
    <li><a href="/dle_haki/">Хаки</a>    
    <li><a href="/dle_moduli/">Модули</a>    
    <li><a href="/dle_moduli_commercial/">Модули(платные)</a>    
    <li><a href="/dle_templates/">Шаблоны</a>    
    <li><a href="/dle_templates_commercial/">Шаблоны(платные)</a>    
    <li><a href="/dle_raznoe/">Разное</a>    
    </ul>    
    </div>    
    <li><a title="ProWebber.Ru" href="javascript:ShowOrHide('menu2');">Joomla</a></li>    
    <div id="menu2" style="display:none;">    
    <ul>    
    <li><a href="#">Релизы</a>    
    <li><a href="#">Баг-Фиксы</a>    
    <li><a href="#">Сборки</a>    
    <li><a href="#">Хаки</a>    
    <li><a href="#">Модули</a>    
    <li><a href="#">Модули(платные)</a>    
    <li><a href="#">Шаблоны</a>    
    <li><a href="#">Шаблоны(платные)</a>    
    <li><a href="#">Разное</a>    
    </ul>    
    </div>    

    </ul>    
    <div class="leftmenu_cat">ProWebber.ru</div>    
    <ul class="leftmenu_list">    
    <li><a title="MysterIoes" href="javascript:ShowOrHide('menu3');">MysterIoes</a></li>    
    <div id="menu3" style="display:none;">    
    <ul>    
    <li><a href="#">Релизы</a>    
    <li><a href="#">Баг-Фиксы</a>    
    <li><a href="#">Сборки</a>    
    <li><a href="#">Хаки</a>    
    <li><a href="#">Модули</a>    
    <li><a href="#">Модули(платные)</a>    
    <li><a href="#">Шаблоны</a>    
    <li><a href="#">Шаблоны(платные)</a>    
    <li><a href="#">Разное</a>    
    </ul>    
    </div>    

    </ul>    

    </div>    
    </div>    
    <div class="block_bot"></div>    
    </div>

Never Back Down [NBD] Никогда не сдавайся и ты увидишь как сдаются другие !
[Сообщение # 3]  
avatar
Админ | Оффлайн
репутация 19
Красивое выдвижное меню


Установка:
1.П/У
2.Глобальные блоки
3.Создаете блок
4.Вставляете туда ког
5.Редактируете под своё
6.код блока вставляете куда хотите

Code
<table width="178" bgcolor="#000000" cellpadding="3" cellspacing="1">   
   <tbody><tr background="http://hack-rus.ru//design/cellpic4.gif">   
   <td colspan="1" background="http://hack-rus.ru//design/cellpic4.gif"><span class="style54"><!-- <bt> --><!--<s5184>--><font color="#009cff"></font>Меню сайта<!--</s>--><!-- </bt> --></span></td>   
   </tr>   

   <tr bgcolor="#333333">   
   <td><!-- <bc> --><style type="text/css">   
.suckerdiv ul{   
margin: 0;   
padding: 0;   
list-style-type: none;   
width: 170px; /* Width of Menu Items */   
border-bottom: 1px solid #ccc;   
}   

.suckerdiv ul li{   
position: relative;   
}   

/*Sub level menu items */   
.suckerdiv ul li ul{   
position: absolute;   
width: 170px; /*sub menu width*/   
top: 0;   
visibility: hidden;   
}   

/* Sub level menu links style */   
.suckerdiv ul li a{   
display: block;   
overflow: auto; /*force hasLayout in IE7 */   
color: black;   
text-decoration: none;   
background: #232323;   
padding: 1px 5px;   
border: 1px solid #505050;   
border-bottom: 474747;   
}   

.suckerdiv ul li a:visited{   
color: black;   
}   

.suckerdiv ul li a:hover{   
background-color: black;   
}   

.suckerdiv .subfolderstyle{   
background: url(http://promax.pp.ru/imagesmenu/arrow-list.gif) no-repeat center right;   
}   

/* Holly Hack for IE \*/   
* html .suckerdiv ul li { float: left; height: 1%; }   
* html .suckerdiv ul li a { height: 1%; }   
/* End */   

</style>   

<script type="text/javascript">   
var menuids=["suckertree1"]   

function buildsubmenus(){   
for (var i=0; i<menuids.length; i++){   
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")   
for (var t=0; t<ultags.length; t++){   
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"   
if (ultags[t].parentNode.parentNode.id==menuids[i])   
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"   
else   
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"   
ultags[t].parentNode.onmouseover=function(){   
this.getElementsByTagName("ul")[0].style.display="block"   
}   
ultags[t].parentNode.onmouseout=function(){   
this.getElementsByTagName("ul")[0].style.display="none"   
}   
}   
for (var t=ultags.length-1; t>-1; t--){   
ultags[t].style.visibility="visible"   
ultags[t].style.display="none"   
}   
}   
}   

if (window.addEventListener)   
window.addEventListener("load", buildsubmenus, false)   
else if (window.attachEvent)   
window.attachEvent("onload", buildsubmenus)   
</script>   

<div class="suckerdiv">   
<ul id="suckertree1">   
<li><a href="/" title="Главная страница"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Г</font><font color="#cacaca">лавная</font> </a></li>   
<li><a href="http://warcraft.3dn.ru" title="Форум"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Ф</font><font color="#cacaca">орум</font> </a></li>   
<li><a href="http://warcraft.3dn.ru" title="Баннерообмен"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Б</font><font color="#cacaca">аннерообмен</font> </a></li>   
<li><a href="http://warcraft.3dn.ru" title="Реклама на сайте"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Р</font><font color="#cacaca">еклама на сайте</font> </a></li>   
<li><a href="http://hr-tops.tu2.ru/" title="Топ сайтов"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Т</font><font color="#cacaca">оп сайтов</font> </a></li>   
<li><a href="/forum/2" title="Администрация"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>А</font><font color="#cacaca">дминистрация</font> </a></li>   
<li><a href="/load/61" title="Скачать RAP альбомы"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>R</font><font color="#cacaca">AP альбомы</font> </a></li>   

</li><li><a href="/load/10" title="Полезно знать!"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>П</font><font color="#cacaca">олезное</font></a>   
<ul>   
<li><a href="http://hack-rus.ru/index/0-5"><font color="#cacaca"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Лучшие Тореннты</font></a></li>   
<li><a href="http://warcraft.3dn.ru"><font color="#cacaca"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Скачать музыку вконтакте</font></a></li>   
<li><a href="http://warcraft.3dn.ru"><font color="#cacaca"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Как избежать взлома(Сайт)</font></a></li>   
</li>   
</ul>   

</li><li><a href="/forum/9" title="Всё для веб мастера"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>В</font><font color="#cacaca">сё для Вебмастера</font></a>   
<ul>   
<li><a href="http://websurf.ru"><font color="#cacaca"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Раскрутка сайтов</font></a></li>   
<li><a href="http://hack-rus.ru/forum/11"><font color="#cacaca"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Заработок</font></a></li>   
<li><a href="http://hack-rus.ru/forum/14"><font color="#cacaca"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Заказ графики</font></a></li>   
</li>   
</ul>   

<li><a href="/load/50" title="Всё"><font color="#009cff"><img src="http://ice-playten.ru/Kartonki1/strelkaMUNI21f.gif"/ border=0>Ш</font><font color="#cacaca">аблоны для Dle</font></a>   
</ul></div><!-- </bc> --></td>   
    
   </tr>   
   </tbody></table>

Never Back Down [NBD] Никогда не сдавайся и ты увидишь как сдаются другие !
[Сообщение # 4]  
avatar
Админ | Оффлайн
репутация 19
Прикольное выдвижное меню

это в head

Code
<script type="text/javascript" src="http://ms-studio.do.am/file/JS/321.js"></script>   
<script type="text/javascript" src="http://ms-studio.do.am/file/JS/123.js"></script>
<link type="text/css" rel="StyleSheet" href="http://ms-studio.do.am/file/JS/123.css" />


это меню, только ссылки заменить на свои
Code


<div id="centerpage">   
   <div id="header">   
<div id="menubar">   
<a href="http://7ucoz.do.am/" onmouseover="ypSlideOutMenu.showMenu('menu1');" onmouseout="ypSlideOutMenu.hideMenu('menu1')">Всё для uCoz</a>   
<a href="http://7ucoz.do.am/" onmouseover="ypSlideOutMenu.showMenu('menu2');" onmouseout="ypSlideOutMenu.hideMenu('menu2')">Скачать</a>   
<a href="http://7ucoz.do.am/" onmouseover="ypSlideOutMenu.showMenu('menu3');" onmouseout="ypSlideOutMenu.hideMenu('menu3')">Шаблоны для uCoz</a>   
<a href="http://7ucoz.do.am/" onmouseover="ypSlideOutMenu.showMenu('menu4');" onmouseout="ypSlideOutMenu.hideMenu('menu4')">Мой сайт</a>   
<a href="http://7ucoz.do.am/" onmouseover="ypSlideOutMenu.showMenu('menu5');" onmouseout="ypSlideOutMenu.hideMenu('menu5')">Компания</a>   
</div>   
</div>   
<div id="menu1Container">   
   <div id="menu1Content" class="menu">   
   <a href="http://7ucoz.do.am/">Accurate Monitor for Search Engines</a>

   <a href="http://7ucoz.do.am/">AdWords Clever Wizard</a>

   <a href="http://7ucoz.do.am/">SEO Altimeter</a><br>   
   <a href="http://7ucoz.do.am/">Site Content Analyzer 3</a>

   <a href="http://7ucoz.do.am/">Free Monitor for Google</a>

   <a href="http://7ucoz.do.am/">BackLinks Master</a>

   <a href="http://7ucoz.do.am/">PaRaMeter</a>

   <a href="http://7ucoz.do.am/">Ya Monitor</a>

   </div>   

   </div>   
   <div id="menu2Container">   
   <div id="menu2Content" class="menu">   
   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/amonitorse.exe">Accurate Monitor for Search Engines (3.4 Mb)</a>

   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/cleverwiz.exe">AdWords Clever Wizard (1.7 Mb)</a>

   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/seoaltimeter.exe">SEO Altimeter (2.2 Mb)</a>

   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/scanalyzer3.exe">Site Content Analyzer 3 (3.1 Mb)</a>

   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/googlemon.exe">Free Monitor for Google (1.45 Mb)</a>

   <a href="#">BackLinks Master (1.26 Mb)</a>

   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/parameter.exe">PaRaMeter (1.3 Mb)</a>

   <a href="http://www.cleverstat.com/cgi-bin/sws/go.pl?distr=http://www.cleverstat.com/yamonitor.exe">Ya Monitor (1.5 Mb)</a>

   </div>   
   </div>   
   <div id="menu3Container">   
   <div id="menu3Content" class="menu">   
   <a href="http://7ucoz.do.am/">Accurate Monitor for Search Engines</a>

   <a href="http://7ucoz.do.am/">AdWords Clever Wizard</a>

   <a href="http://7ucoz.do.am/">SEO Altimeter</a>

   <a href="http://7ucoz.do.am/">Site Content Analyzer 3</a><br>   
   </div>   

   </div>   
   <div id="menu4Container">   
   <div id="menu4Content" class="menu">   
   <a href="/forum/">Форум (англ.)</a>

   <a href="feedback.htm">Обратная связь</a>   
   </div>   
   </div>   
   <div id="menu5Container">   
   <div id="menu5Content" class="menu">   
   <a href="news.htm">Новости</a>

   <a href="/blog/">Блог (англ.)</a>

   <a href="contact.htm">Контакты</a>

   <a href="privacy.htm">Конфиденциальность</a><br>   
   <a href="affiliate.htm">Партнерам</a>   
   </div>   
   </div></div>

Never Back Down [NBD] Никогда не сдавайся и ты увидишь как сдаются другие !
[Сообщение # 5]  
Форум » ...iT заметки [общие компьютерные темы] » web мастерская » html • css » Красивое меню на сайт
  • Страница 1 из 1
  • 1
Поиск:

close