Владельцы сайтов, содержащих множество категорий и подкатегорий, страниц и подстраниц, наверняка знают, что выпадающее меню это очень удобно, поскольку оно позволяет собрать в меню ссылки на все важные разделы сайта.
Выпадающее меню, как правило, делают на основе списка.
Итак, как сделать выпадающий список?
Сначала, нужно этот список составить:
<ul id="top_menu"> <li><a href="">Главная</a></li> <li><a href="">О сайте </a> <ul class="children"> <li><a href="">Страница 1</a></li> <li><a href="">Страница 2 </a></li> <li><a href="">Страница 3</a></li> </ul> </li> <li><a href="">Карта сайта</a></li> <li><a href="">Контакты</a></li> <li><a href="">Форум</a></li> </ul> |
В случае, если ваш сайт работает на wordpress, вывести меню категорий можно так:
<ul id="top_menu">
<?php wp_list_categories('title_li='); ?>
</ul> |
Меню страниц, так:
<ul id="top_menu">
<?php wp_list_pages('title_li='); ?>
</ul> |
Теперь стили, для придания красоты нашему меню:
Файл стилей вы можете скачать по ссылке в конце поста и закинуть его в папку с темой.
Подключить файл стилей нужно в header.php следующим образом:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/top_menu.css" type="text/css" media="screen" /> |
Нам потребуются, также, изображения:
для самого меню и для создания hover-эффекта.
Их, тоже, можно найти в архиве по ссылке ниже и положить в папку images вашей темы.
Чтобы меню выпадало плавно, добавим немного js:
Сначала подключаем jquery библиотеку в файл header.php:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> |
Прежде, чем подключить библиотеку, посмотрите файлы header.php и footer.php вашей wordpress темы — возможно jquery библиотека в ней уже подключена.
И функцию для плавного выпадения меню в тот же файл:
<script type="text/javascript"> // menu $(document).ready(function(){ $('#top_menu li').hover( function() { $(this).addClass("active"); $(this).find('ul').stop(true, true); $(this).find('ul').slideDown(); }, function() { $(this).removeClass("active"); $(this).find('ul').slideUp('fast'); } ); }); </script> |
JS в этом меню используется по минимуму, только для того, чтобы придать нашему меню эффект плавного выпадения, так что ссылки в нем будут отлично индексироваться поисковыми системами.
Вот и все. Как видите, ничего сложного нет :).
Спасибо за советы, обязательно ими воспользуюсь на новом сайте, который сейчас делаю.
Спасибо за отличную статью!
По подробней бы, что куда вставлять! Не разобрался???
В чем именно вы не разобрались?
Добрый день Ксана.
Все классно, пост прелестный. Только вот одно - могли бы вы так сделать, чтобы с рассылкой на почту приходил и сам код подписчика, а то в почте постоянно его искать это не то))). Спасибо.
Сделаю.
А почему бы скрипт не заменить простейшим CSS Transform?
Можно заменить, а можно использовать скрипт.
Веб разработка хороша тем, что допускает разные варианты :).
Спасибо, будем тренироваться)
Ксана, я делала выпадающее меню простым перетаскиванием рубрик в меню блога, так же можно и многоуровневое меню делать. По-моему с версии 3.0 это доступно для всех. У Гудвина где-то есть небольшой видеоурок как это делается. Если кому-то это облегчит жизнь, буду рада.
Ирина, меню можно сделать разными способами, но чтобы оно выглядело красиво, для любого меню нужно написать стили и нарисовать изображения.
Без этого, любое меню будет выглядеть обычным списком, поэтому суть не в том, как меню создается, а в том, как привести его к нужному виду :).
Скажите, а как узнать, есть ли в шаблоне jquery библиотека? И еще, не будет ли эта функция замедлять загрузку? После проблем возникших с блогами, я всего боюсь.
Посмотреть в тех файлах, которые я указала в посте.
Замедлять не должна.
Собственно, вы подключаете только небольшую функцию, а jquery библиотека, скорее всего, уже и так есть в вашем шаблоне.
И еще, можно ли такое меню добавить в сайдбар?
Можно, только зачем?
Здравствуйте!
К сожалению я тоже не поняла, где брать код в рассылке 🙁
Ксана, доброго времени суток!
Не подЕлитесь: как у Вас реализовано скачивание файлов только для подписчиков?
Очень заинтересовало, знаете ли...
Это самописный скрипт.
Благодарю за ответ.. А мастер-класс по нему не планируете? С разумными разъяснениями или только за оплату?
Мастер класс не планирую, поскольку там все просто и я все описала в посте.
Сожалею, но не нашла через поиск поста с описанием этого скрипта... Не подскажете?
Sorry, вы о скрипте?
А я отвечаю о выпадающем меню :).
О скрипте я не писала, это коммерческая разработка.
Добрый день!
Ксана, а можно уточнить для непонятливых: куда вставлять список меню и куда присоединить код для вывода меню категорий. Заранее спасибо!
Код для вывода меню вставить в файл header.php.
Здравствуйте, Ксана!
Спасибо за интересную информацию. У меня на сайте есть подобное меню, встроенное непосредственно в тему. Достаточно курсору попасть на вкладку и разворачивается полный список страниц. В некоторых случаях это иногда утомляет, т.к. открывшийся список закрывает собой информацию на странице. Из-за недостаточного опыта, я пока не нашел способа как это изменить.
Буду очень признателен за совет. Спасибо.
У вас, по видимому, меню реагирует на :hover.
Найдите в шаблоне скрипт, который отвечает за работу меню и замените в нем hover на click.
Спасибо! Попытаюсь воспользоваться Вашим советом.
Ксана, очень полезная информация! А это возможно сделать в вашей теме baby?
Технически можно.
Но в этой теме другое меню, ему будет некуда выпадать :).
Хочу изменить стилистику моего сайта. Начну с меню пожалуй
крутяк !
Здравствуйте, у меня не получается подписаться на рассылку по почте, вылезает ошибка (((
Попробуйте еще раз.
К сожалению, не получается... (((
или вот это вылезает:
3d3f ��}kwǑ�g��c�r��<�D��o|n�ulg}��9<��9"��g�(���#��묕�ٳ9y�Iv��~ .............
или 404 ошибка...
http://prodengiblog.ru/kurs - я изначально на правильную страницу попадаю? )))
я попробовал разные браузеры, на стационарном компе и ноуте, ничего не вышло.
Вот страница для подписки - http://prodengiblog.ru/sub
Подписался)))
Но в сайтбаре иконка почты точно куда-то не туда ведёт...
как самой сделать тему с памятными фото?
Не скачивается архив с примером. "Загружаемый файл отстутствует на сервере"
Попробуйте еще раз.
у меня сайт на wordpress. Делаю это со списком рубрик. При обновлении страници меню находится в развернутом состоянии нужно что бы изначально в свернутом. Это как дописать?
Самый простой способ - это добавить параметр display: none; к меню
+ скрипт, который будет ваше меню разворачивать.