Как сделать улётное горизонтально выпадающее меню?
Доброго времени суток всем читателям – 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>.
На этом всё, горизонтально выпадающее меню готово к использованию.
Всем кому понравилась статья предлагаю подписаться на обновления, для получения уведомлений о выходе нового материала.
Скажите друзья, Вам понравилось выпадающее меню? С нетерпением буду ждать Ваши отзывы.
До новых статей…
С уважением, Денис Черников!