Loading





Форекс с Альпари

eTXT




Анкетка


Горизонтальное многоуровневое меню на CSS и jQuery (вариант №2)

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это многоуровневое выпадающее горизонтальное меню создаётся при помощи вложенных списков HTML.

Демо-пример

Демо-пример будет работать только при включенном Интернете, так как файл последней версии библиотеки jQuery загружается удаленно с сайта Google API. О подключении библиотеки прочтите здесь.


Установка на сайт

1. Код с указанием пути к файлу CSS, подключения библиотеки jQuery и скриптами (в таблице внизу) вставить в раздел head своего сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на сегодняшний день - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.

2. А этот код скопируйте и расположите в разделе body в том месте, где будет находиться меню:


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left">
</div>

Впишите свои URL-лы и названия ссылок.

Вспомогательные файлы

Для корректной работы меню необходимы следующие файлы поддержки, которые Вы должны загрузить по умолчанию в ту же папку, что и ваша страница:

  1. jqueryslidemenu.css;
  2. jqueryslidemenu.js  (внутри этого файла проверьте пути к изображениям указателей).

Откройте и скопируйте содержимое этих файлов, вставьте в созданный новый текстовой документ. Переименуйте документ соответственно содержимому.




Используемые изображения:
изображение
изображение

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Спасибо за внимание. Посещайте ещё мой сайт. Пока! L.M.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка