Css красивое меню вертикальное: Как сделать вертикальное меню

Содержание

Создаем вертикальное меню для сайта на CSS используя анимации

@media only screen and (min-width: 1200px) {

.container {

width: 1210px;

}

@media only screen and (min-width: 960px) and (max-width: 1199px) {

.container {

width: 1030px;

}

.mcd-menu {

margin-left:10px;

}

@media only screen and (min-width: 768px) and (max-width: 959px) {

.container {

width: 682px;

}

.mcd-menu {

width: 200px;

}

.mcd-menu li a {

height:30px;

}

.mcd-menu li a i {

font-size: 22px;

}

.mcd-menu li a strong {

font-size: 12px;

}

.mcd-menu li a small {

font-size: 10px;

}

.mcd-menu li a.search input {

width: 120px;

font-size: 12px;

}

.mcd-menu li a.search button{

padding: 8px 10px 9px 10px;

}

.mcd-menu li > ul {

min-width:180px;

}

.mcd-menu li:hover > ul {

min-width:180px;

left:200px;

}

.mcd-menu li ul li > ul,

.mcd-menu li ul li ul li > ul {

min-width:150px;

}

.mcd-menu li ul li:hover > ul {

left:180px;

min-width:150px;

}

.mcd-menu li ul li ul li:hover > ul {

left:150px;

min-width:150px;

}

.mcd-menu li ul a {

font-size:12px;

}

.mcd-menu li ul a i {

font-size:14px;

}

@media only screen and (min-width: 480px) and (max-width: 767px) {

.container {

width: 428px;

margin: 0 auto;

}

.mcd-menu {

width: 50px;

}

.mcd-menu li a {

position: relative;

padding: 12px 16px;

height:20px;

}

.mcd-menu li a small,

.mcd-menu li a strong,

.mcd-menu li .search {

display: none;

}

.mcd-menu li a:hover strong,.mcd-menu li a.active strong {

display:block;

font-size:10px;

padding:3px 0;

position:absolute;

bottom:0px;

left:0;

background:#e67e22;

color:#FFF;

min-width:100%;

text-transform:lowercase;

font-weight:normal;

text-align:center;

}

.mcd-menu li > ul {

min-width:180px;

left:70px;

}

.mcd-menu li:hover > ul {

min-width:180px;

left:50px;

}

.mcd-menu li ul li > ul,

.mcd-menu li ul li ul li > ul {

min-width:150px;

}

.mcd-menu li ul li:hover > ul {

left:180px;

min-width:150px;

}

.mcd-menu li ul li ul li > ul {

left:35px;

top: 45px;

border:0;

border-top:4px solid #e67e22;

}

.mcd-menu li ul li ul li > ul:before {

left:30px;

top: -9px;

border:0;

border-bottom:5px solid #e67e22;

border-left:5px solid transparent;

border-right:5px solid transparent;

}

.mcd-menu li ul li ul li:hover > ul {

left:30px;

min-width:150px;

top: 35px;

}

.mcd-menu li ul a {

font-size:12px;

}

.mcd-menu li ul a i {

font-size:14px;

}

@media only screen and (max-width: 479px) {

.container {

width: 320px;

margin: 0 auto;

}

.mcd-menu {

width: 50px;

}

.mcd-menu li a {

position: relative;

padding: 12px 16px;

height:20px;

}

.mcd-menu li a small,

.mcd-menu li a strong,

.mcd-menu li .search {

display: none;

}

.mcd-menu li a:hover strong,

.mcd-menu li a.active strong {

display:block;

font-size:10px;

padding:3px 0;

position:absolute;

bottom:0px;

left:0;

background:#e67e22;

color:#FFF;

min-width:100%;

text-transform:lowercase;

font-weight:normal;

text-align:center;

}

.mcd-menu li > ul {

min-width:180px;

left:70px;

}

.mcd-menu li:hover > ul {

min-width:180px;

left:50px;

}

.mcd-menu li ul li > ul,

.mcd-menu li ul li ul li > ul {

min-width:150px;

}

.mcd-menu li ul li:hover > ul {

left:180px;

min-width:150px;

}

.mcd-menu li ul li ul li > ul {

left:35px;

top: 45px;

border:0;

border-top:4px solid #e67e22;

}

.mcd-menu li ul li ul li > ul:before {

left:30px;

top: -9px;

border:0;

border-bottom:5px solid #e67e22;

border-left:5px solid transparent;

border-right:5px solid transparent;

}

.mcd-menu li ul li ul li:hover > ul {

left:30px;

min-width:150px;

top: 35px;

}

.mcd-menu li ul a {

font-size:12px;

}

.mcd-menu li ul a i {

font-size:14px;

}

Плавно открывающееся меню с помощью CSS. Вертикальное выпадающее меню на css: как его сделать

От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

Пункт1

Подпункт

Пункт2

Подпункт

Пункт3

Подпункт

Пункт4

Подпункт

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

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

margin : 0 ;

padding : 0 ;

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height : 70px ;

#nav ul{

list — style : none ;

Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float : left ;

width : 180px ;

position : relative ;

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

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

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

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

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

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display : block ;

background : #90DA93;

border : 1px solid #060A13;

color : #060A13;

padding : 8px ;

text — align : center ;

text — decoration : none ;

#nav li a:hover{

background : #2F718E;

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

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

Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

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

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li .second{

display : none ;

position : absolute ;

top : 100 % ;

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

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

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display : block ;

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

Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:

#nav li li{ width: 180px; }

#nav li li{

width : 180px ;

Все, проблема решена:

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

Переделываем меню в вертикальное

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

Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display : none ;

position : absolute ;

left : 100 % ;

top : 0 ;

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

Михаил сб, 09/20/2014 — 12:28

Что-то мой комментарий не виден — дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul.nav li:hover ul {display: block;}»
Подскажите, в чем дело?

Есть пожедания по изложению материала:

Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за «выпадение меню», а какая — за скрывание пунктов более глубокого уровня вложенности

Хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

В частности, неясно, зачем нужна строка «

Адаптивное меню CSS — 20 полезных сниппетов

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

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

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

Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap.
При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки «прячутся» под переключатель меню. Это распространенный метод работает во всех браузерах.

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

Это выпадающее меню для сайта является одним из самых уникальных примеров навигации. Вы видите светло-зеленую вкладку, при нажатии на которую вверху разворачивается панель навигации со ссылками меню. Каждая ссылка имеет плавающую ширину и подстраивается под любой размер экрана.
На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active.

На первый взгляд это меню кажется стандартным: традиционные ссылки, гамбургер-переключатель меню и плоская цветовая гамма. Хотя оно лишено гламурного блеска, меню работает и работает удобно и просто. Весь его код написан на Haml и SASS.

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

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

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

Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3. Мы уже публиковали полное руководство по Flexbox, с которым я советую вам ознакомиться.
Это меню построено на Flexbox, в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS, реализована поддержка выпадающих меню для сайта.

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

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

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

«Хлебные крошки» не слишком популярны среди дизайнеров и разработчиков, но их вполне можно использовать для интерфейса навигации. Эти хлебные крошки реализованы без эффектов анимации, зато написаны на чистом CSS.

Посмотреть демо

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

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

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

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

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

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

Посмотреть демо

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

Данная публикация является переводом статьи «20 Useful CSS Snippets for Responsive Menus» , подготовленная редакцией проекта.

Красивое и простое вертикальное меню для сайта css, без знания html

Всем привет. Пишет Денис Повага.

Я люблю тему блога colormag, и мы её используем на большинстве проектов. Я внес в ней несколько сильных доработок, чтобы она была интересней под поисковые системы и выглядела уникальна для наших сайтов, в глазах посетителей. Именно эти доработки, сильно отличают нас от других, кто использует обычную версию шаблона.

И одной из таких примочек, я хочу поделиться в сегодняшнем выпуске. А именно — как сделать простое красивое меню на сайте, отображаемое у Вас в правом виджете. То есть, вертикальное. Причем, сделать сможете его уже сегодня, самостоятельно. Там нет ничего сложного. Просто скопируете код стиля, и если ваш блог на теме colormag, то автоматически меню преобразится, без лишних корректировок.

Итак. Прежде всего, хочу сказать, что часть моментов, которые вы видите на различных блогах, в плане оформления меню, или каких-либо красивых стилей, вы можете заимствовать, и делать под свой блог. Причем, делается это проще простого, и даже без знания языков программирования. Даже такого простого, как html.

Есть конечно сложные вещи для начинающих, когда код состоит из двух частей и более. Как бы простыми словами — одна часть подгружаемого кода на сайте находится в верхней его части, между тегами head. А другая уже в нужно месте кода страницы. Да ещё и файл стилей используется. В общем, жуть для начинающих )))

… и там, часто бывает очень сложно разораться. То есть, если брать сложное меню, которое многоуровневое, и оно естественно будет и в самом коде выглядеть сложно для начинающих. И не достаточно просто скопировать стиль css, чтобы оно заработало. Там чуть сложнее. Да и не к чему все это… Зачем нам лесть в ДЕБРИ, когда основная цель — это не копаться в процессе, а работать внешне над ним. Не в мелочах разбираться, что и как работает. А развивать свой блог, и зарабатывать деньги. Понимаешь о чем я? Бедность — это роскошь в мелочах! Кто-то сказал из великих, не помню ))

Но есть простые элементы, которые я люблю и часто применяю. Это то, что можно реализовать полностью на стилях css . При этом, я и сам не силен в программировании, и дальше языка html и стилей css — признаюсь не вникаю. Просто оно не нужно. Потому как в каждой области есть свои специалисты. Но понимать основы и принципы, как все работает — все же желательно.

Ну да ладно, лить воду. Давайте начнем!

Так вот, у одних кто использует тему colormag, меню по умолчанию такое (просто обычные ссылки):

А у других, интересней, и при наведении подсвечивается:

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

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

Как сделать красивое вертикальное меню. Простая инструкция для начинающих

Прежде всего, давайте перейдем на сайт Дениса Сидорова (сайт мой повар) — нашего ученика и коллеги по цеху группы класс блогеров WhatsApp, и посмотрим, что да как.

Кстати, вот что написал Денис, вчера:

Посмотрим меню…

Для этого, вам нужно нажать ПРАВОЙ КНОПКОЙ МЫШИ по меню, и выбрать — посмотреть код (в мозиле это может быть проинспектировать элемент. точно не помню, т.к. пользуюсь хромом):

нас интересует прежде всего файл стилей — style.css

Слева находится сам html код, и нажимая правой кнопкой именно по элементу меню, вас сразу переносит в нужную часть кода. То есть, в код меню html. Но html код который слева, нас по сути не интересует, поэтому пугаться не нужно…. Суть в том, что вы видите как это меню сделано обычными списками ul и далее li . Эти теги вы видите слева, в самом меню .

Так вот. Суть в том, что мы можем для этих тегов, задать свое оформление. То есть задать им стиль. Они в данном случае, уже заданы. И вы можете посмотреть какие именно, и скопировать для своего проекта…

Только не забывайте делать резервные копии сайта и БД!

Итак, нас интересует только правая часть, и файл стилей. Нужно скопировать строки стиля, отвечающие за отображение меню, и чтобы быстро их найти, мы нажали правой кнопкой мыши по нужному элементу, затем увидели, что находимся в нужном месте кода, и после этого нажимаем по ссылке — style.css … , которая находится уже в правой части. Вот здесь:

Кстати, не бойтесь нажимать. Там нет ничего опасного…

После клика по ссылке, вас перекинет на нужные строки файла стилей, отвечающего в нашем случае за меню:

Видите, есть однотипные названия :

#categories-3 …

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

и дальше все просто. Копируем от начала до конца нужный код, сначала в блокнот:

вот так:

Затем, смотрите… Мы можем сразу поменять цвет для нашего меню. Конечно, можете ещё много чего поменять и потренироваться. Ну если хотите более глубоко все это дело изучать, то можете почитать про css в сети.

А сейчас, просто без знаний, вы сделаете красивое меню, и зададите нужный ему цвет. Тем более, если у вас тема colormag, то проблем точно не возникнет, и все получится. А нюансы, если будут, то я разберу их ниже, и отвечу в комментариях…

Так вот. Видите эту строчку:

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

Нажмите просто на квадратик цвета или задайте код цвета вручную. Мы будем делать через палитру браузера. Это удобно и быстро. Тем более, можно подогнать цвет под стиль сайта. Или посмотреть сначала, где какой элемент и какой у него цвет, затем скопировать нужный цвет и задать его для меню.

В общем, вот так делайте, и никаких кодов цветов вам тоже знать не нужно!

Хотя, думаю Вы знаете, что у каждого цвета, есть свой код rgb, и код для html

Ну да ладно, выбрали цвет, и смотрим что получилось…

Теперь просто берем, и выделяем этот самый код цвета, и копируем его:

После чего, вставляем код в блокнот в нужной строке… Там все просто. Попробуйте!

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

…и переходим в раздел на нашем уже блоге:

Откроется файл стилей, в котором, в самом низу вставите код меню…

Получится примерно так, как показано ниже.

Не забудьте обновить файл.

ТОЛЬКО ВНИМАНИЕ!!! Ничего не удаляйте там, так как можно испортить отображение на сайте чего-либо другого. А ЕЩЁ ЛУЧШЕ, СКОПИРУЙТЕ ПОЛНОСТЬЮ ФАЙЛ СТИЛЕЙ К СЕБЕ НА КОМПЬЮТЕР, НА СЛУЧАЙ, ЧТОБЫ ВЕРНУТЬ ЕГО. Про бекап говорилось выше.

Суть в том, что есть сам код сайта (html), который отвечает за всю разметку на странице. То есть, содержит коды. Например, тот же заголовок на блоге, имеет код h2 . и т.д. А помимо всех кодов, есть ещё файл стилей. Файл стилей как раз и отвечает за отображение нужных элементов на странице блога. Простыми словами так. Мы просто нашли, и узнали какой id (categories-3) у нужного элемента тега, и на этот id сделали всю разметку по оформлению для необходимых тегов.

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

После чего, вбиваете адрес своего сайта там, и проверяете! Если меню работает, значит поздравляю!!! Вы справились.

Если меню не работает, то скорее всего, на вашем сайте другое значение id . Вы просто можете узнать сначала нужный id, его название которое отвечает за вывод меню (с этого и нужно было начинать. Но у вас ведь тема колормаг, поэтому мы пропустили этот момент, чтобы вам было проще…)

Например, на блоге Маргариты, id=»categories-2″

Вы уже догадались, что нужно сделать?

Просто берем и меняем на нужное значение в файле стилей. Вот здесь:

Вот и все. Здесь все просто. А если у вас и вовсе имя id меню другое, то можно изменить на нужное.

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

Так вот. Пользуйтесь. А если что-либо не получается, пишите ниже в комментариях.

До связи…

Автор публикации

1-2 раза в год, веду до результата в блогинге, при наличии мест.
Для связи: ok.ru/denis.povaga

Комментарии: 2964Публикации: 795Регистрация: 12-03-2013
CSS выпадающее меню с подменю абсолютное / относительное положение к другому элементу

Я пытаюсь создать горизонтальное выпадающее меню, в котором каждое подменю будет отображаться в одном и том же положении (а не под каждым родительским подменю). Я хочу сделать это без javascript, и это пример того, что я сделал на данный момент (это просто выпадающее меню css):
http://jsfiddle.net/pEdaE/
Ну я должен опубликовать какой-то код со ссылкой, поэтому я выбрал этот блок, чтобы показать вам:
.main_menu ul { background-color: #efffc7; display: none; z-index: 100; width: 980px; height: 324px; left:0; position: absolute; }
Это css для подменю, но когда я расположу его с позицией абсолютной или относительной, он просто будет расположен в его родительском DIV. Я пробовал использовать фиксированное положение, но это не очень красиво.
Мне очень жаль, если на этот вопрос уже был дан ответ, но мне было трудно найти что-либо на эту тему. Я надеюсь, что это можно сделать, используя только CSS.
Спасибо
EDIT:
Меню, которое я сделал благодаря тем, кто участвовал, можно найти в этом FIDDLE
html css drop-down-menu
Поделиться Источник e_scape 24 марта 2014 в 16:39
1 ответ
горизонтальное выпадающее меню с горизонтальным подменю
отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и вставил AND, смешал два разных источника css из cssdeck.com, чтобы создать одно навигационное меню….
Измените вертикальное выпадающее меню CSS на горизонтальное
Я скачал выпадающее меню CSS с веб-сайта (purecss.menus.com). Он начинался как вертикальное меню, и при наведении курсора мыши подменю появляются справа от меню. Я изменил главное меню, чтобы оно отображалось горизонтально. Но я не уверен, какую часть кода CSS изменить, чтобы подменю появлялись…

2

Очень интересная ситуация. Мне нравится идея иметь возможность немного перемещать всплывающее окно, и отличный комментарий CBroe позволил мне придумать этот FIDDLE .
CSS — просто перейдите к «holder» ul и сделайте его положение относительным.
#nav { position: relative; }
CSS — затем расположите элементы «hovered» абсолютно:
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; position: absolute; top: 50px; left: 150px; }
Большое спасибо CBroe!
Поделиться TimSPQR 24 марта 2014 в 18:14
Похожие вопросы:

Почему мое выпадающее меню css/js скрывается до его конца?
У меня есть простое выпадающее подменю, которое я показываю при наведении курсора на элемент списка горизонтального меню. Я позиционирую выпадающее подменю, устанавливая относительное положение на…

CSS выпадающее меню с горизонтальным подменю
У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…

Относительное позиционирование + абсолютное позиционирование против поплавков слева и поплавка справа (какой подход вы используете в своем CSS)?
Некоторые веб-сайты используют DIV с относительным положением, а затем они применяют абсолютное положение к дочернему элементу, чтобы поместить элемент в нужное положение (например, слева 0 или…

горизонтальное выпадающее меню с горизонтальным подменю
отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и…

Измените вертикальное выпадающее меню CSS на горизонтальное
Я скачал выпадающее меню CSS с веб-сайта (purecss.menus.com). Он начинался как вертикальное меню, и при наведении курсора мыши подменю появляются справа от меню. Я изменил главное меню, чтобы оно…

CSS выпадающее меню стиля / правое подменю
Я пытаюсь сделать выпадающее меню с HTML/CSS. на самом деле, это меню dropright, которое является проблемой. При наведении курсора на элементы навигационной панели срабатывает выпадающее меню при…

CSS прокрутка меню-выпадающее меню не прокручивается должным образом
У меня есть меню с горизонтальной прокруткой, а некоторые пункты главного меню имеют выпадающее меню. Проблема в том, что если я прокручиваю главное меню, выпадающие меню не следуют (абсолютное…

CSS подменю абсолютное положение показывает полосу прокрутки на родительском контейнере
Я работаю на сайте WordPress, его меню имеет странную проблему на одной странице, меню на других страницах в порядке. Его нормальная структура такова <ul class=nav-menu> <li…

CSS относительное положение : ширина не учитывается
Я пытаюсь построить чистое дерево CSS . Я столкнулся с проблемой с горизонтальными линиями между блоками (два блока находятся на одном уровне). Я изолировал эту проблему в следующих jsfiddles:…

CSS: как создать выпадающее меню, используя относительное положение и несколько элементов
Я пытаюсь создать выпадающее меню для того, когда пользователь наводит курсор мыши на элемент в другом меню. Мой нынешний HTML: <ul> <li class=menu-main-items>Item1</li> <ul…
Меню и навигация » Страница 6
16.09.2011 4 066 Скрипты / Menu & Nav
Многоуровневое выпадающее меню
Многоуровневое выпадающее меню на чистом CSS3 основанное, как принято, на UL — LI. Подменю будут появляться не при наведении курсора на пункт меню, а при клике.
11.09.2011 2 301 Скрипты / Menu & Nav
Плагин уведомлений
Плагин для добавления уведомлений в любое ваше меню.
28.08.2011 1 332 Скрипты / Menu & Nav
Выпадающий элемент
Создание выпадающего элемента внтури которого может находится любой HTML код. В данном примере у нас вертикальное меню.
15.08.2011 1 574 Скрипты / Menu & Nav
Навигация с выпадающими пунктами
Навигация использующая jQuery плагины hoverIntent, easing и naviDropDown. Эффекты slideUp и slideDown можно установить самим. В демке два примера с горизонтальным и вертикальным вариантом меню.
15.08.2011 1 368 Скрипты / Menu & Nav
Роскошная навигация
Сделаем вертикальную навигацию с красивым эффектом при наведении на пункт меню. Цвета, метод easing и продолжительность можно настроить на свой вкус. Реализуется всё jQuery плагиноми flashyNav, hoverIntent и easing.
11.08.2011 1 103 Скрипты / Menu & Nav
Размытое меню
Сегодня сделаем простой эффект размытого меню с помощью CSS. Учтем и привередливость нашего старого… другом называть не хочется… Internet Explorer. Так что данный метод работает во всех браузерах.
09.08.2011 1 408 Скрипты / Menu & Nav
Меню в стиле lava lamp
Эффект плавного скольжения от одного элемента меню к другому. Одним словом лава ламп.
07.08.2011 1 325 Скрипты / Menu & Nav
Меню ввиде листьев
Горизонтальное меню сделанное на CSS3 ввиде листочков, которые проворачиваются вокруг своей оси и слегка увеличиваются в размерах при наведении на них куросра мыши. Оригинально и красиво сделано.
04.08.2011 1 104 Скрипты / Menu & Nav
Улетное куфонизированное меню
Непугайтесь. Меню использующее шрифты с помощью cufon-yui.js, но с очень классным уплывающим (улетающим) эффектом на всю страницу.
03.08.2011 1 138 Скрипты / Menu & Nav
Анимированное навигационное меню
Три варианта анимированного меню: с всплывающим описанием над элементом, с перемещающимся треугольничком под элементами, подобно лаваламп и так же похожий на лаваламп — эффект перемещения фона от одного пункта меню к другому.
28.07.2011 2 652 Скрипты / Menu & Nav
Вертикальное меню с тизером
Простое вертикальное меню на CSS с возможностью добавления краткой описательной части для пунктов навигации.
28.07.2011 2 864 Скрипты / Menu & Nav
Анимированное меню на CSS или jQuery
Очень симпатичное горизонтальное меню с прозрачными кнопками и анимацией расширения кнопки и уменьшения прозрачности.
Горизонтальное меню на CSS
Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.
HTML код меню
<ul> <li><a href="http://sitear.ru">Главная</a></li> <li><a href="http://sitear.ru">Дизайн, CSS</a></li> <li><a href="http://sitear.ru">Программирование</a></li> <li><a href="http://sitear.ru">Еще пункт меню</a></li> </ul>
По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:
UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.
CSS код меню
Для придания этому меню горизонтального положения, выравнивания по центру и соответствующего вида, напишем следующий CSS код:
#menu{list-style:none; width:500px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;} #menu a:hover{color:#fff; background:#888;}
На данном этапе получилось следующее:
Разбор полетов
Разберем все поэтапно, до каждой мелочи:
#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.
list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.
width:500px; – ширина меню 500 пикселей.
margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.
padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.
#menu li {…} – присваиваем стили для LI элементов.
float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.
font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.
#menu a {…} – присваиваем стили для A элемента (ссылки).
color:#666; – темно-серый цвет шрифта.
display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.
height:40px; – высота меню будет 40 пикселей.
line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.
padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.
background:#eee; – устанавливаем серый цвет фона для элементов меню.
text-decoration:none; – убираем линию подчеркивающую ссылку.
#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.
color:#fff; – меняем цвет текста на белый.
background:#888; – цвет фона меняем на темно серый.
Доработка горизонтального меню
Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для a элемента background:url(background.png) repeat-x; для a:hover другой фон background:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.
background.png —
hover.png —
Теперь меню имеет немного иной вид:
Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.
Дальше: Заработок на контекстной рекламе, идеи для эффективного заработка

Дискуссия по теме 31 Комментарий
Добавить комментарий
Ильдар 11.11.2014 в 22:47
Добрый вечер! а как к пунктам меню добавить материал текст фото видео через css и html не используя движок joomla!
Оксана 04.11.2014 в 15:52
Здравствуйте! Объясните мне чайнику в каком файле должны производиться все эти изменения, общая логика меню мне понятна, но где должен располагаться этот код никак не пойму.
Darksoul 03.09.2014 в 01:00
Здравствуйте! Мне нужна помощь в задании конкретных координат горизонтального меню, а именно в шапке сайта, наложив его сверху на картинку шапки. Сайт на движке вордпресс, могу скинуть файлы header.php, style.php и function.php если они нужны. Ответ если можно пришлите на почту, и заранее спасибо!
Умник 27.08.2014 в 09:50
UL — это весь список, а LI — это вся строчка, вообще-то.
Katrin 25.06.2014 в 01:02
Подскажите как создать горизонтальное меню в CSS и HTML так скажем горизонтальные заголовки и каждый заголовок разным стилем Пример: «контакты ЗАГОЛОВОК корзина»
Артём 23.03.2013 в 14:01
Спасибо, статья очень помогла
Лариса 28.10.2012 в 09:41
Добрый день! Благодаря Вам смогла создать меню. Спасибо! Только есть один момент: в IE меню не горизонтальное, а вертикальное и на ширину страницы. Подскажите, как убрать этот бок. Вот CSS код: #menu{list-style:none; width:1100px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{ border: 1px solid #FFF; border-right-color: #527337; border-bottom-color: #527337; color:000099; display:block; height:36px; line-height:36px; padding:0px 10px 0px 10px; background:#CCCCFF; text-decoration:none; #menu a:hover{color:#FFFFFF; background:#9999FF;}
Тарас 29.10.2012 в 22:52
Это нужно тестировать. Такой эффект могут давать другие стили сайта. Если есть ссылка на пример, скидывайте сюда.
Валерий 10.09.2012 в 21:38
Вот ещё интересное горизонтальное меню — http://lecaw.ru/index.php/categories/css/item/280-kak-sdelat-gorizontalnoye-vipadayushee-menu-s-effektom-prokrutki-na-css
игорь 30.07.2012 в 18:08
Добрый день . Получилось . Все благодаря ВАМ. Осталось несколько вопросов: 1 поместил внизу шапки сайта <div id …..relative;width:700px;margin:auto;font:bold 12px Verdana;color:#FFF2C0; display:block;height:40px; line-height:36px;padding:0px 1px 0px 1px; 1 это в CSS #uMenuDiv2{list-style:none; width:700px; padding:0; margin:auto;} #uMenuDiv2 li{float:left;font:bold 12px Verdana;color:#FFF2C0;} #uMenuDiv2 a{color:#ffffff; display:block; height:40px; line-height:36px; padding:0px 1px 0px 1px То , что выделено находится внизу шапки сайта и в CSS. Не понятно, что д. б. только в CSS И еще, понравилось , на вашем сайте – постоянная активность кнопки, обозначающая страницу, которая , сейчас открыта. М.б. подскажете . В любом случае огромное ВАМ СПАСИБО за помощь , ведь я узнал что то новое, благодаря ВАМ. С уважением Игорь
Тарас 31.07.2012 в 00:59
Можно хоть в CSS, хоть прямо в теге div. Лучше оставить только в css. Все стили выносят в отдельное место специально, чтобы легче было потом редактировать и менять дизайн. С активной кнопкой ничего не получиться, так как для этого нужно программировать… а как там все на укозе я не знаю. Всего вам доброго! Рад что все получилось.
игорь 29.07.2012 в 19:28
Добрый день, Тарас! Вообщем просмотрел разные варианты горизонтального меню, интернет , форумы ,все попробовал , но ничего не получилось , то искажает дизайн,то еще что то , тоска . Вывод- все что пишут в интернете — это для более- менее подготовленных , специалисты делятся своими разработками, вариантами и т.д. Новичкам это сложно . К ВАМ , убедительная просьба , если есть возможность , помогите довести дело до конца, ну а на нет …Вы и так много времени потратили на меня. С уважением Игорь
Тарас 30.07.2012 в 01:56
Дело в том, что я сам не знаю куда добавлять пункт uMenuDiv2… системой ucoz никогда не пользовался. Добавлять нужно туда где пишуться стили css… берете код, который подан в этой статье (здесь уже с ссылкой на фоновую картинку): #menu{list-style:none; width:500px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:url(background.png) repeat-x; text-decoration:none;} #menu a:hover{color:#fff; background:url(hover.png) repeat-x;} вместо #menu пишите #uMenuDiv2… все остальное оставляете так же… две эти картинки закидаете в папку с файлом стилей (тот куда вы пишите этот код).
игорь 25.07.2012 в 20:22
Здравствуйте. Благодарю за ответы. То , что вы подсказали –сделал. Нравится. Провел день в поисках ответа 1 Посмотрите сайт http://compstil.ucoz.ru/ 2 Не получились блоки . цвет блоков и hover(цвета положил в файловый менеджер), есть адрес ссылки , но … Пробовал разные варианты ,смотрел интернет , форум –но результата нет,т.е. нет картинки как в вашей статье – красиво ,просто. 3 кстати , запутался , по моему эти данные надо вводить в CSS , но тогда м.б. надо создать в CSS пункт типа .. uMenuDiv2… , или эти данные надо добавлять в Site Menus или другое Если , возможно найдете время , пожалуйста посмотрите. Еще раз огромное спасибо за вашу помощь С уважением Игорь
игорь 25.07.2012 в 09:11
4 как разместить ссылки страниц в меню Вообщем , сами увидите , мои недоработки ,Прошу подсказать что надо доделать Еще раз огромное спасибо за вашу помощь С уважением Игорь Спасибо -всего 4 части Игорь Статья нужная , полезная
Тарас 25.07.2012 в 14:11
Вы вставили в меню просто текст, оно должно выглядеть следующим образом: <div> <li><a href=»http://compstil.ucoz.ru/»>Главная</a></li> <li><a href=»http://compstil.ucoz.ru/»>Доска объявлений</a></li> </ul> </div>
игорь 25.07.2012 в 09:09
3 Остались не решенными следующее — #menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu. ????? — #menu li {…} – присваиваем стили для LI элементов. ???? — display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста. Не получилось — padding:0px 10px 0px 10px; делаем внутренние отступы слева и справа по 10 пикселей Не заметил — #menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.???? -color:#fff; – меняем цвет текста на белый. -background:#888; – цвет фона меняем на темно серый.
Тарас 25.07.2012 в 14:16
В вашем случае присваивание стилей будет следующим: #uMenuDiv2 {здесь идут все стили для меню} #uMenuDiv2 li {здесь идут стили для разделов меню, смотрите ответ на последний ваш коммент} #uMenuDiv2 a:hover {color:#fff; background:#888;} — это для ссылок меню при навидении. Рассмотрите еще раз, внимательно, картинку в начале урока! И HTML код меню.
игорь 25.07.2012 в 09:09
2 итак ,я взял Ваш код и поместил его внизу верхней части сайта и постепенно добавлял ,по пункту –получилось следующее <div> Главная Доска объявлений Новости Наука, техника Обратная связь Контакты </ul> </div>
игорь 25.07.2012 в 09:08
пересылаю частями Добрый день. Благодарю за ответ Возникли новые вопросы. Пожалуйста , если возможно , ответьте . Хочется довести дело до конца 1 Посмотрите сайт http://compstil.ucoz.ru/ Есть горизонтальное меню , созданное с вашей помощью. (этот сайт отличается от того . что я упоминал ранее , только названием и служит мне экспериментальной базой , на нем я пробую разные варианты , а потом переношу на основной)
игорь 23.07.2012 в 14:51
Здраввствуйте. сайт http://impexstil.ucoz.ru/ спасибо за проявленное желание помочь на сайте видно горизонтальное меню , надо его установить по центру и хотел бы такие же кнопки С уважением Игорь
Тарас 24.07.2012 в 00:14
<div> <ul> содержимое меню </ul> </div> вот так выглядит ваше меню… Попробуйте назначить к div ширину width:500px; или больше, главное чтобы хватало на все разделы. После этого к этому же div блоку добавьте атрибут margin:auto;
игорь 22.07.2012 в 14:16
Добрый день! Благодарю за статью .Очень полезна. Я, не специалист , поэтому похвала будет не корректно, Если позволите , вопрос: -у меня сайт ucoz, есть вертикальное меню , но надо продублировать в горизонтальном , с последующей переделкой вертикального меню в категории и др. Пока , не ясен вопрос в какой раздел CSS вставить код С уважением Игорь
Тарас 23.07.2012 в 14:39
Здравствуйте Игорь! К сожалению на ucoze я никогда не работал и не знаю что и к чему… Может быть что-то посоветую, если дадите ссылку на сайт (страницу).
Павел 03.07.2012 в 16:33
Спасибо! Ваша статья очень помогла мне!
timon 04.06.2012 в 12:20
Спасибо огромное!
artiom 14.05.2012 в 15:35
великолепно! респект и благодарность автору!)
Тарас 14.05.2012 в 15:59
Спасибо, Артем!
Устим 01.04.2012 в 19:45
Тарас, спасибо за ответ. Пробовал и так и так. Ничего не происходит. Только липнет к левому краю и всё…( Размпер остаётся тот же.
Устим 31.03.2012 в 17:14
Здравствуйте. Хотел бы узнать, как зделать так чтобы бекграунд меню был до самого конца сайта, а не заканчивался на последнем разделе. У меня шляпа сайта на весь экран по горизонтали, а меню от левого края идёт до средины, потому что всего 5-ть разделов. А я хотел бы чтобы полоса меню шла до конца. А то как то очень глупо получается сейчас)))
Тарас 01.04.2012 в 16:54
Уберите аттрибут width:500px, или установите 100%, должно работать.
Добавить комментарий
13 Боковые меню CSS
Коллекция отобранных вручную бесплатных меню боковой панели HTML и CSS примеров кода. Обновление ноябрьской коллекции 2018 года. 1 новый предмет.
Меню CSS
Боковые панели Bootstrap
О коде
Эффект меню
Эффекты меню обратного цвета текста.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Навигация только CSS для боковой панели
CSS только зеркало, как навигация для боковой панели.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Боковое меню CSS
Панель навигации HTML и CSS и мегаменю боковой панели .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: bootstrap.css, font-awesome.css
Автор
Шон Рейснер
12 января 2017 г.
О коде
Фиолетовое боковое меню
Это реверс-инжиниринг дизайна «гиперпространства» из HTML5 Up! https: // html5up.сеть / гиперпространство
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Стивен Скафф
27 августа 2015 г.
О коде
Чистый CSS Fly в навигации по боковой панели
Простая многоуровневая навигационная панель . Имеет чистую суб-навигацию css, которая оставляет видимыми значки родительской навигационной панели.При необходимости элементы навигации будут прокручиваться ( overflow-y ). Использует преобразование с и переход с.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: ionicons.css
О коде
Боковое меню Анимация навигации
Нет ничего лучше маленького модного тела.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Винс Браун
12 ноября 2014 г.
О коде
Навигация при фиксированном наведении
Фиксированная навигация по ящику боковой панели, которая расширяется при наведении курсора.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Клаудио Холанда
19 марта 2015 г.
О коде
Полностью адаптивное меню боковой панели CSS3
Полностью адаптивное меню боковой панели без использования JavaScript и с использованием менее 200 строк функционального кода CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Скользящее меню боковой панели CSS
CSS скользящее меню боковой панели со скроллингом, JS не использовались
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
Автор
Арджан Джассал
31 мая 2014 г.
О коде
3D вращающаяся боковая панель навигации
Вертикальная панель навигации , которая переключается со значка на текст с красивой анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Ризки Курниаван Ритонга
2 апреля 2014 г.
О коде
Боковое меню на чистом CSS3
Мега раскрывающееся меню на чистом CSS3 Боковое меню с анимацией ..
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
Автор
JFarrow
12 февраля 2014 г.
О коде
Боковое меню CSS
CSS Боковое меню с отображением / скрытием при наведении.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
Автор
Джон Амбас
3 января 2014 г.
О коде
Боковое меню CSS
Простота использования меню боковой панели с HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
Автор
Теренс Девайн
11 августа 2013 г.
О коде
Фиксированный эффект наведения при навигации
Исправляет концепцию бокового меню с эффектом наведения псевдоэлемента с использованием CSS перехода .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
9 аккордеонных меню CSS
Коллекция отобранных вручную бесплатных аккордеонных меню HTML и CSS примеров кода. Обновление сентябрьской коллекции 2018 г. 1 новый предмет.
CSS Аккордеоны
HTML <подробности> и
с CSS
Аккордеоны jQuery
Аккордеоны React
Автор
Ахмад Эмран
11 апреля 2019 г.
О коде
Великолепное аккордеонное меню
Великолепное меню аккордеона, использующее только HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome.css
Автор
Ахмад Эмран
13 августа 2018 г.
Сделано с
HTML / CSS (SCSS) / JavaScript (Babel)
О коде
Аккордеонное меню
Аккордеонное меню с HTML, CSS и немного JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Вертикальное аккордеонное меню
Только CSS вертикальное аккордеонное меню .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
CSS Аккордеонное меню
Чистый CSS аккордеонное меню с использованием HTML input type = "radio" .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Теодор Клюге
8 марта 2016 г.
О коде
CSS Аккордеон
Аккордеонное меню только с HTML и CSS. Щелкните элемент, чтобы открыть. Щелкните его заголовок или заголовок списка, чтобы закрыть.Добавьте стрелки класса с по nav.accordion , чтобы добавить стрелки раскрывающегося списка.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Валериу Тимбук
27 февраля 2016 г.
О коде
Аккордеонное меню на чистом CSS3
В этом уроке мы узнаем, как создать аккордеонное меню на чистом CSS3.Поскольку мы создадим его с помощью CSS, это будет работать только в браузерах и устройствах, поддерживающих селектор псевдокласса : target .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
CodyHouse
5 октября 2015 г.
О коде
Многоуровневое двухуровневое меню
Простое CSS аккордеонное меню с поддержкой элементов подуровня.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Джейми Колтер
19 апреля 2015 г.
О коде
Шикарное аккордеонное меню на чистом CSS
Чистый CSS аккордеонное меню . Хорошее небольшое дополнение к любому пользовательскому интерфейсу, отличному от javascript. Использует метку s для переключения анимации.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Педро Наук
29 августа 2013 г.
О коде
Аккордеонное меню
Только меню аккордеона CSS3 с эффектами вибрации.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
30 великолепных и универсальных меню CSS
Джереми Х.
Иногда меню навигации может быть одной из самых сложных частей процесса проектирования. Эта отдельная область может задать тон для удобства использования всего сайта.
Сегодня мы рассмотрим 30 вдохновляющих примеров хорошего дизайна меню. Хотя многие из них являются чистым CSS, другие добавляют изображения и / или JavaScript для повышения эстетики и функциональности.
Погружение глубже
Всегда полезнее почувствовать процесс разработки, чем просто увидеть изображение, поэтому в этом разделе мы кратко обсудим эстетику каждого меню и то, как разработчик добился этого эффекта.Таким образом, вы можете получить вдохновение в том, как использовать новые методы для создания ваших собственных уникальных меню.
Шелковый прилив
Это одно из самых минималистичных меню в списке. По сути, это обычный текст с расширенным синим прямоугольником, но его очень легко реализовать и получить приятный эффект.
Гленн Соррентино
В этом примере используются границы CSS вверху и внизу меню, толщина которых увеличивается при наведении на них курсора.
Струта
Если у вас текстурированный фон, подумайте об использовании прозрачности в меню, чтобы повысить эстетичность.Это легко сделать с помощью RGBa в CSS3.
Локоть Парк
Еще один пример прозрачности в области навигации. В этом примере используется эффект, аналогичный первому примеру, с полем выбора, доходящим до верхней части страницы. Это увеличивает видимость и делает дизайн более бесшовным.
Thoughtbot
При наведении курсора на эти кнопки фон меняется на более яркий красный. Это в сочетании с глянцевым внешним видом (достигается с помощью прозрачного PNG) создает иллюзию освещения области.
Дизайн с орехами ириски
В этом красивом примере для навигации используются спрайты CSS. Все меню представляет собой один PNG, показывающий каждую из вкладок в трех состояниях: выключено, включено и включено + выбрано.
Safarista
Здесь мы видим каждый раздел навигации как гибрид изображения и текста. Значок, градиент и меньший фон составляют изображение каждого раздела, в то время как более крупный текст оформлен в стиле HTML с эффектом подчеркивания при наведении курсора.
Дэвид Йонссон
Еще один простой эффект наведения, выводящий кровью наверх.У этого были скрытые значки, которые отображаются только при наведении указателя мыши. Приятный эффект!
Asvalia
Мне очень нравятся цвета и искаженный текст в этом меню. Светящиеся опрокидывания идеальны.
Студии бонсай
Это очень простое вертикальное меню с прозрачностью и затемнением при наведении курсора. Он выполняет свою работу, отлично выглядит и может быть построен за считанные минуты.
Церковь больших надежд
Еще одно вертикальное меню навигации. В нем реализованы некоторые простые, но привлекательные значки и фоновый GIF с градиентом для наведения.
Райан Кузер
Этот использует несколько простых спрайтов для выполнения наведения. Каждый значок представляет собой изображение с включенным и выключенным состояниями.
Kk Media
Здесь мы видим вертикальное меню с более подробными иконками. Каждая ссылка представляет собой элемент списка HTML с простым фоновым изображением, примененным в CSS.
Укус клуб
Мне очень понравилась эта панель навигации. Яркость действительно привлекает ваше внимание, а перемена цветов делает идеальный поворот.Это также использует спрайт для каждого пункта меню, каждый с тремя состояниями.
Capital City Equipment Company
Я подумал, что выбор навигации в форме дома был умным на этом. Текст в каждой ссылке является частью изображения, и если вы воспроизведете что-то подобное, было бы просто вместо этого использовать живой текст поверх фонового изображения.
Клубничный отдых
В этом раскрывающемся меню используется небольшой повторяющийся прозрачный PNG-файл для уменьшения эффекта непрозрачности.Опять же, мы можем надеяться, что в ближайшем будущем это станет намного проще с RGBa, когда появится больше браузеров.
Искусственная студия
Да, как вы уже догадались, больше спрайтов изображений (чувствуете тенденцию?). Большие кнопки и отличные градиенты создают красивую область навигации.
Cognigen
Это была одна из самых оригинальных концепций, с которыми я столкнулся в своем поиске. Чтобы добиться уникального 3D-эффекта, дизайнер использовал колоссальные четыре состояния для каждой кнопки, которые меняются в зависимости от того, выбрана ли кнопка, наведена на нее курсор или находится рядом с ней.
Дополнительные преимущества меню CSS
Теперь, когда мы обсудили довольно много отличных примеров, вот еще несколько, которые стоит проверить. Используйте функцию проверки вашего браузера, чтобы проверить код и изображения, которые вам нравятся!
Manndible Cafe
Код Грин
Opera
Кролик Mac
Clark Builders
Мистер Би и друзья
Подвергнуть
Swish Life
Mystery олово
LiveResto
FeelSocial
Gowalla
NZ Festival
Загрузите готовые меню!
Нужна хорошая отправная точка для ваших собственных меню CSS? Ознакомьтесь с этими замечательными бесплатными ресурсами.
Покажи нам свое
У вас есть CSS-меню, которым вы особенно гордитесь? Используйте комментарии ниже и оставьте ссылку, чтобы мы могли видеть. Также сообщите нам, какой из приведенных выше примеров вам понравился больше всего.
Как создать вертикальное навигационное меню с помощью CSS
В этом практическом руководстве вы узнаете, как создать вертикальное навигационное меню.
Начните со следующего HTML-документа, содержащего неупорядоченный список:
Вертикальное меню навигации <основной> <заголовок> Вертикальное меню навигации На главную Услуги Продукты Поддержка Блог О программе Связаться

