Загрузка. Пожалуйста, подождите...

Главная страница → → Уроки дизайна, Ucoz → → Вертикальное раздвижное меню

Вертикальное раздвижное меню

Это меню подойдет для любого сайта в том числе и ucoz. Вертикальное раздвижное меню на Ucoz легкое в установке и работает во всех популярных браузерах. Добавьте вначале вот этот скрипт
<script language="JavaScript"> 
function hide(obj) {
if(document.getElementById(obj).style.display == '')
{document.getElementById(obj).style.display = 'none';
}
else
{document.getElementById(obj).style.display = '';
}
}
</script>

Теперь если у вас юкоз то включаем конструктор и в новом блоке html выставляем код что ниже
<a href="/" class="menu2"> Главная</a><br> 

<a onclick="hide('sub1')" class="menu2" > Новости</a><br>
<span id="sub1" style="display: none; ">
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
</span>

<a onclick="hide('sub2')" class="menu2" > Трансляции</a><br>
<span id="sub2" style="display: none; ">
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
</span>

<a onclick="hide('sub3')" class="menu2" >Статьи</a><br>
<span id="sub3" style="display: none; ">
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
</span>

<a onclick="hide('sub4')" class="menu2" >Фотоальбом</a><br>
<span id="sub4" style="display: none; ">
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
</span>

<a onclick="hide('sub5')" class="menu2" >Стадион</a><br>
<span id="sub5" style="display: none; ">
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
</span>

<a onclick="hide('sub6')" class="menu2" >История</a><br>
<span id="sub6" style="display: none; ">
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
<a href="http://dimitraki.info/news/" class="menu2sub"> Пробный</a><br>
</span>

В таблицу стилей добавляем
.menu2 {float:left;padding:5px;height:17px;width:166px; background:#fff;color:#39435D;cursor:pointer; } 
a.menu2:link {text-decoration:none; color:#39435D}
a.menu2:active {text-decoration:underline; color:#38435D}
a.menu2:visited {text-decoration:none; color:#39435D}
a.menu2:hover {text-decoration:none; color:#FF9900;}

.menu2sub {background: #EEE;border: 1px dotted #CCC;float: left;margin:2px;padding:5px;width: 167px;}
a.menu2sub:link {text-decoration:none; color:#39435D}
a.menu2sub:active {text-decoration:underline; color:#39435D}
a.menu2sub:visited {text-decoration:none; color:#39435D}
a.menu2sub:hover {text-decoration:none; color:#A1B144}



Уроки дизайна

Обновлено: 8 марта 2013

меню ucoz любого сайта числе подойдет вертикальное раздвижное легкое установке работает популярных браузерах добавьте вначале скрипт

1578 27.07.11
Информация
Только зарегистрированные пользователи могут оставлять в данной новости свои комментарии.