Loading





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

eTXT




Анкетка


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

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

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

Демо-пример

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


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

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

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


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

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


<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">CSS</a>
  <ul>
  <li><a href="#">CSS-библиотека</a></li>
  <li><a href="#">CSS-форум</a></li>
  <li><a href="#">CSS-практика</a>
	  <ul>
	  <li><a href="#">Концепция</a></li>
	  <li><a href="#">Блоки</a></li>
	  <li><a href="#">Футер</a></li>
	  <li><a href="#">Проблемы</a></li>
	  </ul>
	</li>
  <li><a href="#">FAQ</a></li>
  </ul>
</li>
<li><a href="#">Программы</a></li>
<li><a href="#">Домен и хостинг</a>
  <ul>
  <li><a href="#">Домен</a></li>
  <li><a href="#">Хостинг</a></li>
  <li><a href="#">FTP</a></li>
  <li><a href="#">Базы MySql</a>
	  <ul>
	  <li><a href="#">Ссылка 1</a></li>
	  <li><a href="#">Ссылка 2</a></li>
	  <li><a href="#">Ссылка 3</a></li>
	  <li><a href="#">Ссылка 4</a>
		  <ul>
		  <li><a href="#">Ссылка 1</a></li>
		  <li><a href="#">Ссылка 2</a></li>
		  <li><a href="#">Ссылка 3</a></li>
		  <li><a href="#">Ссылка 4</a></li>
		  <li><a href="#">Ссылка 5</a></li>
		  </ul>
		</li>
	  </ul>
	</li>
  <li><a href="#">FAQ</a></li>
  </ul>
</li>
<li><a href="#">Галерея</a></li>
</ul>
</div>

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



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

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

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

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




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

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

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


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




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







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