Без CSS он будет выглядеть следующим образом:
Создайте файл для внешней таблицы стилей и создайте ссылку на него из HTML, используя следующий тег:

Внутри таблицы стилей начните с удаления стиля списка по умолчанию:
ол, ул { стиль списка: нет; }
Установите ширину и поля меню:
#mainMenu { маржа: 10 пикселей; ширина: 120 пикселей; семейство шрифтов: без засечек; }
Установите элементы списка для отображения в виде блоков и добавьте границы к левому, правому и нижнему краям всех список пунктов.
#mainMenu li { дисплей: блок; граница: 1px solid # 000; граница сверху: 0 пикселей; }
Добавьте верхнюю границу к первому элементу списка с помощью псевдокласса : first-child .
#mainMenu li: first-child { border-top: 1px solid # 000; }
Измените элементы и на элементы блока. Мы также добавим несколько стилей форматирования и удалите подчеркивание с помощью text-decoration: none .
#mainMenu a { дисплей: блок; отступ: 3 пикселя; текстовое оформление: нет; цвет: # 009; }
Наконец, измените состояние наведения указателя на ссылки, чтобы они выделялись, когда на них указывает пользователь.
#mainMenu a: hover { цвет фона: # 009; цвет: #fff; }
Готовый CSS должен выглядеть следующим образом:
#главное меню { маржа: 10 пикселей; ширина: 900 пикселей; семейство шрифтов: без засечек; } #mainMenu li { дисплей: блок; ширина: 120 пикселей; плыть налево; маржа слева: 2px; граница: 1px solid # 000; } #mainMenu a { дисплей: блок; отступ: 3 пикселя; текстовое оформление: нет; цвет фона: #fff; цвет: # 009; } #mainMenu a: hover { цвет фона: # 009; цвет: #fff; }
Откройте HTML-страницу в браузере.Этот код отображает следующее:
Как создать вертикальную панель навигации с помощью HTML и CSS?
Прочитав эту статью, вы сможете создать свою собственную вертикальную панель навигации. Чтобы следовать этой статье, вам нужно только базовое понимание HTML и CSS.
Приступим к написанию нашей вертикальной панели навигации, сначала напишем структуру панели навигации. В этом руководстве мы создаем панель навигации с помощью элемента списка HTML. Мы используем font-awesome 5 иконок на панели навигации.Для этого после тега «title» мы добавили тег «script», чтобы включить библиотеку font-awesome .
HTML
Мы определили структуру веб-страницы с помощью HTML.Теперь нам нужно добавить стиль, используя свойства CSS. Сначала удалите маркеры, поля и отступы из списка. Теперь задайте цвет фона и определенную ширину.
CSS

