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


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


Выпадающее менюДоброго времени суток всем читателям – 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="http://Путь к файлу/jQuery.js"></script>
<script type="text/javascript" src="http://Путь к файлу/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("/img/foto.png");
}
ul#navigation .about a      {
    background-image: url("/img/foto.png");
}
ul#navigation .search a      {
    background-image: url("/img/foto.png");
}
ul#navigation .podcasts a      {
    background-image: url("/img/foto.png");
}
ul#navigation .rssfeed a   {
    background-image: url("/img/foto.png");
}
ul#navigation .photos a     {
    background-image: url("/img/foto.png");
}
ul#navigation .contact a    {
    background-image: url("/img/foto.png");

 

Здесь в скобках проставьте пути до картинок, ориентируясь по соответствующим тегам схожим с блоком в <body>.

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

 

 

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

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




67 комментариевА что думаете Вы?

  1. Александр Красильный

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Александр Красильный ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Константин ответил:

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

    [Ответить]

  2. Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Ирина

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

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

    [Ответить]

    Денис Черников ответил:

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

    Спасибо за новогодние пожелания. Вам тоже счастья, добра и удачного продвижения Ваших проектов!

    На счёт ошибки с ссылкой, это всё RSS лента, где-то у Вас с ней проблемы!

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

    [Ответить]

  4. Раиса

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Раиса!

    Огромное спасибо за поздравления!

    От себя и всех читателей желаю Вам счастья в Новом Году и успехов в продвижении!

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

    [Ответить]

  5. Алексей Виноградов

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Олег

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Константин ответил:

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

    [Ответить]

    Сергей ответил:

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

    [Ответить]

  7. Даниил

    Спасибо за ценную информацию!

    То что хорошо это без плагинов)

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Даниил!

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

    [Ответить]

  8. Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Александр Красильный

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Сергей ответил:

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

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

    а сделать не слабо, вопрос во времени...

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

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Сергей

    вот мой вариант на 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»);

    [Ответить]

  12. Сергей

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

    пользуйтесь на здоровье!!!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Сергей ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    Сейчас уже разобрался!

    [Ответить]

  13. Сергей

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

    ах да, у тебя див закрыть надо на класс хедер не сразу после открытия дива, а в конце кода, так:

    < a href="адрес" rel="nofollow">Главная< /a>

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Сергей ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  14. Сергей

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

    [Ответить]

  15. Сергей

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

    буду благодарен очень сильно!!!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  16. Сергей

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

    я говорю про добавление кнопок как на сервисе однакнопка или как у яндекса скрипт...

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  17. Gosha_trade

    Красота!!! Среди бегущих первых нет и отстающих...

    Вспомнилась фраза Владимира Семеновича (сегодня у него кстати день рождения).

    Ден, чем мне нравятся твои статьи — так это тем, что они конкретно прикладные.

    СПС за очередну...

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Gosha_trade!

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

    [Ответить]

  18. Diaz

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Diaz ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  19. Diaz

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  20. Алексей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  21. Юлиана

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

    С уважением, Юлиана

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  22. Сергей

    Спасибо!

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!

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

    [Ответить]

    Сергей ответил:

    могли б вы мне сбросить инструкции на мейл?

    буду признателен

    80674384849@ukr.net

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  23. VADIM

    Добрый день, меню почему то получилось, так как будто оно

    сразу выпало. Что это может быть?

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  24. Надежда

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  25. Ольга

    Здравствуйте, Денис!

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Ольга!

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

    [Ответить]

  26. Lol

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  27. Lol

    Эм, я вроде писал к статье об «Admin bar»... наверно как то ошибся...

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх