Как сделать выпадающее меню для сайта

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

Выпадающее меню, как правило, делают на основе списка.

Итак, как сделать выпадающий список?

Сначала, нужно этот список составить:

<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="http://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 в этом меню используется по минимуму, только для того, чтобы придать нашему меню эффект плавного выпадения, так что ссылки в нем будут отлично индексироваться поисковыми системами.

Вот и все. Как видите, ничего сложного нет :).

↓ Скачайте архив с примером выпадающего меню по ссылке ниже

Уже скачали 283 раз(а)

Открыть ↓

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Спасибо за советы, обязательно ими воспользуюсь на новом сайте, который сейчас делаю.

  2. Спасибо за отличную статью!

  3. По подробней бы, что куда вставлять! Не разобрался???

    • В чем именно вы не разобрались?

  4. Добрый день Ксана.
    Все классно, пост прелестный. Только вот одно - могли бы вы так сделать, чтобы с рассылкой на почту приходил и сам код подписчика, а то в почте постоянно его искать это не то))). Спасибо.

  5. А почему бы скрипт не заменить простейшим CSS Transform?

    • Можно заменить, а можно использовать скрипт.

      Веб разработка хороша тем, что допускает разные варианты :).

  6. Спасибо, будем тренироваться)

  7. Ксана, я делала выпадающее меню простым перетаскиванием рубрик в меню блога, так же можно и многоуровневое меню делать. По-моему с версии 3.0 это доступно для всех. У Гудвина где-то есть небольшой видеоурок как это делается. Если кому-то это облегчит жизнь, буду рада.

    • Ирина, меню можно сделать разными способами, но чтобы оно выглядело красиво, для любого меню нужно написать стили и нарисовать изображения.

      Без этого, любое меню будет выглядеть обычным списком, поэтому суть не в том, как меню создается, а в том, как привести его к нужному виду :).

  8. Скажите, а как узнать, есть ли в шаблоне jquery библиотека? И еще, не будет ли эта функция замедлять загрузку? После проблем возникших с блогами, я всего боюсь.

    • Посмотреть в тех файлах, которые я указала в посте.

      Замедлять не должна.
      Собственно, вы подключаете только небольшую функцию, а jquery библиотека, скорее всего, уже и так есть в вашем шаблоне.

  9. И еще, можно ли такое меню добавить в сайдбар?

  10. Здравствуйте!
    К сожалению я тоже не поняла, где брать код в рассылке :(

  11. Ксана, доброго времени суток!
    Не подЕлитесь: как у Вас реализовано скачивание файлов только для подписчиков?

    Очень заинтересовало, знаете ли...

    • Это самописный скрипт.

      • Благодарю за ответ.. А мастер-класс по нему не планируете? С разумными разъяснениями или только за оплату?

        • Мастер класс не планирую, поскольку там все просто и я все описала в посте.

          • Сожалею, но не нашла через поиск поста с описанием этого скрипта... Не подскажете?

          • Sorry, вы о скрипте?

            А я отвечаю о выпадающем меню :).

            О скрипте я не писала, это коммерческая разработка.

  12. Добрый день!
    Ксана, а можно уточнить для непонятливых: куда вставлять список меню и куда присоединить код для вывода меню категорий. Заранее спасибо!

    • Код для вывода меню вставить в файл header.php.

  13. Здравствуйте, Ксана!
    Спасибо за интересную информацию. У меня на сайте есть подобное меню, встроенное непосредственно в тему. Достаточно курсору попасть на вкладку и разворачивается полный список страниц. В некоторых случаях это иногда утомляет, т.к. открывшийся список закрывает собой информацию на странице. Из-за недостаточного опыта, я пока не нашел способа как это изменить.
    Буду очень признателен за совет. Спасибо.

    • У вас, по видимому, меню реагирует на :hover.

      Найдите в шаблоне скрипт, который отвечает за работу меню и замените в нем hover на click.

      • Спасибо! Попытаюсь воспользоваться Вашим советом.

  14. Ксана, очень полезная информация! А это возможно сделать в вашей теме baby?

    • Технически можно.
      Но в этой теме другое меню, ему будет некуда выпадать :).

  15. Хочу изменить стилистику моего сайта. Начну с меню пожалуй

  16. крутяк !

  17. Здравствуйте, у меня не получается подписаться на рассылку по почте, вылезает ошибка (((

  18. К сожалению, не получается... (((

    или вот это вылезает:

    3d3f ��}kwǑ�g��c�r��<�D��o|n�ulg}��9<��9"��g�(���#��묕�ٳ9y�Iv��~ .............

    или 404 ошибка...

    http://prodengiblog.ru/kurs - я изначально на правильную страницу попадаю? )))

    • я попробовал разные браузеры, на стационарном компе и ноуте, ничего не вышло.

      • Вот страница для подписки - http://prodengiblog.ru/sub

  19. Подписался)))

    Но в сайтбаре иконка почты точно куда-то не туда ведёт...

  20. как самой сделать тему с памятными фото?

  21. Не скачивается архив с примером. "Загружаемый файл отстутствует на сервере"

  22. у меня сайт на wordpress. Делаю это со списком рубрик. При обновлении страници меню находится в развернутом состоянии нужно что бы изначально в свернутом. Это как дописать?

    • Самый простой способ - это добавить параметр display: none; к меню
      + скрипт, который будет ваше меню разворачивать.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349