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

Горизонтальное меню с вертикально разворачивающимися подменю

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

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

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

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

<ul id='nav' style="background-color: #aaaaaa; width: 296px;">
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2 ↓</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a style="padding-left: 60px;" href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a style="padding-left: 60px;" href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a style="padding-left: 60px;" href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
  <li><a href='#'>Top level 3</a></li>
  <li><a href='#'>Top level 4 ↓</a>
    <ul>
      <li><a href='#'>Sub 4 - 1</a></li>
      <li>
        <a style="padding-left: 60px;" href='#'>Sub 4 - 2</a>
        <ul>
          <li><a href='#'>Sub 4 - 2 - 2</a></li>
          <li>
            <a style="padding-left: 60px;" href='#'>Sub 4 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 4 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 4 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 4 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 4 - 2 - 1 - 4</a></li>
            </ul>
          </li>    
          
          <li>
            <a style="padding-left: 60px;" href='#'>Sub 4 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 4 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 4 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 4 - 2 - 3 - 3</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>
<script type='text/javascript'>
  $(function() {
    $('#nav').droppy();
  });
</script>

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

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

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