< html >
< head >
скрипт src =
скрипт >
головка >
< корпус >
3 < ul > < li > < a href = "#" class = " активный » > < i класс 90 083 = "fas fa-home icon" > i > Home a > < / li > < li > < a href = "#" > < i class = "fas fa-rss icon" > i > Новости a > li > < li > < a 9008 4 href = "#" > < i class = "значок fas fa-адресной книги" > i > Контакт a > li > < li > < a href = "#" > < i class = "fas fa-user icon" > i > Около a > li > ul > корпус > html >

<стиль>
ul {
list-style-type : нет ;
маржа : 0 ;
набивка : 0 ;
ширина : 300px ;
цвет фона : # f1f1f1 ;
}

Тип списка : нет; удаляет маркеры из списка HTML.
Маржа : 0; Отступы и : 0; удаляет поля браузера по умолчанию и отступы из элемента.
Чтобы создать вертикальную панель навигации, вы должны стилизовать элементы внутри списка.
CSS
<стиль>
li a {
дисплей : блок ;
цвет : № 000 ;
заполнение : 8px 16px ;
оформление текста : нет ;
}

li a: hover {
background-color : # fad390 ;
цвет : #fff ;
}

Дисплей : блок; , отображающее ссылки как блочные элементы, делает область ссылок интерактивной.Он позволяет нам указать ширину (отступы, поля, высоту и т. Д.)
padding: 8px 16px; Верхний и нижний отступы - 8 пикселей. Правый и левый отступы - 16 пикселей.
текстовое оформление: нет; Удалить подчеркивание из элементов
CSS

