Горизонтальное многоуровневое css меню: Горизонтальное меню для сайта
09.08.2018 
Разное
горизонтальное » Скрипты для сайтов
7 006 Скрипты / Menu & NavЭффект зачеркивания при наведении в меню
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
4 891 Скрипты / Menu & NavГибкое горизонтальное меню
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
5 207 Скрипты / Menu & NavДиагональное меню на CSS
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
Горизонтальное меню на CSS3
Симпатичное горизонтальное CSS3 меню с всплывающими пунктами при наведении.
4 772 Скрипты / Menu & NavВыпадающее меню на CSS3
Горизонтальное меню с выпадющими подпунктами с использованием css3.
2 758 Скрипты / Menu & NavРазмытое меню на CSS3
Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.
2 631 Скрипты / Menu & NavJQuery плагин, позволяющий сделать горизонтальную навигацию, которая будет занимать всю ширину контейнера в котором находится. Добавлена также и поддержка IE7.
3 799 Скрипты / Menu & NavГоризонтальное меню с выпадающими подпунктами
Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню. 1 882 Скрипты / Menu & NavМеню с эффектом подпрыгивания
Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.
2 761 Скрипты / Menu & NavМногоуровневое выпадающее меню
Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.
1 880 Скрипты / Menu & NavМногоцветное меню на CSS3
Выпадающее CSS3 меню
Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.
Многоуровневое вертикальное меню HTML и CSS
18 ноября, 2015 10 394 1На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | ul{
list-style: none;
background-color: #484f61;
width: 200px;
border: 1px solid #2a323f;
border-bottom: none;
color: #fff;
}
ul li{
border-bottom: 1px solid #2a323f;
position: relative;
}
ul li:hover{
background-color: #2a323f;
}
ul li:hover ul{
display: block;
}
ul li:hover ul li ul{
display: none;
}
ul li a{
color: #fff;
padding: 10px 20px;
display: block;
text-decoration: none;
font-weight: bold;
}
ul li a:hover{
background-color: #5d99cf;
color: #fff;
}
ul li ul li:hover ul{
display: block;
}
ul li ul{
position: absolute;
left: 200px;
top: 0px;
display: none;
} |
ul{ list-style: none; background-color: #484f61; width: 200px; border: 1px solid #2a323f; border-bottom: none; color: #fff; } ul li{ border-bottom: 1px solid #2a323f; position: relative; } ul li:hover{ background-color: #2a323f; } ul li:hover ul{ display: block; } ul li:hover ul li ul{ display: none; } ul li a{ color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-weight: bold; } ul li a:hover{ background-color: #5d99cf; color: #fff; } ul li ul li:hover ul{ display: block; } ul li ul{ position: absolute; left: 200px; top: 0px; display: none; }
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Прайс</a></li> <li><a href="#">Услуги</a> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> <li><a href="#">Услуга 4</a></li> <li><a href="#">Услуга 5</a></li> </ul> </li> <li><a href="#">Услуга 4</a></li> <li><a href="#">Услуга 5</a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> |
<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Прайс</a></li> <li><a href=»#»>Услуги</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a></li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Контакты</a></li> </ul>
Вам также может понравиться
Как сделать навигационное меню — учебник CSS
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т. п.
Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> </ul>
Изначально, без стилей наша навигация выглядит, как обычный список:
Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding, заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.
После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.
Вертикальное меню
Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
Блочные ссылки
Прежде всего нужно сделать все теги <a> блочными элементами:
.menu a { display: block; }
Существует несколько причин для этого:
- Вы сможете задавать отступы для ссылок.
Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет:
GIFСтрочные ссылки могут быть разной длины, что негативно отразится на внешнем виде.
- Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов
paddingможно увеличить область кликабельности еще и по высоте.
Ширина меню
Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента
.menu { width: 300px; }
Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.
Разделение пунктов
Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:
.menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Высота пунктов и вертикальное выравнивание
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
.menu a {
height: 30px;
line-height: 30px;
}
GIF
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное меню
Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первый
Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:
.menu li {
display: inline;
}
При этом теги <a> внутри <li> нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block. Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
.menu a {
text-decoration: none;
font-family: sans-serif;
color: #5757a0;
display: inline-block;
padding: 10px 20px;
background-color: lavender;
border-bottom: 5px solid #5757a0;
}
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:
<ul> <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li> ... </ul>
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
.menu li {
margin-right: -5px;
}
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второй
Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов <li>:
.menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, <h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
.menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after. Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.
GIF
Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать стили ссылкам в зависимости от атрибутов и их значений.
Как сделать горизонтальное или вертикальное выпадающее меню для сайта на основе CSS и Html в онлайн сервисе
Комментарии и отзывы
Инка
Просто шикарно, спасибо! Действительно, простой способ, особенно приятно, что это легко сделать для WP
Androi
Можно использовать Ваш код впадающего горизонтального или вертикального у себя на сайте?
flickr gallery
Wow, nice tutorial, thanks google translate 😉
Ян
Полезная статья, попадает в интересные ссылки. Но можно было сделать проще: выводить список категорий с помощью функции wp_list_categories и при добавлении/удалении рубрик не придется руками править выпадающую менюшку. Наверное напишу у себя на блоге, как это сделать.
Dims
Огромное спасибо за обзор. Очень полезно.
Веретено
Я так понял, что менять название страниц в админке менять не получится? Т.е. этот вариант без динамики? Для Joomla не имеет смысла этот способ создания выпадающих менюшек использовать? А встроить этот инструмент в сам WordPress не получится? Плагин прикрутить…
Андрей
А в IE эти выпадающие менюшки будут работать без дополнительного небольшого Java Script? Не проверяли?
Иван
Для динамической структуры сайта такое выпадающее меню пригодно? Или там жестко задаются значения?
Алексей
Спасибо за статью. Попробую…
Антоншка
Отметьте, что кнопка «Download» появляется только после регистрации на онлайн сервисе Pure CSS Menu.
Alex
Дмитрий здравствуйте.
А скажите навороченность и множества выпадающих меню
на странице как то влияют на ее скорость загрузки?
СПС заранее…
Анна
А мне не прислали файл с Html, а только лишь папку с картинками 🙁
ЧТО ДЕЛАТЬ?
Анна
Код Html взяла в исходном коде страницы, на которой было изображена моя менюшка (онлайн сервис PureCSSMenu мне его прислал).
Я все вставила как Вы написали. Получилось.
Но потом решила все подвинуть вправо, чтобы по центру было. И тогда у меня все выпадающие меню второго уровня вообще очень сильно вправо сместились и вниз.
так что я до них мышкой не могу достать. Когда начинаю двигать в их сторону мышкой, то они пропадают.
Что можно сделать?
mamay_p
Всё получилось, но вместо русских названий пунктов меню отображаются вопросы. Два дня уже мучаюсь. Ничего не выходит. Сайт на Джумла. Код вставлял в файл шаблона, т.к. из админки через модуль он не встаёт.
Дмитрий
mamay_p: перед сохранение измененного файла шаблона попробуйте преобразовать текст в UTF-8 без Bom. В Notepadd это можно сделать в разделе «Кодировки».
mamay_p
Дмитрий: Спасибо. Всё получилось. Только с кодировкой просто в UTF-8. Ещё раз спасибо огромное.
mamay_p
Дмитрий: теперь другая проблема))))) в неактивном состоянии выпадающее меню торчит сбоку слева посредине страницы, при наведении на материнское меню, выпадающее перемещается на своё законное место.
Андрей
Спасибо! Вот бы еще созданное меню научиться таскать по экрану, т.е. в нужное место вставлять!!! ПОМОГИТЕ! В файле «cm-style.css» меняю «relative» на «absolute» с указанием «Top» и «Left» позиции и, не получается!
Andrey
Еще бы научиться изменять положение меню на дисплее. Где в css position вставлять. Подскажите пожалуста!!! Help!!!
valya
Добрый день, прошу помочь у меня не вышло все вставить куда надо.
первую часть просто поставила в конец ксс кода шаблона. а вот со второй частью проблемы.
если создавать новый модуль с щтмл кодом то ему нужно дать заголовок. какой? и после этого просто появляется модуль с таким именем а на сайте ничего не меняется, и еще вопрос нужно ли мне выключать то меню которое уже есть на сайте(гориз.)
Евгений
Доброго времени суток!
1.зарегистрировался http://purecssmenu.com/
2.Создал меню на сайте http://purecssmenu.com/
3.скачал архив, распаковал его.
4.скопировал код и…а в какую часть кода (в моей таблице стилей) вставлять скопированный код?
У меня то размещение менюшек скакать начинает, то вообще ничего не происходит :(((
Подскажите пожалуста.
Заранее благодарен.
Евгений
как найти нужное место вставки кода в файле style.css и куда вставлять html код???
Намик
у меня на опере меню сдвинулось на верх, а в FF и IE все пошло нормально, как поступить с оперой? Спасибо
Евгений
Намик: как найти нужное место вставки кода в файле style.css и куда вставлять html код???
Кирилл
Создал менюшку — скачал zip файл — распаковал.
Затем проделал все операции которые указаны для Joomla внизу статьи — указал правильное место модуля в шаблоне.
Но вместо выпадающего меню получил в шапке сайта весь код написанный на html (который я вставлял)
Как решить проблему ?
Tim
У меня такая же проблема как у Кирилл. Код вместо меню:(
moon
у меня никакое меню не отображается, только последняя строчка — CSS Drop Down Menu by PureCSSMenu.com. Что делать не знаю, замучилась уже с этими подкатегориями.В шаблоне, который установила на сайт, они не прописаны, сама сделать не могу((
Люба
Не могу поставить, отображается коряво постоянно, целый день сижу над ним, может кто-то помочь?
сергей
а с категориями такое получится?
Любовь
Спасибо за постоянные подробные консультации. Это для нас «чайников» просто спасение. Я сделала все, что здесь описано. Но на сайте у меня меню вообще не высвечивается, а при наведении мышки на него вылетают выпадающие подменю. Но на них написаны вместо букв различные буквы и значки в беспорядке. Сайт в юкозе. Помогите разобраться, почему?
Наталья
Добрый день! Помогите пожалуйста. Я сделала выпадающее меню с помощью плагина Drop-down Menu, очень удобная вещь, но есть маленькая заминка. Шаблон сайта на вордпрессе выглядит следующим образом: название «Главная» находится по середине окна, а те странички для которых я создавала менюшку после установки плагина съехали на вторую строчку под название «Главная», да еще и прилепились с левой стороны окна сайта. Как только этот плагин убираешь, созданные странички возвращаются на свое место в строку где название «Главная». Для наглядности приведу пример:
(это так, как получается с плагином):
Главная
Коротко о сайте Это Интересно!
(а это так, как мне бы хотелось сделать):
Главная Коротко о сайте Это Интересно!
Я так поняла, что мне нужно покапаться в цсс самого плагина, но что только я уже не делала не получается сдвинуть это меню.
Добрые люди, может вы подскажете, какой код мне нужно поменять? Заранее спасибо!
Dezu
небольшая проблемка с purecssmenu… на главной странице менюшка отображается не полностью и при наведении не раскрывается. если перейти на любую другую страницу сайта, то меню полностью функционирует, но происходит смещение на строку вверх. подскажите как можно это исправить?
Юля
Огромное спасибо!!!!!!!!
выручили!
Серж
Андрей! Подскажи пожалуйста, как бы сделать все наоборот? Мне нужно как раз запретить показ в менюшке страниц второго уровня т.е. подстраниц. Я хочу сделать страницу новости на своем блоге и там размещать подстраницы с новостями, их будет много и выплывающее меню только мешает, как бы это запретить! Если нужно посмотреть как это выглядит вот сайт: http://1efimrealty.ru
Спасибо заранее!
Админ
Менюшка классная! Посмотрите еще один урок (ссылка ниже), очень прикольное меню!
Тут урок как сделать классное Анимированное меню с выскальзывающим текстом и иконкой — http://ileson.ru/lesson.php?rub=6&id=50
pri4ina.ru
Исправляй начало статьи.
…нужно в первую очередь там зарегистрироваться, а затем уже определяться с шаблоном выпадающего меню.
Пол часа делал менюшку, а потом оказалось, что там ещё и регистрироваться надо…
У меня просто нет хороших слов, предупреждать же надо, что необходима регистрация.
Димка
Посмотрите пожалуйста, Semant.ucoz.ru можно ли в отдельном блоке поменять дизйн шрифт, размер подскажите виджет может какой для блоков
Даниил
Способ конечно хороший, но столкнулся с другой проблемой: все подпункты отображаются вертикально одним столбцом, а мне нужно по несколько подпунктов в один ряд. Можно ли что-то сделать?
Виктор Ивановский
Читать код выравненный по центру ужасно (
Бабай
Подскажите почему сьезжают вниз сайдбар,…или виджеты
Роман
в IE8 меню отображается некорректно. В остальных браузерах все отлично. Подскажите как с этим бороться.
Дима
Ужасный урок!! Так запутанно, я уже три часа вмыкаю…
Екатерина
Огромное спасибо за столь быстрый ответ. Все сделала, как Вы написали, но ничего не изменилось.
nikko
Описал прекрасный модуль Выпадающее меню joomla http://e-kzn.ru/rasshireniya/vipadaiuschee-meniu-joomla.html горизонтальное и вертикальное
Константин
Вот здесь я подробно расписал как создать выпадающее горизонтальное меню, которое создается через панель управления wordpress, используется технология java скриптов, но все расписано подробно, так что поймет любой новичок http://mnogoblog.ru/urok-26-sozdaem-vypadayushhee-gorizontalnoe-menyu-wordpress-podrobno
T’Anik
Я имею лишь первоначальные сведения о html и css, и то умудрилась только по статье сделать выпадающее меню. Предварительно перерыла тучу сайтов с инструкциями, как это сделать. Ничего не поняла, и, соответственно, ничего не получилось. А здесь ТАК ПОНЯТНО написано, что у меня вышло с первого раза! Честь и хвала автору!!
Теперь буду разбираться, как на других страницах оставить это меню, но без дополнительных наворотов главной страницы.
Тимирлан
Спасибо большое.У меня все получилось,но как сделать кнопки немного больше?
Заранее спасибо.
Юлия
Здравствуйте!
Спасибо за урок. Все получилось. Хотелось бы только, чтобы меню располагалось по центру, сейчас оно смещено влево. Подскажите пожалуйста, что нужно добавить в код, чтобы отцентровать меню.
Константин
Для создания вертикального меню с древовидной структурой рубрик, при этом рубрики и подрубрики будут раскрываться (то есть это сможет заменить вам также плагин «Хлебные крошки»)есть отличный wordpress плагин — Collapsing Categories, о нем можете прочитать в моей статье: http://mnogoblog.ru/vertikalnoe-menyu-s-raskryvayushhimisya-rubrikami-plagin-collapsing-categories
Игорь
А на CMS Joomla 2.5 будет работать?
Denis
Спасибо за статью!
В общем все стало, стили подключил. Но есть пару проблем, менюшка ушла под блок, и в ней нет картинки (стрелочки). помогите пожалуйста
посмотреть можно тут: http://wotplayer.pro/
Константин
Есть один вопрос новичка. У меня на хостинге нет файла style.css. Куда в таком случае вставлять css-код? спасибо, если кто подскажет
Милана
У меня получился обычный список, а не раскрывающийся, и без фона и рамок, просто один текст…Как исправить — не знаю…
Set
здравствуйте, подскажите как исправить — у меня на сайте http://skachaj.net перестало выпадать меню?
Мария
Внизу в правом углу большой кнопки Download не было, после процесса регистрации появилась, но пришло совсем не то. Жалко, а так надеялась и почти поверила в успех 🙁
Виктор
Спасибо за статью. Всё сделал, всё работает, но есть одно но.
По умолчанию меню выпадает вправо, как можно изменить, чтоб например правые меню, выпадали влево. Где это прописывать и как?
Елена
Спасибо! Ваша помощь просто неоценима, если что не понятно всегда к вашим материалам обращаюсь.
Александр
Подскажите, пожалуйста, на ktonanovenkogo.ru верхнее меню поисковик видит или нет?
Ссылок в коде страницы на эти пункты не заметил нигде на сайте… так как они все-таки индексируются? за счет покупных ссылок?
Александр
Добавил «Оповещать о новых комментариях по почте»
Candycat
Огромное спасибо за столь полезную и подробную инструкцию)))
MrVigner
Очень большое спасибо за статью! Долго я промучился чтобы сделать выпадающее вертикальное меню в горизонтальном и так и не получилось то что хотел. А тут воспользовался этим сервисом и именно то что надо! Немного только стиль подкоректировал под дизайн сайта и все 🙂
Максат из Чимкента
спасибо, огромное
Вячеслав
Дмитрий, подскажи пожалуйста
Как сделать открывающее меню при нажатие на кнопку.
К примеру, будет пункт меню — Выбрать другую услугу.
При нажатие, чтобы появлялось окошко с рубриками(страницами). Например, как на других сайтах — Выбрать город.
То есть, стандартное выпадающее меню на wp не подходит.
Адаптивное многоуровневое горизонтальное меню на чистом CSS — JSFiddle
Editor layout
Classic Columns Bottom results Right results Tabs (columns) Tabs (rows)
Console
Console in the editor (beta)
Clear console on run
General
Line numbers
Wrap lines
Indent with tabs
Code hinting (autocomplete) (beta)
Indent size:2 spaces3 spaces4 spaces
Key map:DefaultSublime TextEMACS
Font size:DefaultBigBiggerJabba
Behavior
Auto-run code
Only auto-run code that validates
Auto-save code (bumps the version)
Auto-close HTML tags
Auto-close brackets
Live code validation
Highlight matching tags
Boilerplates
Show boilerplates bar less often
Горизонтальное Многоуровневое Меню, Основанное Только На Css
Я динамически генерирую меню Multi Level и хочу, чтобы это меню отображалось правильно, без использования JavaScript jQuery, на этом этапе меню имеет только два уровня.
Ниже представлена структура меню, генерируемая динамически
<div>
<ul >
<li><a href="/en/">Home</a></li>
<li><a href="/en/">Menu 1</a></li>
<li><a href="/en/menu2/">Menu 2</a></li>
<li><a href="/en/menu3/">Menu 3</a></li>
<li><a href="/en/menu4/">Menu 4</a></li>
<li><a href="/en/menu5">Menu 5</a>
<ul>
<li><a href="">Menu 5.1</a></li>
<li><a href="">Menu 5.2</a></li>
<li><a href="">Menu 5.3</a></li>
</ul>
</li>
<li><a href="/en/menu6/">Menu 6</a></li>
</ul>
</div>
Многоуровневая работа с JS https://codepen.io/anon/pen/RMrqmQ
Мне нужен указатель на хороший пример, я посмотрел пример, но все они имеют класс, определенный для UL & li, в то время как мое динамическое меню ul..li чистое, так что пользователь может настроить его на основе требований
ОБНОВИТЬ
Работа над codepen, кажется, хорошо работает https://codepen.io/anon/pen/bvEzwe
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
@media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
CSS Горизонтальная панель навигации
Горизонтальная панель навигации
Есть два способа создать горизонтальную панель навигации. Используя встроенные или плавающие элементов списка.
Элементы встроенного списка
Одним из способов создания горизонтальной панели навигации является указание элементов
Объяснение примера:
-
Дисплей: встроенный;— По умолчанию элементы - являются блочными.Мы тут удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их в одной строке
Элементы плавающего списка
Еще один способ создания горизонтальной панели навигации — разместить
Пример
Ли {плыть налево;
}
а
{
дисплей: блок;
отступ: 8 пикселей;
цвет фона:
#dddddd;
}
Объяснение примера:
-
поплавок: левый;— используйте float, чтобы элементы блока скользили рядом друг с другом -
дисплей: блок;— Отображение ссылок в виде блочных элементов делает всю область ссылок кликабельны (не только по тексту), и это позволяет нам указать отступы (и высота, ширина, поля и т. д.если хотите) -
отступ: 8 пикселей;— Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому укажите отступы, чтобы они хорошо выглядят -
цвет фона: #dddddd;— Добавить серый цвет фона к каждому элементу a
Совет: Добавьте цвет фона в
Leave a Comment