Доброго времени суток всем читателям – 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>.
На этом всё, горизонтально выпадающее меню готово к использованию.
Всем кому понравилась статья предлагаю подписаться на обновления, для получения уведомлений о выходе нового материала.
Скажите друзья, Вам понравилось выпадающее меню? С нетерпением буду ждать Ваши отзывы.
До новых статей…
С уважением, Денис Черников!
- Кто такой дилер в торговле простыми словами
- Дебиторка что это простыми словами
-
Значение мобильной оптимизации для сайта на WordPress
- Франшиза что это такое простыми словами в торговле бизнесе
-
Как выбрать хостинг и домен для сайта?
- Сторителлинг это простыми словами
-
Как выбрать Тематику сайта и не оказаться в Ж...ПЕ?
- Издержки это в экономике простыми словами
-
Как эффективно вести корпоративный блог?
-
Как составить семантическое ядро?
Крутая менюшка получается и ее большой плюс в том, что сделана она без использования плагинов. Вот только я где то читал, что подобные меню стоит дублировать обычными ссылка в футере для правильной индексации. Так это или я не прав?
Нет Александр, такого я не слышал.
Вижу начал монетизировать свой блог? Как успехи с контекстной рекламой от Яндекса?
Да, есть немножко! Пока всё в режиме тестирования и настройки! Доходов пока нет, так как всё не стабильно. По этому поводу будет отдельный пост со всеми вытекающими!
Александр, ссылки меню надо дублировать, если оно сделано целиком из картинок. В примере используется бэкграунды для ссылок, по этому дублирование не нужно.
я такое меню много где видел, красиво смотрится.
Да, оно красиво выглядит и очень удобно в использовании!
Денис! Ты в очередной раз открыл для меня тайну. Мне это было интересно, а теперь я еще буду знать, как сделать! Благодарю! Поздравляю с наступающим Новым годом. Пусть в новом году у будут и желания и возможности для успешного продолжения творческого и эффективного развития твоего блога.
Т.к. почему-то разместить ссылку на твоем блоге у меня не получается (выдает ошибку)Прикладываю обычно (с опасением, что мое сообщение попадет в спам), и просьбой сделать для меня доброе дело (которое неприменно, умножившись, добром вернется) — проголосовать за мой видео мастер класс «Снегирь»
Здравствуйте, Ирина! Стараюсь постоянно радовать всех своих читателей новыми фишками и идеями! В новом году их будет ещё больше!
Спасибо за новогодние пожелания. Вам тоже счастья, добра и удачного продвижения Ваших проектов!
На счёт ошибки с ссылкой, это всё RSS лента, где-то у Вас с ней проблемы!
Видео обязательно посмотрю, когда домой с работы приду, а то у нас ограничения по трафику!
Здраствуйте, Денис! Поздравляю вас с наступающим Новым Годом, желаю дальнейших успехов в ваших добрых намерениях и помощи нам, в усвоении полезных уроках, в которые вы вкладываете свою душу. А мы и дальше будем заходить и перенимать ваш опыт и обязательно задавать вопросы. Вот кстати, мой вопрос: по какой причине не возможно подключится к серверу программой ftp-клиента, которая мне крайне необходима исключая отсутствия интернета? С уважением, Раиса.
Здравствуйте, Раиса!
Огромное спасибо за поздравления!
От себя и всех читателей желаю Вам счастья в Новом Году и успехов в продвижении!
Ну без интернета Вы не подключитесь к ftp, а частая ошибка из-за которой нет подключения, это то что многие забывают включить на своём сервере разрешение на подключение. У меня там даже кнопка такая стоит! Если не поможет, то скорее всего пароль и логин не верны. Других вариантов нет, максимум порт не тот, но во многих случаях он даже не нужен. На крайний случай в службу поддержки стукните!
Горизонтальное меню действительно улётное! прям вылетает неплохо было бы себе поставить, интересно, будет ли тема капризничать
Попробуйте, Алексей! Всё подробно расписано, Вы без труда справитесь. Тема конфликтовать не должна.
Действительно выглядит красиво, но текстовое меню для оптимизации лучше. А посетителям конечно это понравится.
Когда Seo нас покинет, как раз и останется то, что нравится посетителям.
Олег, а разве это меню не включает в себя текст? Его просто дополнительно украсили с помощью CSS.
полностью согласен!!!
Спасибо за ценную информацию!
То что хорошо это без плагинов)
Пожалуйста, Даниил!
По возможности стараюсь удалять все плагины и заменять их кодом.
а на чистом css слабо? у меня мутулс конфликтует с jqwery, можно же на ксс с помощью transition, transform, c отрицательным margin, hover эффектом?
Если Вам нужно, возьмите и сделайте. Или Вам самому слабо? Подгонять под каждый сайт в Интернете я не в состоянии!
И тут вспоминается высказывание Сергея Барышников: «Блоггер не 100 долларов, чтобы нравится каждому!» =)
Вот это самая верная мысль!
при чем тут «нравится блоггер»? к автору блога я никаких претензий… Малодчик, выложил и разжевал как сделать прикольное меню!!!
работаю над дизом нового сайта, там хотел менюшку наподобие, шаблон на фреймворке, движек джумла, в мегаменю используется мутулз, и в вкладке вход/регистрация тоже. шаблон основан на том же что и сайт подписи, только который в подписи можно сказать что без диза, а просто с элементаами оформления, в тихом минимализме сделан, а новый будет с хорошей продуманной графикой и сменой тем в каждом разделе, и все это в одном шаблоне… поэтому то и хотелось готовый вариент, чтоб допилить его напильником=)
а сделать не слабо, вопрос во времени…
если что потом скину свой вариант, только ориентирован он будет на мой фреймворк… на вордпресс подвязать егго можно будет тоже…
так что не надо сразу негативом и скрытой агрессией плеваться в сторону бродяги=)
У Вас нет времени самому сделать, а тут что думаете просто так в бирюльки все играют. И ни кто на Вас не гонит, просто нужно было спросить, есть возможность или нет, а не ловить людей на СЛАБО! Тут никому не слабо, весь затык во времени.
понятно… на этой не совсем хорошей ноте расстаюсь с вами… удачи вам в ведении блога…
Да не заморачивайся, заходи, тут всем рады!
вот мой вариант на 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»);
нагрузка меньше на серв за счет того что не используются скрипты =)
пользуйтесь на здоровье!!!
Хорошо, Сергей! Кому потребуется, обязательно спасибо скажет!
Денис, апни статью, добавь туда вариант на ксс, думаю без скриптов нагрузка намного меньше будет, сайт шустрее грузится чем меньше скриптов, всегда стараюсь сначала на ксс сделать, если не получается то использую скрипты…
Да тут из-за плагина который ссылки разрешает оставлять не проходит хак с преобразованием ссылок в текст для комментариев, он гад их вырубает. Поэтому, блок удалил!((((
Сейчас уже разобрался!
у меня на локале, на джумле норм робит, сделай тестовую страницу как ты делал в своем варианте, посмотрим как это работать будет в вп, в принцыпе должно все норм быть, тут тупо хтмл и ксс.
ах да, у тебя див закрыть надо на класс хедер не сразу после открытия дива, а в конце кода, так:
< a href="адрес" rel="nofollow">Главная< /a>
так будет правильнее намного, получается что менюха будет в отдельном блоке, в верстке дивами это правильнее будет…
Я понял, Сергей. Пока не буду проводить эксперименты,тут другие новшества есть! Два дня уже ни как не допилю!
блин, зачем ты скрипты используешь? там тоже можно сделать на ксс
Мне так удобней, да и разницы в нагрузке особой нет, а вот css будет как портянка!
вот блин… код не ставится в комменты…
Денис, а не можешь на эти кнопки поставить соцзакладки яндекса например? чтото не соображу как, на яндексе почитал но не «вкурил» нифига…
буду благодарен очень сильно!!!
Просто ссылку вставь от социалки и всё!
тогда не будет автоматичеки подгружаться адрес страницы и т.д.
я говорю про добавление кнопок как на сервисе однакнопка или как у яндекса скрипт…
Сергей, Вам зачем это нужно? Сделать можно но ковыряться пока нет времени и особого желания. Праздники на дворе.
Красота!!! Среди бегущих первых нет и отстающих…
Вспомнилась фраза Владимира Семеновича (сегодня у него кстати день рождения).
Ден, чем мне нравятся твои статьи — так это тем, что они конкретно прикладные.
СПС за очередну…
Пожалуйста, Gosha_trade!
Жаль, что Владимира Семеновича не получится поздравить!
Здравствуйте Денис, я Вам вчера написал комментарий с вопросом по поводу файла .htaccess, хотелось узнать еще одну вещь, как Вы знаете при создание сайта на вордпресс справа появляются такие записи как «Свежие записи», «Свежие комментарии», «Архивы», «Рубрики», как можно их убрать? и как вместо них поставить что нибудь полезное, посоветуйте пожалуйста? Заранее спасибо.
Я уже на почте Вам ответил1
Письмо от Вас не пришло …
Всё это убирается в файле sidebar.php, Вашей активной темы оформления.
Денис, извините я новичок, а что нужно убрать в файле sidebar.php, я пытался там что то удалить, но так и не получил нужного результата, попробовал удалить файл sidebar.php, так все записи «Свежие записи», «Свежие комментарии», «Архивы», «Рубрики», появились в самом низу страницы, я вернул все обратно. Как мне сделать так что бы эти ссылки ушли со страницы, и как можно на их место вставить что то другое?
Вывод всех этих ссылок редактируется именно в этом файле, плюс в панели администратора, раздел «Виджеты».
Здравствуйте. Мне очень понравилось это меню, но у меня при установке вылетает одна из дух колонок и пропадает сайд бар. Всё это происходит после добавления кода в header.php. Были ещё такие у кого случаи. Может не каждая тема подходит для этого меню?
Привет! Пока таких проблем ни у кого не было. Может, что-то упустили!
Полезный блог у Вас, Денис! Добавила в закладки себе. Буду заходить чаще. Понравилось то, как Вы сделали «лучших комментаторов блога». У Вас об этом есть статья? Было бы интересно прочесть.
С уважением, Юлиана
Спасибо, Юлиана! Да, статья про топ-комментаторов есть!
Спасибо!
а как сделать вертикальное меню?
Пожалуйста!
Здесь в двух словах не опишешь!
могли б вы мне сбросить инструкции на мейл?
буду признателен
80674384849@ukr.net
Извините, Сергей, но я не скидываю инструкции на почтовые ящики. Для этого нужен целый урок и время.
Добрый день, меню почему то получилось, так как будто оно
сразу выпало. Что это может быть?
Похожая ситуация! Скорее всего Вы не установили библиотеку джейквери.
Очень понравилась идея с выпадающим меню. Завтра попробую реализовать на своем сайте. Спасибо за подробные и понятные статьи!
Пожалуйста! Рад что Вам так понравилось!
Здравствуйте, Денис!
Пробовала установить и на стандартной теме вордпресс и нестандартной. Меню ставится,все хорошо. Но оно ставится выпавшем уже. JQuery есть, так как пробовала установить снегна обе темы. Снег работает. В чем может быть причина, что меню уже выпавшее? Где искать? Спасибо.
Здравствуйте, Ольга!
Я не знаю в чём причина Вашей проблемы так как не вижу и не знаю всех Ваших действий!
А как вставить к примеру в любое место шаблона (сайта) ту часть кода, где имя «Привет, user» и поиск. Это то что спарва только. Я не пойму где он.
Не совсем понял о чём Вы!?
Эм, я вроде писал к статье об «Admin bar»… наверно как то ошибся…
Я об админовском баре вверху сайта, черная полоска. Справа поиск, «привет, Admin» и лого пользователя. Вот конкретно эту часть админовского бара как вырезать и вставить в любое место сайта? я конкретно код не могу найти.
Я где-то в блоге писал, как вставлять свои ссылки в бар, ну и там манипулировать ими! Честно это было давно, но решение есть, просто сейчас уже не вспомню!