правое поле: 10 пикселей; Добавляет некоторое поле между текстом и значками.
Окончательный код: Ниже приводится комбинация всех приведенных выше фрагментов кода.
HTML

< html >
< голова >
> заголовок Заголовок страницы title >
< скрипт src = "
скрипт >
< стиль >
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
цвет фона: # f1f1f1;
}
li a {
дисплей: блок;
цвет: # 000;
отступ: 8px 16px;
текстовое оформление: нет;
}
/ * Изменение цвета ссылки при наведении * /
li a: hover {
background-color: # fad390;
цвет: #fff;
}
.значок {
поле справа: 10 пикселей;
}
стиль >
головка >
< корпус >
< ul > < li > < a href = "#" class = "active" > < i class = "fas fa-home icon" > i > Home a > li > < li > < a href = 9008 3 "#" > < i class = «fas fa-rss icon» > i > Новости a > li > < li > < a href = "#" > < i class = "fas fa-address-book icon" > i > Контакты a > li > < li > < a href = "#" > < i class = "fas fa-user icon" > i > О нас a > li > ul > корпус > html >
Выход:
Вниманию читателя! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.

Вертикальное меню на чистом CSS | Девин Р. Олсен Веб-разработчик
10 сен.2009 Сообщение от Девин Р. Олсен на в CSS Tutorials | 350 комментариев
Сегодня мы собираемся создать второе по распространенности меню навигации - вертикальное меню навигации. Здесь мы собираемся использовать только чистый CSS и неупорядоченные списки для создания нашего меню с тремя подуровнями.Эта версия вертикального меню навигации будет работать в IE5 / IE6 (с исправлением псевдо-наведения CSS), IE7, IE8, IE9, а также в FF, Safari и Chrome.
Для начала создадим наш контейнерный блок меню и присвоим ему идентификатор «навигация»:

