Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

Простое вертикальное меню с выпадающими подменю

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<style type="text/css">
/* меню */
.menu  {background: #aaaaaa; border: #ff00ff 1px solid; border-bottom: none;}
.menu td {border-bottom: #ff00ff 1px solid; padding: 5px;}
.menu a {color: #880000;}
.menu a:hover {color: #ff0000; text-decoration:none;} 
.menu a img {margin-right: 5px;}
/* всплывающий блок подменю */
.menuskin{
position:absolute;
width:165px;
background-color:#aaaaaa;
border:2px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
visibility:hidden;
}
.menuskin a{
text-decoration:none;
color:black;
padding-left:10px;
padding-right:10px;
}
.menuskin div.tittt {color: #660000; text-align: center; font-weight: bold;}
/* ссылки подменю */
#mouseoverstyle{
background-color:highlight;
}
#mouseoverstyle a{
color:white;
}
</style>
<script type="text/javascript">
/* мнемоника всех подменю */
var linkset=new Array()
linkset[0]='<div class="menuitems"><a href="http://">Линк 1</a></div>'
linkset[0]+='<hr>' //Optional Separator (разделитель)
linkset[0]+='<div class="menuitems"><a href="http://">Линк 2</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://">Линк 3</a></div>'
linkset[1]='<div class="menuitems"><a href="http://">Линк 4</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://">Линк 5</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://">Линк 6</a></div>'
linkset[1]+='<hr>' //Optional Separator (разделитель)
linkset[1]+='<div class="menuitems"><a href="http://">Линк 7</a></div>'
linkset[2]='<div class="tittt">Мой проект</div>' //Optional Title (название подменю)
linkset[2]+='<hr>' //Optional Separator (разделитель)
linkset[2]+='<div class="menuitems"><a href="http://webkpb.ucoz.ru" target="_blank" title="Библиотека Flash">WebKPB</a></div>'
linkset[2]+='<div class="menuitems"><a href="http://kpbshablon.ucoz.ru" target="_blank" title="Магазин дизайнов">KPBshablon</a></div>'
linkset[2]+='<div class="menuitems"><a href="http://kpbwebstudio.narod.ru" target="_blank" title="Моя WEBстудия">KPBwebStudio</a></div>'
linkset[2]+='<div class="menuitems"><a href="http://skriptkpbstudio.ucoz.ru" target="_blank" title="Библиотека JavaScript, jQuery и т.д.">ScriptKPBstudio</a></div>'
</script>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_wert/403/wertik_menu_s_podmenu.js"></script>

Всё основное подписано, проблем быть не должно. Каждое подменю имеет свой номер. Под этим номером прописываются все ссылки, разделители, названия и т.д. В подменю можно вставлять любые теги, т.е. всё что Вы захотите.

Внутри тега <BODY> - </BODY> там где у Вас будет меню.

Это пример структуры меню. Как Вы видиет, в меню могут быть и простые ссылки и вертикальные подменю. Их взаимное расположение и колличество на Ваше усмотрение. Структура каждого подменю и колличество ссылок в нём, так же на Ваше усмотрение.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.