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

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

Home Submenu1 Ссылка 1 Ссылка 2 Submenu2 Submenu_2_3 Ссылка 1 Ссылка 2 Submenu_2_4 Submenu_4_5 Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка Ссылка Submenu_6 Ссылка 1 Ссылка 2 Ссылка Ссылка Ссылка	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_wert/809/fsmenu.js"></script> <link rel="stylesheet" type="text/css" href="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_wert/809/listmenu.css">
	Все стили и параметры меню задаются в CSS таблице, файл listmenu.css. Если Вы хотите что-то изменить Вам нужно, воспользовавшись функцией [Скачать с сервера], скачать данный файл и внести необходимые изменения.
	Внутри тега <BODY> - </BODY> там где у Вас будет меню.
	<ul class="menulist" id="listMenuRoot"> <li><a href="#">Home</a></li> <li> <a href="#"><span class="subind"></span>Submenu1</a> <ul class="subb" id="listMenu-id-1"> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li> <a href="#"><span class="subind"></span>Submenu2</a> <ul class="subb" id="listMenu-id-2"> <li> <a href="#"><span class="subind"></span>Submenu_2_3</a> <ul class="subb" id="listMenu-id-3"> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li> <a href="#"><span class="subind"></span>Submenu_2_4</a> <ul class="subb" id="listMenu-id-4"> <li><a href="#"><span class="subind"></span>Submenu_4_5</a> <ul class="subb" id="listMenu-id-5"> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">Ссылка 3</a></li> </ul> </li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li> </ul> </li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li> <a href="#"><span class="subind"></span>Submenu_6</a> <ul class="subb" id="listMenu-id-6"> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">Ссылка</a></li> </ul> <script type="text/javascript"> // Here's a menu object to control the above list of menu data: var listMenu = new FSMenu('listMenu', true, 'display', 'block', 'none'); // The parameters of the FSMenu object are: // 1) Its own name in quotes. // 2) Whether this is a nested list menu or not (in this case, true means yes). // 3) The CSS property name to change when menus are shown and hidden. // 4) The visible value of that CSS property. // 5) The hidden value of that CSS property. // // Next, here's some optional settings for delays and highlighting: // * showDelay is the time (in milliseconds) to display a new child menu. // Remember that 1000 milliseconds = 1 second. // * switchDelay is the time to switch from one child menu to another child menu. // Set this higher and point at 2 neighbouring items to see what it does. // * hideDelay is the time it takes for a menu to hide after mouseout. // Set this to a negative number to disable hiding entirely. // * cssLitClass is the CSS classname applied to parent items of active menus. // * showOnClick will, suprisingly, set the menus to show on click. Pick one of 4 values: // 0 = All levels show on mouseover. // 1 = Menu activates on click of first level, then shows on mouseover. // 2 = All levels activate on click, then shows on mouseover. // 3 = All levels show on click only (no mouseover at all). // * hideOnClick hides all visible menus when one is clicked (defaults to true). // * animInSpeed and animOutSpeed set the animation speed. Set to a number // between 0 and 1 where higher = faster. Setting both to 1 disables animation. // Здесь указаны параметры по умолчанию. Если какой-то параметр Вам нужно изменить, раскомментируйте его и установите нужное Вам его значяение //listMenu.showDelay = 0; // задержка открытия первого подменю в каждом меню //listMenu.switchDelay = 125; // задержка открытия второго подменю в каждом меню //listMenu.hideDelay = 500; // задержка на закрытие всех пожменю //listMenu.cssLitClass = 'highlighted'; // класс стилей //listMenu.showOnClick = 0; // // 0 = Все уровни показывают на mouseover.; 1 = Меню активирует по щелчку первого уровня, затем показывает на mouseover.; 2 = Все уровни активируют по щелчку, затем показывает на mouseover.; 3 = Все уровни показывают по щелчку только (никакой mouseover вообще) //listMenu.hideOnClick = true; // метки //listMenu.animInSpeed = 0.2; // скорость появления подменю //listMenu.animOutSpeed = 0.2; // скорость исчезновения подменю // I'm applying two at once to listMenu. Delete this to disable! listMenu.animations[listMenu.animations.length] = FSMenu.animFade; listMenu.animations[listMenu.animations.length] = FSMenu.animSwipeDown; //listMenu.animations[listMenu.animations.length] = FSMenu.animClipDown; var arrow = null; if (document.createElement && document.documentElement) { // указатель submenu arrow = document.createElement('span'); arrow.appendChild(document.createTextNode('>')); // Если 3-и строки ниже скрыть, то вместо стрелки-картинки будет текстовая стрелка arrow = document.createElement('img'); arrow.src = 'http://skriptkpbstudio.ucoz.ru/demo_srt/menu_wert/809/arrow.gif'; arrow.style.borderWidth = '0'; // стиль arrow.className = 'subind'; } addReadyEvent(new Function('listMenu.activateMenu("listMenuRoot", arrow)')); </script>
Здесь представлен пример структуры меню и описано задание параметров скрипта. Думаю, Вы легко разберётесь и сами пропишите нужную Вам структуру меню и зададите его параметры. Колличество ссылок и в меню и подменю, колличество помменю и их вложений на Ваше усмотрение.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.