Затем мы добавим наши пункты меню первого уровня:

После этого мы дадим нашим элементам списка имена:

На главную

О компании

Связаться

Часто задаваемые вопросы

Новости

Отлично, давайте посмотрим, что у нас есть на данный момент:
Очевидно, это не сработает для нас, но я думаю, что важно указать на вертикальную моду, которая дается нам по умолчанию в упорядоченных списках .Неупорядоченный список для вертикальных меню кажется почти совпадением, сделанным в небесах CSS, по сравнению с его сестринским меню горизонтальным меню навигации.
Итак, давайте начнем добавлять стиль к нашему неупорядоченному списку первого уровня и его родительскому контейнеру «навигации». Наше первое правило CSS, которое мы хотим добавить, будет для нашего контейнера навигации:
#navigation { размер шрифта: 0,75em; ширина: 150 пикселей; }
Здесь мы собираемся дать нашему основному контейнеру некоторую структуру, установив его ширину на 150 пикселей.Мы также устанавливаем размер шрифта нашего меню на 0,75em, который будет каскадно перемещаться вниз по всему меню.
Отлично, теперь мы собираемся создать два новых правила для нашего неупорядоченного списка первого уровня:
#navigation { размер шрифта: 0,75em; ширина: 150 пикселей; } #navigation ul { маржа: 0; отступ: 0; } #navigation li { стиль списка: нет; }
Здесь мы сначала указываем на наш контейнер «навигации», затем на наш первый неупорядоченный список и соответственно назначаем стили. Мы удалили поля и отступы по умолчанию, которые поставляются по умолчанию с неупорядоченным списком, установив для обоих значений 0 пикселей.Мы также удаляем любой стиль списка по умолчанию, установив для всех элементов списка значение none.
Хорошо, давайте посмотрим, что у нас есть на данный момент.
Опять не ищу сейчас горячо, но мы доберемся туда. Наш следующий шаг - назначить некоторые стили только нашим элементам списка верхнего уровня, вернувшись к нашей разметке HTML и добавив новый класс к нашему неупорядоченному элементу. Пока мы добавляем этот новый класс, давайте также добавим несколько ссылок на нашу разметку HTML, например:

