Sozdaiblog.ru
Назад

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

Опубликовано: 28.12.2012
Время на чтение: 12 мин
67
7

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

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

 

ДЕМО

 

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

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

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

 

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

Поделиться
Похожие записи
Комментарии:
  • Александр Красильный
    Опубликовано: 28.12.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.12.2012 Ответить на сообщение

      Нет Александр, такого я не слышал.

      • Александр Красильный
        Опубликовано: 28.12.2012 Ответить на сообщение

        Вижу начал монетизировать свой блог? Как успехи с контекстной рекламой от Яндекса?

        • Денис Черников
          Опубликовано: 28.12.2012 Ответить на сообщение

          Да, есть немножко! Пока всё в режиме тестирования и настройки! Доходов пока нет, так как всё не стабильно. По этому поводу будет отдельный пост со всеми вытекающими!

          • Константин
            Опубликовано: 28.12.2012 Ответить на сообщение

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

  • Сергей
    Опубликовано: 28.12.2012 Ответить на сообщение

    я такое меню много где видел, красиво смотрится.

    • Денис Черников
      Опубликовано: 28.12.2012 Ответить на сообщение

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

  • Ирина
    Опубликовано: 28.12.2012 Ответить на сообщение

    Денис! Ты в очередной раз открыл для меня тайну. Мне это было интересно, а теперь я еще буду знать, как сделать! Благодарю! Поздравляю с наступающим Новым годом. Пусть в новом году у будут и желания и возможности для успешного продолжения творческого и эффективного развития твоего блога.
    Т.к. почему-то разместить ссылку на твоем блоге у меня не получается (выдает ошибку)Прикладываю обычно (с опасением, что мое сообщение попадет в спам), и просьбой сделать для меня доброе дело (которое неприменно, умножившись, добром вернется) — проголосовать за мой видео мастер класс «Снегирь»

    • Денис Черников
      Опубликовано: 28.12.2012 Ответить на сообщение

      Здравствуйте, Ирина! Стараюсь постоянно радовать всех своих читателей новыми фишками и идеями! В новом году их будет ещё больше!
      Спасибо за новогодние пожелания. Вам тоже счастья, добра и удачного продвижения Ваших проектов!
      На счёт ошибки с ссылкой, это всё RSS лента, где-то у Вас с ней проблемы!
      Видео обязательно посмотрю, когда домой с работы приду, а то у нас ограничения по трафику!

  • Раиса
    Опубликовано: 28.12.2012 Ответить на сообщение

    Здраствуйте, Денис! Поздравляю вас с наступающим Новым Годом, желаю дальнейших успехов в ваших добрых намерениях и помощи нам, в усвоении полезных уроках, в которые вы вкладываете свою душу. А мы и дальше будем заходить и перенимать ваш опыт и обязательно задавать вопросы. Вот кстати, мой вопрос: по какой причине не возможно подключится к серверу программой ftp-клиента, которая мне крайне необходима исключая отсутствия интернета? С уважением, Раиса.

    • Денис Черников
      Опубликовано: 28.12.2012 Ответить на сообщение

      Здравствуйте, Раиса!
      Огромное спасибо за поздравления!
      От себя и всех читателей желаю Вам счастья в Новом Году и успехов в продвижении!
      Ну без интернета Вы не подключитесь к ftp, а частая ошибка из-за которой нет подключения, это то что многие забывают включить на своём сервере разрешение на подключение. У меня там даже кнопка такая стоит! Если не поможет, то скорее всего пароль и логин не верны. Других вариантов нет, максимум порт не тот, но во многих случаях он даже не нужен. На крайний случай в службу поддержки стукните!

  • Алексей Виноградов
    Опубликовано: 28.12.2012 Ответить на сообщение

    Горизонтальное меню действительно улётное! прям вылетает неплохо было бы себе поставить, интересно, будет ли тема капризничать

    • Денис Черников
      Опубликовано: 28.12.2012 Ответить на сообщение

      Попробуйте, Алексей! Всё подробно расписано, Вы без труда справитесь. Тема конфликтовать не должна.

  • Олег
    Опубликовано: 28.12.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.12.2012 Ответить на сообщение

      Когда Seo нас покинет, как раз и останется то, что нравится посетителям.

      • Константин
        Опубликовано: 29.12.2012 Ответить на сообщение

        Олег, а разве это меню не включает в себя текст? Его просто дополнительно украсили с помощью CSS.

        • Сергей
          Опубликовано: 29.12.2012 Ответить на сообщение

          полностью согласен!!!

  • Даниил
    Опубликовано: 01.01.2013 Ответить на сообщение

    Спасибо за ценную информацию!
    То что хорошо это без плагинов)

    • Денис Черников
      Опубликовано: 01.01.2013 Ответить на сообщение

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

  • Сергей
    Опубликовано: 05.01.2013 Ответить на сообщение

    а на чистом css слабо? у меня мутулс конфликтует с jqwery, можно же на ксс с помощью transition, transform, c отрицательным margin, hover эффектом?

    • Денис Черников
      Опубликовано: 05.01.2013 Ответить на сообщение

      Если Вам нужно, возьмите и сделайте. Или Вам самому слабо? Подгонять под каждый сайт в Интернете я не в состоянии!

  • Александр Красильный
    Опубликовано: 05.01.2013 Ответить на сообщение

    И тут вспоминается высказывание Сергея Барышников: «Блоггер не 100 долларов, чтобы нравится каждому!» =)

    • Денис Черников
      Опубликовано: 05.01.2013 Ответить на сообщение

      Вот это самая верная мысль!

      • Сергей
        Опубликовано: 05.01.2013 Ответить на сообщение

        при чем тут «нравится блоггер»? к автору блога я никаких претензий... Малодчик, выложил и разжевал как сделать прикольное меню!!!
        работаю над дизом нового сайта, там хотел менюшку наподобие, шаблон на фреймворке, движек джумла, в мегаменю используется мутулз, и в вкладке вход/регистрация тоже. шаблон основан на том же что и сайт подписи, только который в подписи можно сказать что без диза, а просто с элементаами оформления, в тихом минимализме сделан, а новый будет с хорошей продуманной графикой и сменой тем в каждом разделе, и все это в одном шаблоне... поэтому то и хотелось готовый вариент, чтоб допилить его напильником=)
        а сделать не слабо, вопрос во времени...
        если что потом скину свой вариант, только ориентирован он будет на мой фреймворк... на вордпресс подвязать егго можно будет тоже...
        так что не надо сразу негативом и скрытой агрессией плеваться в сторону бродяги=)

        • Денис Черников
          Опубликовано: 05.01.2013 Ответить на сообщение

          У Вас нет времени самому сделать, а тут что думаете просто так в бирюльки все играют. И ни кто на Вас не гонит, просто нужно было спросить, есть возможность или нет, а не ловить людей на СЛАБО! Тут никому не слабо, весь затык во времени.

  • Сергей
    Опубликовано: 05.01.2013 Ответить на сообщение

    понятно... на этой не совсем хорошей ноте расстаюсь с вами... удачи вам в ведении блога...

    • Денис Черников
      Опубликовано: 06.01.2013 Ответить на сообщение

      Да не заморачивайся, заходи, тут всем рады!

  • Сергей
    Опубликовано: 06.01.2013 Ответить на сообщение

    вот мой вариант на css, после боди те же строки, на скрипты ссылки не надо, остальное также «допиливается»:
    ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
    }
    ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
    }
    ul#navigation li a {
    display: block;
    float:left;
    margin-top: -80px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    border-radius:0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha (opacity=70);
    transition: all 1.0s ease 0s;
    -moz-transition: all 1.0s ease 0s;
    -webkit-transition: all 1.0s ease 0s;
    -o-transition: all 1.0s ease 0s;
    }
    ul#navigation li a:hover{
    background-color:#ffffff;
    margin-top: -2px;
    }
    ul#navigation li a span{
    font-family: Helvetica;
    letter-spacing:1px;
    font-size: 15px;
    font-weight:bold;
    color:#000;
    text-shadow: 0 -1px 1px #fff;
    }
    ul#navigation .home a{
    background-image: url («.../images/top.png»);
    }
    ul#navigation .about a {
    background-image: url («.../images/top.png»);
    }
    ul#navigation .search a {
    background-image: url («.../images/top.png»);
    }
    ul#navigation .podcasts a {
    background-image: url («.../images/top.png»);
    }
    ul#navigation .rssfeed a {
    background-image: url («.../images/top.png»);
    }
    ul#navigation .photos a {
    background-image: url («.../images/top.png»);
    }
    ul#navigation .contact a {
    background-image: url («.../images/top.png»);

  • Сергей
    Опубликовано: 06.01.2013 Ответить на сообщение

    нагрузка меньше на серв за счет того что не используются скрипты =)
    пользуйтесь на здоровье!!!

    • Денис Черников
      Опубликовано: 06.01.2013 Ответить на сообщение

      Хорошо, Сергей! Кому потребуется, обязательно спасибо скажет!

      • Сергей
        Опубликовано: 06.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 07.01.2013 Ответить на сообщение

          Да тут из-за плагина который ссылки разрешает оставлять не проходит хак с преобразованием ссылок в текст для комментариев, он гад их вырубает. Поэтому, блок удалил!((((
          Сейчас уже разобрался!

  • Сергей
    Опубликовано: 06.01.2013 Ответить на сообщение

    у меня на локале, на джумле норм робит, сделай тестовую страницу как ты делал в своем варианте, посмотрим как это работать будет в вп, в принцыпе должно все норм быть, тут тупо хтмл и ксс.
    ах да, у тебя див закрыть надо на класс хедер не сразу после открытия дива, а в конце кода, так:
    < a href="адрес" rel="nofollow">Главная< /a>
    так будет правильнее намного, получается что менюха будет в отдельном блоке, в верстке дивами это правильнее будет...

    • Денис Черников
      Опубликовано: 07.01.2013 Ответить на сообщение

      Я понял, Сергей. Пока не буду проводить эксперименты,тут другие новшества есть! Два дня уже ни как не допилю!

      • Сергей
        Опубликовано: 07.01.2013 Ответить на сообщение

        блин, зачем ты скрипты используешь? там тоже можно сделать на ксс

        • Денис Черников
          Опубликовано: 07.01.2013 Ответить на сообщение

          Мне так удобней, да и разницы в нагрузке особой нет, а вот css будет как портянка!

  • Сергей
    Опубликовано: 06.01.2013 Ответить на сообщение

    вот блин... код не ставится в комменты...

  • Сергей
    Опубликовано: 07.01.2013 Ответить на сообщение

    Денис, а не можешь на эти кнопки поставить соцзакладки яндекса например? чтото не соображу как, на яндексе почитал но не «вкурил» нифига...
    буду благодарен очень сильно!!!

    • Денис Черников
      Опубликовано: 07.01.2013 Ответить на сообщение

      Просто ссылку вставь от социалки и всё!

  • Сергей
    Опубликовано: 08.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 08.01.2013 Ответить на сообщение

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

  • Gosha_trade
    Опубликовано: 26.01.2013 Ответить на сообщение

    Красота!!! Среди бегущих первых нет и отстающих...
    Вспомнилась фраза Владимира Семеновича (сегодня у него кстати день рождения).
    Ден, чем мне нравятся твои статьи — так это тем, что они конкретно прикладные.
    СПС за очередну...

    • Денис Черников
      Опубликовано: 26.01.2013 Ответить на сообщение

      Пожалуйста, Gosha_trade!
      Жаль, что Владимира Семеновича не получится поздравить!

  • Diaz
    Опубликовано: 27.01.2013 Ответить на сообщение

    Здравствуйте Денис, я Вам вчера написал комментарий с вопросом по поводу файла .htaccess, хотелось узнать еще одну вещь, как Вы знаете при создание сайта на вордпресс справа появляются такие записи как «Свежие записи», «Свежие комментарии», «Архивы», «Рубрики», как можно их убрать? и как вместо них поставить что нибудь полезное, посоветуйте пожалуйста? Заранее спасибо.

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

      Я уже на почте Вам ответил1

      • Diaz
        Опубликовано: 27.01.2013 Ответить на сообщение

        Письмо от Вас не пришло ...

        • Денис Черников
          Опубликовано: 27.01.2013 Ответить на сообщение

          Всё это убирается в файле sidebar.php, Вашей активной темы оформления.

  • Diaz
    Опубликовано: 27.01.2013 Ответить на сообщение

    Денис, извините я новичок, а что нужно убрать в файле sidebar.php, я пытался там что то удалить, но так и не получил нужного результата, попробовал удалить файл sidebar.php, так все записи «Свежие записи», «Свежие комментарии», «Архивы», «Рубрики», появились в самом низу страницы, я вернул все обратно. Как мне сделать так что бы эти ссылки ушли со страницы, и как можно на их место вставить что то другое?

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

      Вывод всех этих ссылок редактируется именно в этом файле, плюс в панели администратора, раздел «Виджеты».

  • Алексей
    Опубликовано: 29.01.2013 Ответить на сообщение

    Здравствуйте. Мне очень понравилось это меню, но у меня при установке вылетает одна из дух колонок и пропадает сайд бар. Всё это происходит после добавления кода в header.php. Были ещё такие у кого случаи. Может не каждая тема подходит для этого меню?

    • Денис Черников
      Опубликовано: 29.01.2013 Ответить на сообщение

      Привет! Пока таких проблем ни у кого не было. Может, что-то упустили!

  • Юлиана
    Опубликовано: 11.02.2013 Ответить на сообщение

    Полезный блог у Вас, Денис! Добавила в закладки себе. Буду заходить чаще. Понравилось то, как Вы сделали «лучших комментаторов блога». У Вас об этом есть статья? Было бы интересно прочесть.
    С уважением, Юлиана

    • Денис Черников
      Опубликовано: 11.02.2013 Ответить на сообщение

      Спасибо, Юлиана! Да, статья про топ-комментаторов есть!

  • Сергей
    Опубликовано: 19.03.2013 Ответить на сообщение

    Спасибо!
    а как сделать вертикальное меню?

    • Денис Черников
      Опубликовано: 19.03.2013 Ответить на сообщение

      Пожалуйста!
      Здесь в двух словах не опишешь!

      • Сергей
        Опубликовано: 19.03.2013 Ответить на сообщение

        могли б вы мне сбросить инструкции на мейл?
        буду признателен
        80674384849@ukr.net

        • Денис Черников
          Опубликовано: 19.03.2013 Ответить на сообщение

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

  • VADIM
    Опубликовано: 19.03.2013 Ответить на сообщение

    Добрый день, меню почему то получилось, так как будто оно
    сразу выпало. Что это может быть?

    • Денис Черников
      Опубликовано: 19.03.2013 Ответить на сообщение

      Похожая ситуация! Скорее всего Вы не установили библиотеку джейквери.

  • Надежда
    Опубликовано: 25.11.2013 Ответить на сообщение

    Очень понравилась идея с выпадающим меню. Завтра попробую реализовать на своем сайте. Спасибо за подробные и понятные статьи!

    • Денис Черников
      Опубликовано: 25.11.2013 Ответить на сообщение

      Пожалуйста! Рад что Вам так понравилось!

  • Ольга
    Опубликовано: 12.02.2014 Ответить на сообщение

    Здравствуйте, Денис!
    Пробовала установить и на стандартной теме вордпресс и нестандартной. Меню ставится,все хорошо. Но оно ставится выпавшем уже. JQuery есть, так как пробовала установить снегна обе темы. Снег работает. В чем может быть причина, что меню уже выпавшее? Где искать? Спасибо.

    • Денис Черников
      Опубликовано: 12.02.2014 Ответить на сообщение

      Здравствуйте, Ольга!
      Я не знаю в чём причина Вашей проблемы так как не вижу и не знаю всех Ваших действий!

  • Lol
    Опубликовано: 02.08.2014 Ответить на сообщение

    А как вставить к примеру в любое место шаблона (сайта) ту часть кода, где имя «Привет, user» и поиск. Это то что спарва только. Я не пойму где он.

    • Денис Черников
      Опубликовано: 02.08.2014 Ответить на сообщение

      Не совсем понял о чём Вы!?

  • Lol
    Опубликовано: 02.08.2014 Ответить на сообщение

    Эм, я вроде писал к статье об «Admin bar»... наверно как то ошибся...
    Я об админовском баре вверху сайта, черная полоска. Справа поиск, «привет, Admin» и лого пользователя. Вот конкретно эту часть админовского бара как вырезать и вставить в любое место сайта? я конкретно код не могу найти.

    • Денис Черников
      Опубликовано: 02.08.2014 Ответить на сообщение

      Я где-то в блоге писал, как вставлять свои ссылки в бар, ну и там манипулировать ими! Честно это было давно, но решение есть, просто сейчас уже не вспомню!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.