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

Ссылки с вертикальными субменю

Hover over the links to see the menu layers demonstrated. The links and menu item links go nowhere in this example.

Note: This example is more menu-like in its appearance and functionality. The background color of menu items changes onmouseover and mouseout. Also, the viewer doesn't have to click on the link text to activate the link. Clicking anywhere on the menu item will work.

This is accomplished through style sheet settings rather than script, but unfortunately, IE 5.0 on windows doesn't have adequate CSS support to display properly. Menu item links are set display: block in lists, which causes too much margin to appear for IE 5.0 Win. One solution would be to use just links, rather than links inside list items, but that would cause accessibility problems for incapable browsers.

You can set up links anywhere in your document to show menu layers. You can set up as many menu layers as you like with this code.

If your links appear near the window edge, the code adjusts the position of the layer so it will appear within the available window space.

The menu layers are set up using div's and menu items are in unordered lists. Their appearance is controlled with style sheets.

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

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

Всё подписано, проблем быть не должно.

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

<p>Hover over the links to see the <a href="javascript:;" onmouseover="menuLayers.show('menu1', event)" onmouseout="menuLayers.hide()">menu layers</a> demonstrated. The links and menu item links go <a href="javascript:;" onmouseover="menuLayers.show('menu2', event)" onmouseout="menuLayers.hide()">nowhere</a> in this example.</p>

<p><strong><em>Note:</em></strong> This example is more <a href="javascript:;" onmouseover="menuLayers.show('menu3', event)" onmouseout="menuLayers.hide()">menu-like</a> in its appearance and functionality. The background color of menu items changes onmouseover and mouseout. Also, the viewer doesn't have to click on the link text to activate the <a href="javascript:;" onmouseover="menuLayers.show('menu4', event)" onmouseout="menuLayers.hide()">link</a>. Clicking anywhere on the menu item will work.</p>

<p>This is accomplished through style sheet settings rather than script, but unfortunately, IE 5.0 on windows doesn't have adequate CSS support to display properly. Menu item <a href="javascript:;" onmouseover="menuLayers.show('menu5', event)" onmouseout="menuLayers.hide()">links</a> are set display: block in lists, which causes too much margin to appear for IE 5.0 Win. One solution would be to use just links, rather than links inside list items, but that would cause accessibility problems for incapable browsers.</p>

<p>You can set up <a href="javascript:;" onmouseover="menuLayers.show('menu3', event)" onmouseout="menuLayers.hide()">links</a> anywhere in your document to show <a href="javascript:;" onmouseover="menuLayers.show('menu4', event)" onmouseout="menuLayers.hide()">menu layers</a>. You can set up as many menu layers as you like with this code.</p>

<p>If your <a href="javascript:;" onmouseover="menuLayers.show('menu6', event)" onmouseout="menuLayers.hide()">links</a> appear near the window edge, the code adjusts the position of the <a href="javascript:;" onmouseover="menuLayers.show('menu5', event)" onmouseout="menuLayers.hide()">layer</a> so it will appear within the available window space. </p>

<p>The <a href="javascript:;" onmouseover="menuLayers.show('menu3', event)" onmouseout="menuLayers.hide()">menu layers</a> are set up using div's and menu items are in unordered lists. Their appearance is controlled with <a href="javascript:;" onmouseover="menuLayers.show('menu6', event)" onmouseout="menuLayers.hide()">style sheets</a>. </p>

Это просто пример куска текста в котором есть несколько ссылок при наведении на которые раскрывается вертикальное меню. Мнемоника обработчика для открытия меню - onmouseover="menuLayers.show('идентификатор меню', event)".

Внутри тега <BODY> - </BODY> в самом низу, перед </BODY>.

<div id="menu1" class="menu">
  <ul>
  	<li><a href="#">Menu 1 link 1</a></li>
  	<li><a href="#">link two</a></li>
  	<li><a href="#">link three</a></li>
  	<li><a href="#">link four</a></li>
    <li><a href="#">link five</a></li>
  </ul>
</div>

<div id="menu2" class="menu">
  <ul>
    <li><a href="#">Menu 2 link 1</a></li>
  	<li><a href="#">link two</a></li>
  	<li><a href="#">link three</a></li>
  </ul>
</div>

<div id="menu3" class="menu">
  <ul>
  	<li><a href="#">Menu 3 link 1</a></li>
  	<li><a href="#">link two</a></li>
    <li><a href="#">link three</a></li>
  </ul>
</div>

<div id="menu4" class="menu">
  <ul>
  	<li><a href="#">Menu 4 link 1</a></li>
  	<li><a href="#">link two</a></li>
  	<li><a href="#">link three</a></li>
  	<li><a href="#">link four</a></li>
  </ul>
</div>

<div id="menu5" class="menu">
  <ul>
  	<li><a href="#">Menu 5 link 1</a></li>
  	<li><a href="#">link two</a></li>
  	<li><a href="#">link three</a></li>
    <li><a href="#">link four</a></li>
  </ul>
</div>

<div id="menu6" class="menu">
  <ul>
  	<li><a href="#">Menu 6 link 1</a></li>
  	<li><a href="#">link two</a></li>
  	<li><a href="#">link three</a></li>
  	<li><a href="#">link four</a></li>
  </ul>
</div>

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

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

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