Выпадающее менюДоброго времени суток всем читателям – Sozdaiblog.ru!

Сегодня Вы узнаете, как сделать горизонтально выпадающее меню для сайта на WordPress.

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

Итак, давайте начнём установку.

 

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

Горизонтально выпадающее меню

 

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

Для начала Вам надо скачать следующий архив – Menu.rar.

Затем его нужно распаковать в удобное для Вас место. Там будут три файла – min.js; jQuery.js и style.css.

Теперь Вы должны взять файлы min.js; и jQuery.js и закинуть их в корневую папку Вашего сайта. Это там, где находятся все папки и файлы существующего ресурса. Для этого лучше использовать ftp-клиента.

Затем копируем содержимое файла style.css, заходим в папку с  Вашей активной темой  оформления сайта, находим аналогичный файл, открываем для редактирования и в самом конце вставляем скопированные данные.

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

Теперь осталось их подключить и настроить.

Для этого нужно открыть файл header.php, который находится в папке с Вашей активной темой оформления и перед закрывающим тегом </head> вставить следующий код:

 

<script type="text/javascript" src="https://Путь к файлу/jQuery.js"></script>
<script type="text/javascript" src="https://Путь к файлу/min.js"></script>

 

Обратите внимание! Внутри кода Вы прописываете пути к файлам корневой папки min.js; jQuery.js.

Далее после открывающего тега <body>  вставляем блок основной навигации:

 

<div class="header"></div>
<ul id="navigation">
        <li class="home"><a href="Адрес"><span>Главная</span></a></li>
        <li class="about"><a href="Адрес"><span>WordPress</span></a></li>
        <li class="search"><a href="Адрес"><span>RSS</span></a></li>
        <li class="photos"><a href="Адрес"><span>Google+</span></a></li>
        <li class="rssfeed"><a href="Адрес"><span>You Tube</span></a></li>
        <li class="podcasts"><a href="Адрес"><span>Twitter</span></a></li>
        <li class="contact"><a href="Адрес"><span>Wikipedia</span></a></li>
</ul>

 

Тут Вы прописываете названия вкладок выпадающего меню и адреса страниц, на которые они будут отправлять посетителей по клику.

Кстати, если на Вашем сайте уже подключена библиотека  jQuery, то файл jQuery.js можно удалить и не использовать.

Осталось последнее, вставить красивые иконки.

Раздобудьте нужные вам картинки, отредактируйте и закиньте в любую папку с Вашим сайтом.  Скопируйте все адреса, откройте style.css и в ранее скопированных стилях найдите следующее:

 

ul#navigation .home a{
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");
}
ul#navigation .about a      {
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");
}
ul#navigation .search a      {
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");
}
ul#navigation .podcasts a      {
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");
}
ul#navigation .rssfeed a   {
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");
}
ul#navigation .photos a     {
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");
}
ul#navigation .contact a    {
    background-image: url("/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/wp-content/uploads/img/foto.png");

 

Здесь в скобках проставьте пути до картинок, ориентируясь по соответствующим тегам схожим с блоком в <body>.

На этом всё, горизонтально выпадающее меню готово к использованию.

 

ДЕМО

 

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

Скажите друзья, Вам понравилось выпадающее меню? С нетерпением буду ждать Ваши отзывы.

До новых статей…

 

С уважением, Денис Черников!