На главную

О компании

Связаться

Часто задаваемые вопросы

Новости

Теперь мы можем лучше настроить таргетинг только на наше меню верхнего уровня и его элементы списка.Создав наш новый класс верхнего уровня, давайте теперь добавим следующие новые стили:
#navigation { размер шрифта: 0,75em; ширина: 150 пикселей; } #navigation ul { маржа: 0; отступ: 0; } #navigation li { стиль списка: нет; } ul.top-level { фон: # 666; } ul.top-level li { нижняя граница: #fff solid; верхняя граница: #fff solid; ширина границы: 1px; }
Здесь мы указываем на наш новый верхний уровень (элемент ul) и устанавливаем для него цвет фона # 666 (темно-серый).Затем мы указываем на нашу ul верхнего уровня, затем на его дочерние элементы списка и применяем границу сверху и снизу с цветом #fff (белый) и шириной 1 пиксель.
Отлично, теперь можно настроить таргетинг на теги привязки нашего меню, добавив следующие стили:
#navigation { размер шрифта: 0,75em; ширина: 150 пикселей; } #navigation ul { маржа: 0; отступ: 0; } #navigation li { стиль списка: нет; } ul.top-level { фон: # 666; } ul.top-level li { нижняя граница: #fff solid; верхняя граница: #fff solid; ширина границы: 1px; } #navigation a { цвет: #fff; курсор: указатель; дисплей: блок; высота: 25 пикселей; высота строки: 25 пикселей; текстовый отступ: 10 пикселей; текстовое оформление: нет; ширина: 100%; } #navigation a: hover { текст-оформление: подчеркивание; }
Для начала мы устанавливаем высоту 25 пикселей, чтобы разнести якоря нашего элемента списка по вертикали, затем мы компенсируем размещение текста, используя высоту строки, равную нашей высоте.Мы также устанавливаем text-indent для небольшой вставки текста, text-decoration для удаления подчеркивания, цвета #fff (белый), курсора на указатель и устанавливаем полную ширину 100%.
Самая важная часть наших новых стилей - это то, что мы устанавливаем блок отображения в наших тегах привязки. Без настройки их рендеринга как блока наши ширина и высота не имеют смысла.
Наша последняя часть стилей предназначена для состояния зависания наших тегов привязки. Обычно, когда они зависают, мы возвращаем текстовое оформление подчеркиванию для презентационных целей.
Давайте посмотрим.
Неплохо.
Прежде чем мы перейдем к созданию нашего подменю второго уровня, давайте добавим немного поведения в наше меню, не так ли. Давайте изменим цвет фона элементов нашего списка, если наведем на них курсор.
Для этого мы снова сначала ссылаемся на наш контейнер «навигации», а затем на все элементы списка во всем нашем меню. Как только мы указываем на элементы списка нашего меню, мы добавляем селектор псевдо-наведения, чтобы начать оператор для нашего цветового поведения:
#navigation { размер шрифта: 0.75em; ширина: 150 пикселей; } #navigation ul { маржа: 0; отступ: 0; } #navigation li { стиль списка: нет; } ul.top-level { фон: # 666; } ul.top-level li { нижняя граница: #fff solid; верхняя граница: #fff solid; ширина границы: 1px; } #navigation a { цвет: #fff; курсор: указатель; дисплей: блок; высота: 25 пикселей; высота строки: 25 пикселей; текстовый отступ: 10 пикселей; текстовое оформление: нет; ширина: 100%; } #navigation a: hover { текст-оформление: подчеркивание; } #navigation li: hover { фон: # f90; положение: относительное; }
Здесь мы задаем нашим элементам списка как цвет фона # F90, так и устанавливаем его положение как «относительное».Мы используем относительный, потому что он превращает элементы нашего списка в точки остановки для любых непосредственных дочерних элементов, имеющих абсолютную позицию. Мы также получаем позицию относительно наших элементов списка здесь, в состоянии наведения, чтобы исправить проблемы с ошибками, связанными с IE.
Вот как теперь должно выглядеть наше меню:
Теперь перейдем к неупорядоченным спискам второго уровня. Мы всегда вкладываем наши подменю глубже в элемент списка, в котором мы хотим, чтобы они отображались, как показано ниже:

