Эффекты на основе Java Script

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

Навигация Главная Новости RSS OneMP3 ВКонтакте New: Вечеринки New:Подкасты Музыка New:Promo Only! Rap/R&B/Hip-hop Alternative Pop Rock Punk Soundtrack (OST) Metall Disco Emo Видео Клипы Фильмы Разное Музыкальные новости Тексты песен Биографии Обои и аватары Программы	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<STYLE type=text/css media=all>@import url( http://skriptkpbstudio.ucoz.ru/demo_srt/mootols_menu/949/css/extensions2.css );</STYLE> <SCRIPT language=javascript src="http://skriptkpbstudio.ucoz.ru/demo_srt/mootols_menu/949/js/mootools.js" type=text/javascript></SCRIPT> <SCRIPT language=javascript type=text/javascript> var YtSettings = { widthThinPx: 780, widthWidePx: 940, widthFluidPx: 0.90, heightToppanel: 320}; var YtTools = { start: function() { /* Color settings / var currentColor = '#ff4b00'; / цвет фона меню и ссылок меню при наведении / / Accordion menu / var accordionFx = new YtAccordionMenu('li.toggler', 'ul.accordion', { accordion: 'slide' }); / Sub menu level2 (wertik menu) / var submenuEnter = { 'background-color': currentColor }; var submenuLeave = { 'background-color': '#000000' }; / цвет фона меню после снятия курсора / if (YtSettings.layout == 'right') { $extend(submenuEnter, { 'margin-right': 0 }); $extend(submenuLeave, { 'margin-right': 10 }); / величина сдвига влево при наведении / } else { $extend(submenuEnter, { 'margin-left': 0 }); $extend(submenuLeave, { 'margin-left': 10 }); / величина сдвига вправо при снятии курсора / } / скорость меню / var submenuFx1 = new YtMorph('#submenu .level2, #othermenu .level1', submenuEnter, submenuLeave, { transition: Fx.Transitions.expoOut, duration: 600 }, / выезд вправо+цвет фона / { transition: Fx.Transitions.sineIn, duration: 1000 }); / возврат влево+цвет фона / / Sub menu level3 / var submenuLeave2 = $merge(submenuLeave, { 'background-color': '#141414' }); / цвет фона ссылок после снятия курсора / var submenuFx2 = new YtMorph('#submenu .level3, #othermenu .level2', submenuEnter, submenuLeave2, { transition: Fx.Transitions.expoOut, duration: 300 }, / выезд вправо+цвет фона / { transition: Fx.Transitions.sineIn, duration: 500 }); / возврат влево+цвет фона / } }; / Add functions on window load */ window.addEvent('load', YtTools.start); </SCRIPT> <SCRIPT language=javascript src="http://skriptkpbstudio.ucoz.ru/demo_srt/mootols_menu/949/js/morph.js" type=text/javascript></SCRIPT> <SCRIPT language=javascript src="http://skriptkpbstudio.ucoz.ru/demo_srt/mootols_menu/949/js/menu.js" type=text/javascript></SCRIPT>
	То что я посчитал что может вызвать вопрос я подписал. Всё параметры и стили задаются в CSS таблице, т.е. в файле extensions2.css Я нестал его подробно расписывать. Если кого меню заинтересовало разберите её сами, там ничего сложного нет. Если уж совсем никак, но очень хочется, свяжитесь со мной, помогу.
	Внутри тега <BODY> - </BODY> там где у Вас будет меню.
	<DIV id=middle> <DIV class="background layoutleft"> <DIV id=left> <DIV class=clearingfix id=left_container> <DIV id=submenu> <UL class=mainmenu> <!-- Основное меню(всё время открыто) --> <LI class=level2><SPAN>Навигация</SPAN> <!-- его название --> <DIV> <UL class="mainmenu accordion"> <LI class=level3><A href="#">Главная</A> <!-- его ссылки --> <LI class=level3><A href="#">Новости</A> <LI class=level3><A href="#">RSS</A> <LI class=level3><A href="#">OneMP3</A> <LI class=level3><noindex><A href="#">ВКонтакте</A></noindex> <LI class=level3><A href="#"><FONT color="#ffff00">New:</FONT> Вечеринки</A> <LI class=level3><noindex><A href="#"><FONT color="#00ff00">New:</FONT>Подкасты</A></noindex> </LI></UL></DIV></LI> <!-- 2-е меню(кликом раздвигается и собирается) --> <LI class="level2 parent toggler"><SPAN>Музыка</SPAN> <!-- его название --> <DIV> <UL class="mainmenu accordion"> <LI class=level3><A href="#"><FONT color=red>New:</FONT>Promo Only!</A> <!-- его ссылки --> <LI class=level3><A href="#">Rap/R&B/Hip-hop</A> <LI class=level3><A href="#">Alternative</A> <LI class=level3><A href="#">Pop</A> <LI class=level3><A href="#">Rock</A> <LI class=level3><A href="#">Punk</A> <LI class=level3><A href="#">Soundtrack (OST)</A> <LI class=level3><A href="#">Metall</A> <LI class=level3><A href="#">Disco</A> <LI class=level3><A href="#">Emo</A> </LI></UL></DIV></LI> <!-- 3-е меню(кликом раздвигается и собирается) --> <LI class="level2 parent toggler"><SPAN>Видео</SPAN> <!-- его название --> <DIV> <UL class="mainmenu accordion"> <LI class=level3><A href="#">Клипы</A> <!-- его ссылки --> <LI class=level3><A href="#">Фильмы</A> </LI></UL></DIV></LI> <!-- 4-е меню(кликом раздвигается и собирается) --> <LI class="level2 parent toggler"><SPAN>Разное</SPAN> <!-- его название --> <DIV> <UL class="mainmenu accordion"> <LI class=level3><A href="#">Музыкальные новости</A> <!-- его ссылки --> <LI class=level3><A href="#">Тексты песен</A> <LI class=level3><A href="#">Биографии</A> <LI class=level3><A href="#">Обои и аватары</A> <LI class=level3><A href="#">Программы</A> </LI></UL></DIV></LI></UL></DIV></DIV></DIV></DIV></DIV>
	Здесь приведён пример возможного использования данного меню. Впринципе всё подписано. Вставляйте вместо приведенной информации свою и пользуйтесь. Единственно что Вам надо задать самостоятельно это размеры и стиль Вашего меню. Колличество меню и ссылок в них на Ваше усмотрение. Вы наверное уже заметили, если ссылка помещена внутрь тега <noindex> </noindex> то её поле по высоте можно увеличить(это может быть полезно). У первой ссылки постоянно открытое подменю. Если Вам этого не нужно, закройте его как и подменю других ссылок и оно будет открываться только когда Вам нужно. В этом случае уберите адресс перехода на этой ссылке, иначе при открытии её подменю будет открываться дополнительное окно.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.