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

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

Доброго времени суток всем читателям – 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> .

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

ДЕМО

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

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

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

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