На главную

Пункт подменю 1

Пункт подменю 2

Пункт подменю 3

Пункт подменю 3

О компании

Связаться

Часто задаваемые вопросы

Пункт подменю 1

Пункт подменю 3

Новости

Пункт подменю 1

Пункт подменю 2

Пункт подменю 3

Обратите внимание на то, как мы вложили наши новые неупорядоченные списки в элементы списка первого уровня.Также обратите внимание, что этот новый уровень неупорядоченных списков содержит новый класс «подуровень». С этого момента все меню подуровня должны будут иметь этот класс «подуровня».
Отлично, давайте вернемся к нашему CSS и начнем устанавливать некоторые визуальные правила для этих неупорядоченных списков второго уровня.
Чтобы придать стили этим неупорядоченным спискам второго уровня, просто укажите на них ссылку с помощью нашего нового класса «подуровня», например:
ul.sub-level { дисплей: нет; }
Здесь мы даем нашим неупорядоченным спискам подуровня отображение «none».Мы делаем это так, что по умолчанию наши неупорядоченные списки второго уровня скрыты, пока не будет сказано иное.
Итак, теперь давайте напишем стили для отображения наших подуровневых меню при наведении курсора на его родительский элемент:
ul.sub-level { дисплей: нет; } li: hover .sub-level { фон: # 999; граница: #fff solid; ширина границы: 1px; дисплей: блок; позиция: абсолютная; слева: 75 пикселей; верх: 5 пикселей; }
Начиная с родительского элемента (li), мы устанавливаем селектор псевдо-наведения и затем указываем на наш.подуровневые меню. При наведении курсора на любой элемент родительского списка его дочернее подуровневое меню будет настроено на отображение блока (открытое). Мы также устанавливаем стиль position absolute и, наконец, верхний и левый стили, которые размещаются вокруг наших подуровневых меню относительно их родительского меню.
Следующее, что мы хотим настроить, это стили элементов списка подуровня:
ul.sub-level { дисплей: нет; } li: hover .sub-level { фон: # 999; граница: #fff solid; ширина границы: 1px; дисплей: блок; позиция: абсолютная; слева: 75 пикселей; верх: 5 пикселей; } ул.sub-level li { граница: нет; плыть налево; ширина: 150 пикселей; }
Здесь мы просто перемещаем элементы списка подуровня влево и устанавливаем их ширину на фиксированное значение 150 пикселей. Мы также удаляем границы по умолчанию, которые мы устанавливаем в нашем правиле элемента глобального списка вверху.
Давайте посмотрим, что у нас есть:
Выглядит хорошо! Теперь давайте создадим наш неупорядоченный список последнего уровня. Как и раньше, мы собираемся вставить новые неупорядоченные списки с элементом списка, который мы хотим открыть для этих неупорядоченных списков третьего уровня.Мы снова также даем этому новому уровню класс подуровня.
Вот как будет выглядеть наша окончательная разметка HTML:

На главную

Пункт подменю 1

Пункт подменю 2

Пункт подменю 1

Пункт подменю 2

Пункт подменю 3

Пункт подменю 4

Пункт подменю 3

Пункт подменю 3

О компании

Связаться

Часто задаваемые вопросы

Пункт подменю 1

Пункт подменю 3

Пункт подменю 1

Пункт подменю 2

Пункт подменю 3

Пункт подменю 4

Новости

Пункт подменю 1

Пункт подменю 1

Пункт подменю 2

Пункт подменю 3

Пункт подменю 4

Пункт подменю 2

Пункт подменю 3

Последние несколько стилей предназначены для творческих предпочтений и действительно устранения ошибок:
/ * Второй уровень * / # навигация.sub-level { фон: # 999; } / * Третий уровень * / #navigation .sub-level .sub-level { фон: # 09C; }
Наш первый стиль указывает на наши первые подуровневые меню из #navigation (#navigaiton ul ul) и устанавливает его фон на # 999 (светло-серый). Второй стиль указывает на наши меню второго подуровня также из #navigation и устанавливает его фон на # 09c (голубой). Это показывает вам, как целенаправленно настраивать разные уровни вложенных меню и при желании их стилизовать.
Последние два стиля призваны помочь некоторым браузерам (IE6 +), которые не понимают, что делать с меню третьего уровня при наведении курсора на пункт меню верхнего уровня.
Вы можете более или менее считать это хорошим сбросом, чтобы вернуть браузеры в форму:
/ * Сброс стилей * / li: hover .sub-level .sub-level { дисплей: нет; } .sub-level li: hover .sub-level { дисплей: блок; }
Давайте разберем эти селекторы сброса. Первый гласит: «При наведении курсора на элемент списка найдите ближайший вложенный.подуровневое меню. Если у этого ближайшего вложенного подуровневого меню также есть вложенное подуровневое меню, скройте его вложенное подуровневое меню из поля зрения ». Мы делаем это так, чтобы одновременно отображалось только одно подуровневое меню, пока наведен курсор на его родительский элемент списка.
Nest, мы меняем роль, чтобы компенсировать первое условие сброса. Этот второй селектор говорит: «Если вы находитесь в пункте меню подуровня и наводите курсор на элемент списка, который действительно имеет вложенное меню подуровня, откройте его меню подуровня».
Посмотрим, что у нас есть сейчас! Вы можете щелкнуть рисунок (изображение) ниже, чтобы просмотреть пример учебного пособия:
Щелкните здесь, чтобы увидеть рабочий пример учебного пособия:
Если вам нужно, чтобы это работало в IE6, обратитесь к этому руководству здесь.http://www.devinrolsen.com/fix-css-pseudo-hover/
Вот и все, вы только что создали вертикальное меню на чистом CSS с всплывающими окнами на нижнем уровне, которое полностью поддерживает кроссбраузерность.
Всем спасибо.
Девин Р. Олсен
Девин Р. Олсен
Расположен в Портленде, штат Орегон. Мне нравится преподавать, делиться и глубоко погружаться в темное цифровое искусство Интернета и разработки игр.
Больше сообщений
Следуй за мной:
CSS Вертикальный разделитель столбцов в меню
У вас может быть стандартное меню в вашем заголовке, в котором просто перечислены ссылки рядом друг с другом с пробелом между ними, и вам нужно добавить какой-то разделитель.Обычно используют вертикальную полосу, также известную как «столб». Добавить вертикальную полосу-разделитель в меню вашего сайта довольно просто с помощью CSS. Я покажу вам два способа сделать это, которые могут привести к небольшим визуальным отличиям. Оба метода, показанные ниже, предполагают, что вы используете структуру меню, в которой каждый пункт меню заключен в тег
, но ее, безусловно, можно изменить для работы с любой структурой меню.
Метод вертикального делителя 1

Этот первый метод использует селектор :: after для вставки элемента после каждого пункта меню.В этом случае мы используем вертикальную полосу или сообщение, но мы могли бы вставить сюда любой символ для использования в качестве разделителя, например точку маркера или тире. В зависимости от места вам может потребоваться добавить дополнительный CSS в приведенный ниже код, чтобы выровнять полосы по вертикали с текстом меню. Мы также используем селектор: last-child, чтобы предотвратить отображение правой панели справа от последнего элемента меню.
# main-menu li :: after { содержание: "|"; float: right; цвет: #fff; } # main-menu li: last-child :: after { дисплей: нет; }
Вертикальный разделитель, метод 2

Второй метод использует правую границу элемента
.Как вы можете видеть в примере, этот стиль границы расширяет всю высоту элемента
, что может привести к его увеличению из-за использования любого заполнения. Здесь мы снова также используем селектор: last-child, чтобы предотвратить отображение правой границы на последнем элементе меню.
No related posts.