[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 2 из 2«12
Форум » Общая информация » Все о создании сайтов. » Менюшки сайтов
Менюшки сайтов
RedStarДата: Понедельник, 12.07.2010, 04:31 | Сообщение # 16
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Новое меню для сайта

Установка: создаём блок / меняем ссылки на свои / вставляем этот код:

Code
<a href="$HOME_PAGE_LINK$" target="_self"><img src="http://russian-stuff.org.ru/menu/sr.png" border="0"></a>
<a href="/forum" target="_self"><img src="http://russian-stuff.org.ru/menu/forum.png" border="0"></a>
<a href="/photo" target="_self"><img src="http://russian-stuff.org.ru/menu/galery.png" border="0"></a>
<a href="/load/treki/1" target="_self"><img src="http://russian-stuff.org.ru/menu/tracks.png" border="0"></a>
<a href="/news/releases/1-0-2" target="_self"><img src="http://russian-stuff.org.ru/menu/rel.png" border="0"></a>
<a href="/news/exclusive/1-0-5" target="_self"><img src="http://russian-stuff.org.ru/menu/exc.png" border="0"></a>
<a href="/news/klipy/1-0-6" target="_self"><img src="http://russian-stuff.org.ru/menu/clips.png" border="0"></a>
<a href="/news/promo/1-0-1" target="_self"><img src="http://russian-stuff.org.ru/menu/promo.png" border="0"></a>
<a href="http://russian-stuff.org.ru/forum/50" target="_self"><img src="http://russian-stuff.org.ru/menu/films.png" border="0"></a>
<a href="http://russian-stuff.org.ru/forum/14" target="_self"><img src="http://russian-stuff.org.ru/menu/softGames.png" border="0"></a>

 
RedStarДата: Понедельник, 12.07.2010, 04:35 | Сообщение # 17
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
меню для сайта

установка ка проста:
1 - заходим в конструктор
2 - создаем блок
3 - вставляем код
4 - смотрим

Code
<STYLE> .blockmenu { height:18px; width: 100%; font: normal 10px Arial, Helvetica, sans-serif; text-align: left; } .blockmenu a:link, .blockmenu a:visited { color:#ffffff; text-decoration:none; padding-left:16px; line-height:18px; display:block; font-weight:normal; background: #000000; border-top: 1px solid #666666; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #666666; text-align: left; } .blockmenu a:hover { color:#ffffff; text-decoration:none; padding-left:16px; line-height:18px; display:block; font-weight:normal; border: 1px solid #666666; background: #333333 url("http://pokefansclub.ucoz.ru/imajes/g_rom6_pokeball_12693.png") no-repeat left center; text-align: left; } form { padding:0px; margin:0px; } input{ vertical-align:middle; font-size:7pt; font-family:verdana,arial,helvetica; color:#ffffff; background:#000000; } </STYLE><SPAN class="blockmenu"><A href="ССЫЛКА">Главная страница</A><A href="ССЫЛКА">НАЗВАНИЕ</A><A href="ССЫЛКА">НАЗВАНИЕ</A><A href="ССЫЛКА">НАЗВАНИЕ</A></SPAN>

ЕСЛИ ХОТИТЕ ИЗМЕНИТЬ ЗНАЧЁК
ТО В КОДЕ ПОМЕНЯЙТЕ ВОТ ЭТО:
http://pokefansclub.ucoz.ru/imajes/g_rom6_pokeball_12693.png
НА СВОЙ ЗНАЧЁК (ССЫЛКУ)

 
RedStarДата: Понедельник, 12.07.2010, 04:39 | Сообщение # 18
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Раздвижное меню.

Вставляем в любой блок и настраиваем под себя.

Code

<div style="display:inline;" id="menuDiv"><ul id="tmenu0" style="margin-left:4px">
<li class="expanded"><span style="font-weight:bold">Главная</span>
<ul>
   <li><a href="/" title="Главная страница">Главная страница</a></li>
   <li><a href="/forum" title="Форум портала">Форум</a></li>
   <li><a href="/load" title="Все файлы">Каталог файлов</a><img ilo-full-src="http://csfilez.net.ru/design/new2.gif" alt="Свежие файлы" src="http://csfilez.net.ru/design/new2.gif"></li>
   <li><a href="/dir/1" title="Каталог сайтов">Каталог сайтов</a></li>
   <li><a href="/forum/172-2289-1" title="Банеробмен">Банеробмен</a></li>
   <li><a href="/index/0-27" title="О проекте">Информация о сайте</a></li>
</ul></li>

<li class="expanded"><span style="font-weight:bold">Все для сайта</span>
<ul>
<li><a href="/load/76" title="Шаблоны сайтов">Шаблоны сайтов</a>   
<li><a href="/load/42" title="Шапки сайтов">Шапки сайтов</a>   
<li><a href="/load/44" title="Иконки групп">Иконки групп</a>   
<li><a href="/load/95" title="Ранги">Ранги</a>
<li><a href="/load/59" title="Иконки форума">Иконки форума</a>   
<li><a href="/forum/9" title="Скрипты">Скрипты</a>   
<li><a href="/load/46" title="Софт">Софт</a>   
<li><a href="/load/92" title="Прочее">Прочее</a>   
</ul></li>
<li><span style="font-weight:bold">Все для вашего сайта</span>
<ul>   
<li><a href="/forum/43" title="Раскрутка сайта">Раскрутка сайта</a>   
<li><a href="/index/analiz_vashego_sajta/0-36" title="Анализ вашего сайта">Анализ сайта</a>   
<li><a href="/index/generator_meta_tegov/0-37" title="Генератор мета-тагов">Генератор мета-тегов</a>   
<li><a href="/forum/37" title="Заработок вашего сайта">Зароботок</a>   
<li><a href="/forum/193" title="Вакансии">Вакансии</a>   
<li><a href="/forum/150" title="Вам сюда если хотите что-нибудь продать">Продажа</a>   
<li><a href="/forum/151" title="Покупка любых вещей">Покупка</a>   
</ul></li>

<li><span style="font-weight:bold">Игры</span>
<ul>
<li><a href="/load/67" title="Экшены">Экшены</a>   
<li><a href="/load/63" title="Аркады">Аркады</a>   
<li><a href="/load/62" title="Гонки">Гонки</a>   
<li><a href="/load/65" title="Рпг">Рпг</a>   
<li><a href="/load/64" title="Симуляторы">Симуляторы</a>   
<li><a href="/load/61" title="Спорт">Спорт</a>   
<li><a href="/load/66" title="Стратегии">Стратегии</a>   
<li><a href="/stuff/" title="Онлайн игры">Онлайн игры</a></li>
</ul></li>

<li><span style="font-weight:bold">Photoshop</span>
<ul>
<li><a href="/load/81" title="Кисти">Кисти</a>   
<li><a href="/forum/155" title="Готовые PSD работы">Готовые PSD работы</a>   
<li><a href="/load/83" title="Стили">Стили</a>   
<li><a href="/load/91" title="Шрифты">Шрифты</a>   
<li><a href="/load/84" title="Градиенты ">Градиенты </a>   
<li><a href="/load/85" title="Плагины ">Плагины</a>   
<li><a href="/load/88" title="Узоры (Patterns)">Узоры (Patterns)</a>   
<li><a href="/load/90" title="Другое для Photoshop ">Другое для Photoshop</a>   
<li><a href="/forum/46" title="Форум по Photoshop">Форум по Photoshop</a>   
</ul></li>

<li><span style="font-weight:bold">Фильмы</span>
<ul>
<li><a href="/board/2" title="Боевики ">Боевики </a>   
<li><a href="/board/4" title="Комедии">Комедии</a>   
<li><a href="/board/6" title="Фантастика">Фантастика</a>   
<li><a href="/board/8" title="Приключения">Приключения</a>   
<li><a href="/board/3" title="Ужасы">Ужасы</a>   
<li><a href="/board/5" title="Анимэ">Анимэ</a>   
<li><a href="/board/7" title="Юмор ">Юмор</a>   
<li><a href="/board/9" title="Мульты">Мульты</a>   
<li><a href="/board/12" title="Эротика">Эротика</a>   
</ul></li>

<li><span style="font-weight:bold">Наши сервисы</span>
<ul>   
<li><a href="/index/0-8" title="Первый Игровой">Первый Игровой</a>   
<li><a href="/index/cyberarena_tv/0-35" title="CyberArena TV">CyberArena TV</a>   
<li><a href="/index/0-10" title="Онлайн компилятор плагинов">Онлайн компилятор</a>   
<li><a href="/index/0-34" title="Сайт в поисковики">Сайт в поисковики</a>   
<li><a href="/index/0-9" title="Поиск музыки">Поиск музыки</a>   
</ul></li>
<script type="text/javascript">
//<![CDATA[
var li = document.getElementById('tmenu0').getElementsByTagName('li');
for(i in li) if(li[i].className=='expanded') li[i].setAttribute('expanded','1');
function tmenudata0() {
   this.animation_jump = 5
   this.animation_delay = 2
   this.imgage_gap = 3
   this.plus_image = "http://testserver.ucoz.kz/8.png"
   this.minus_image = "http://testserver.ucoz.kz/8.png"
   this.pm_width_height = "13,10"
   this.folder_image = ""
   this.document_image = "http://testserver.ucoz.kz/8.png"
   this.icon_width_height = "16,16"
   this.icon_width2_height2 = "13,10"
   this.indent = 1;   

   this.use_hand_cursor = true;   
   this.main_item_styles = "text-decoration:none; font-weight:normal; font-family:Tahoma; font-size:13px; color:#454545; padding:1px; "
   this.sub_item_styles = "text-decoration:none; font-weight:normal; font-family:Tahoma; font-size:11.2px; color:#dedede; "
   this.main_container_styles = "padding:0px;"
   this.sub_container_styles = "padding-top:0px; padding-bottom:1px;"
   this.main_link_styles = "color:#b5b5b5; text-decoration:none;"
   this.main_link_hover_styles = "color:#debc1d; text-decoration:none;"
   this.sub_link_styles = ""
   this.sub_link_hover_styles = ""
   this.main_expander_hover_styles = "text-decoration:none;";
   this.sub_expander_hover_styles = "";
}
//]]>

</script>

<script src="http://ucozon.ru/SCRIN5/menu.js" type="text/javascript"></script></div><script type="text/javascript">try { var nl=document.getElementById('menuDiv').getElementsByTagName('a'); var found=-1; var url=document.location.href+'/'; var len=0; for (var i=0;i<nl.length;i++){ if (url.indexOf(nl[i].href)>=0){ if (found==-1 || len<nl[i].href.length){ found=i; len=nl[i].href.length; } } } if (found>=0){ nl[found].className='ma'; } } catch(e){}</script>

</ul>

 
RedStarДата: Понедельник, 12.07.2010, 05:16 | Сообщение # 19
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Менюшка вертикальная раздвижная для светлых дизаинов 1x

Установка проста,www1x.do.am вставляем в сам контеинер в место $SMENU или создаем глобальный блок и вставляем туда, разнецы не какой www.1x.do.am.

Code
<div align="center"><style type="text/css">     
.suckerdiv ul{     
margin: 0;     
padding: 0;     
list-style-type: none;     
width: 230px; /* Width of Menu Items */     
border-bottom: 5px solid #ccc;     
}     

.suckerdiv ul li{     
position: relative;     
}     

/*Sub level menu items */     
.suckerdiv ul li ul{     
position: absolute;     
width: 180px; /*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: #555555;     
text-decoration: none;     
background: #FFF;     
padding: 4px 8px;     
border: 4px solid #ccc;     
border-bottom: 0;     
}     

.suckerdiv ul li a:visited{     
color: #FF0000;     
}     

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

.suckerdiv .subfolderstyle{     
background: url(http://www.oseo.pp.ru/arrow.gif) no-repeat center right #FFFFFF;     
}     

/* 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>     

<div class="suckerdiv">     
<ul id="suckertree1">     
<li><a href=$HOME_PAGE_LINK$ title="главная"><img
border="0" align="absmiddle"
src="http://www.oseo.pp.ru/ic/glavna.gif"> Главная
</a></li>
<li><a href="/forum"
title="Форум"><img border="0" align="absmiddle"
src="http://www.oseo.pp.ru/ic/forum.gif"> Форум
</a></li>
<li><a href="/load"
title="Файлы"><img border="0" align="absmiddle"
src="http://www.oseo.pp.ru/ic/prog.gif"> Вебмастеру</a>     
<ul>     
<li><a href="/load/bazy_dlja_allsubmitter/1" title="Базы для Allsubmitter ">Базы </a>     
<li><a href="/load/programma_allsubmitter/2" title="Скачать программу ">Скачать Allsubmitter</a>     
<li><a href="/load/programmy_vebmasteru/3" title="Полезные
программы вебмастеру ">Программы вебмастеру</a>     
<li><a href="/load/sozdanie_sajtov/4" title="Программы для создания сайтов ">Создание сайтов</a>
<li><a href="/load/rabota_s_grafikoj/5" title="Программы для работы с графикой">Работа с графикой</a>
<li><a href="/load/brauzery/6" title="Скачать браузеры">Браузеры</a>
</li>     
</ul>     
<li><a href="/publ" title="Статьи о продвижении сайтов
"><img border="0" align="absmiddle"
src="http://www.oseo.pp.ru/ic/stats.gif"> Полезные
статьи</a>     
<ul>     
<li><a href="/publ/raskrutka_sajta/1" title="Статьи о раскрутке ">Раскрутка сайтов </a>     
<li><a href="/publ/optimizacija_sajta/2" title="Статьи о оптимизации ">Оптимизация сайта</a>     
<li><a href="/publ/o_sozdanii_sajtov/3" title="Статьи о создании сайтов ">Создание сайта</a>     
<li><a href="/publ/o_igrakh/4" title="Статьи о играх ">О играх</a>     
</ul>     
</li>     
<li><a href="/index/zarabotok_vebmasteru/0-4"
title="Заработок"><img border="0" align="absmiddle"
src="http://www.oseo.pp.ru/ic/dollars.gif"> Заработок
вебмастеру</a></li>     
</div>

Ссылки обязательно поменяйте на свои можно изменить картинки, и цвет кнопок и шрифта www1x.do.am

 
image-pcДата: Воскресенье, 12.06.2016, 13:25 | Сообщение # 20
Генералиссимус
Группа: Администраторы
Сообщений: 8
Репутация: 0
Статус: Offline
Вертикальное 4-х уровневое раздвигающееся и выпадающее меню CSS3



Код
<style> 
#nav { 
width:204px;  
height:310px;  
position:relative; 
}  
#nav h1 { 
font-size:40px;  
color:#d30; 

#nav #content2 { 
clear:left;  
position:absolute;  
left:230px;  
top:10px;  
width:250px;  
z-index:10; 

#menu { 
list-style-type:none;  
padding:0;  
margin:0;  
width:125px;  
position:absolute;  
top:0px;  
left:0;  
border:1px solid #fff;  
border-width:0 1px 1px;  
z-index:100; 

#menu ul { 
list-style-type:none;  
padding:0;  
margin:0; 

#menu li { 
float:left;  
background:#657;  
position:relative;  
border-top:1px solid #fff; 

#menu li.sub { 
background:#d30; 

#menu li, #menu li a { 
display:block;  
color:#fff;  
font-family:arial, sans-serif;  
font-size:11px;  
line-height:24px;  
width:125px;  
text-decoration:none;  
cursor:pointer;  
font-weight:bold;  
text-indent:5px; 

#menu ul, 
#menu li:hover ul ul, 
#menu li:hover ul li:hover ul ul {display:none;} 
#menu li:hover {color:#ff0; z-index:500;} 
#menu li:hover ul {display:block; height:150px;} 
#menu li:hover ul li:hover ul,  
#menu li:hover ul li:hover ul li:hover ul { 
display:block;  
position:absolute;  
left:110px;  
top:-1px;  
border:1px solid #fff;  
border-width:0 1px 1px;  
height:auto; 

#menu li:hover ul li.fly {background: #657;} 
#menu li:hover ul li:hover {background:#98a;} 
#menu li:hover ul li:hover ul li {background:#c60;} 
#menu li:hover ul li:hover ul li.hover ul li { 
background:#780;  
z-index:500; 

#menu li:hover ul li:hover ul li.fly {background: #c60;} 
#menu li:hover ul li:hover ul li:hover {z-index:500; background:#fa4;} 
#menu li:hover ul li:hover ul li:hover a {color:#000;} 
#menu li:hover ul li:hover ul li:hover ul li:hover {background:#aa0;} 
#menu li:hover ul li:hover ul li.hover ul li:hover a {color:#fff;} 
#nav img {display:block; float:right;} 
#nav p { 
margin:0px;  
padding:17px 0 0 0;  
color:#000;  
font-size:12px;  
font-family:arial, sans-serif;  
text-align:justify; 

</style> 
<ul id="menu"> 
<li class="sub">Types 
<ul> 
<li><a href="#">European</a></li> 
<li><a href="#">Indian</a></li> 
<li><a href="#">North Africa</a></li> 
<li class="fly"><a href="#">American</a> 
<ul> 
<li><a href="#">South American</a></li> 
<li class="fly"><a href="#">North American</a> 
<ul> 
<li><a href="#">Grey tree frog</a></li> 
<li><a href="#">Green tree frog</a></li> 
<li><a href="#">Spring peeper</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">Japanese</a></li> 
<li><a href="#">Chinese</a></li> 
</ul> 
</li> 
<li class="sub">Classifications 
<ul> 
<li class="fly"><a href="#">Pelodryadinae</a> 
<ul> 
<li><a href="#">Cyclorana</a></li> 
<li><a href="#">Litoria</a></li> 
<li><a href="#">Nyctimystes</a></li> 
</ul> 
</li> 
<li class="fly"><a href="#">Phyllomedusinae</a> 
<ul> 
<li><a href="#">Agalychnis</a></li> 
<li><a href="#">Cruziohyla</a></li> 
<li><a href="#">Hylomantis</a></li> 
<li><a href="#">Pachymedusa</a></li> 
<li><a href="#">Phasmahyla</a></li> 
<li><a href="#">Phrynomedusa</a></li> 
<li><a href="#">Phyllomedusa</a></li> 
</ul> 
</li> 
<li class="fly"><a href="#">Hemiphractinae</a> 
<ul> 
<li><a href="#">Cryptobatrachus</a></li> 
<li><a href="#">Flectonotus</a></li> 
<li><a href="#">Gastrotheca</a></li> 
<li><a href="#">Hemiphractus</a></li> 
<li><a href="#">Stefania</a></li> 
</ul> 
</li> 
<li class="fly"><a href="#">Hylinae</a> 
<ul> 
<li><a href="#">Acris</a></li> 
<li><a href="#">Anotheca</a></li> 
<li><a href="#">Bokermannohyla</a></li> 
<li><a href="#">Corythomantis</a></li> 
<li><a href="#">Ecnomiohyla</a></li> 
<li><a href="#">Hyloscirtus</a></li> 
<li><a href="#">Megastomatohyla</a></li> 
<li><a href="#">Osteocephalus</a></li> 
<li><a href="#">Pseudacris</a></li> 
<li><a href="#">Sphaenorhynchus</a></li> 
<li><a href="#">Trachycephalus</a></li> 
</ul>  
</li> 
<li class="fly"><a href="#">Rhacophorinae</a> 
<ul> 
<li><a href="#">Boophis</a></li> 
<li><a href="#">Callixalus</a></li> 
<li><a href="#">Chiromantis</a></li> 
<li><a href="#">Cryptothylax</a></li> 
<li><a href="#">Mantidactylus</a></li> 
<li><a href="#">Rhacophorus</a></li> 
</ul> 
</li> 
<li class="fly"><a href="#">Buergeriinae</a> 
<ul> 
<li><a href="#">Buergeria</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li class="sub">References 
<ul> 
<li><a href="#">Wikipedia</a></li> 
<li><a href="#">Encyclopedia</a></li> 
</ul> 
</li> 
<li class="sub">Links 
<ul> 
<li><a href="#">Complete treefrog</a></li> 
<li><a href="#">Old World treefrogs</a></li> 
<li><a href="#">Amphibian Species</a></li> 
</ul> 
</li> 
</ul>
 
image-pcДата: Воскресенье, 12.06.2016, 16:58 | Сообщение # 21
Генералиссимус
Группа: Администраторы
Сообщений: 8
Репутация: 0
Статус: Offline

6 уровневое выпадающее Горизонтальное меню
Горизонтальное выпадающее меню работает на основе CSS3


Код
<style>
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:30px 0 auto 0; position:relative; z-index:500;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}
</style>
<ul id="pmenu">
<li><a href="#">Top Level 1</a></li>
<li><a href="#">Top Level 2</a></li>
<li><a href="#">Top Level 3 ►</a>
<ul>
<li><a href="#">Sub Level 1a</a></li>
<li><a href="#">Sub Level 1b</a></li>
<li><a href="#">Sub Level 1c ►</a>
<ul>
<li><a href="#">Sub Level 2a</a></li>
<li><a href="#">Sub Level 2b ►</a>
<ul>
<li><a href="#">Sub Level 3a</a></li>
<li><a href="#">Sub Level 3b ►</a>
<ul>
<li><a href="#">Sub Level 4a</a></li>
<li><a href="#">Sub Level 4b</a></li>
<li><a href="#">Sub Level 4c ►</a>
<ul>
<li><a href="#">Sub Level 5a</a></li>
<li><a href="#">Sub Level 5b</a></li>
<li><a href="#">Sub Level 5c</a></li>
<li><a href="#">Sub Level 5d ►</a>
<ul>
<li><a href="#">Sub Level 6a</a></li>
<li><a href="#">Sub Level 6b</a></li>
<li><a href="#">Sub Level 6c</a></li>
<li><a href="#">Sub Level 6d</a></li>
</ul>
</li>
<li><a href="#">Sub Level 5e</a></li>
<li><a href="#">Sub Level 5f</a></li>
</ul>
</li>
<li><a href="#">Sub Level 4d</a></li>
<li><a href="#">Sub Level 4e</a></li>
<li><a href="#">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#">Sub Level 3c</a></li>
<li><a href="#">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#">Sub Level 1d</a></li>
<li><a href="#">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="#">Top Level 4</a></li>
<li><a href="#">Top Level 5</a></li>
<li><a href="#">Top Level 6</a></li>
</ul>
 
image-pcДата: Воскресенье, 12.06.2016, 17:16 | Сообщение # 22
Генералиссимус
Группа: Администраторы
Сообщений: 8
Репутация: 0
Статус: Offline
Вертикальное выпадающее 4-х уровневое меню
Вертикальное выпадающее меню работает на CSS3



Код
<style>
.menu {height:150px;font-size:90%;margin:0;}
.menu ul {
position:relative;
z-index:500;padding:0;
margin:0;
list-style-type:none;
width:150px;
}
.menu li {background:#d4d8bd;height:26px;float:left;}
.menu li.sub {background:#d4d8bd url(http://delaisait.ucoz.ru/script/menu/img/1/sub.gif) no-repeat right center;}
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
.menu a, .menu a:visited {
font-family:verdana, arial, sans-serif;
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
* html .menu a:hover {color:#efa; background:#aa7; position:relative;}
.menu li:hover {position:relative;}
.menu a:active, .menu a:focus {color:#efa; background:#aa7;}
.menu li:hover > a {color:#efa; background:#aa7;}
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
left:100px;
padding:30px;
background:transparent;
}
.menu li:hover > ul {visibility:visible;}
.menu ul a:hover ul ul{visibility:hidden;}
.menu ul a:hover ul a:hover ul ul{visibility:hidden;}
.menu ul a:hover ul a:hover ul a:hover ul ul{visibility:hidden;}
.menu ul a:hover ul {visibility:visible;}
.menu ul a:hover ul a:hover ul{ visibility:visible;}
.menu ul a:hover ul a:hover ul a:hover ul { visibility:visible;}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible;}
</style>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li class="sub"><a href="#">Products<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Tripods</a></li>
<li class="sub"><a href="#">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Compact</a></li>
<li><a href="#">SLR</a></li>
<li class="sub"><a href="#">Digital<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Canon</a></li>
<li class="sub"><a href="#">Nikon<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">D200</a></li>
<li><a href="#">D80</a></li>
<li><a href="#">Coolpix</a></li>
<li><a href="#">Lenses</a></li>
<li><a href="#">Speedlight</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Minolta</a></li>
<li><a href="#">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Films</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
 
Форум » Общая информация » Все о создании сайтов. » Менюшки сайтов
Страница 2 из 2«12
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz