Css вертикальный разделитель в горизонтальном меню: Вертикальные разделители в меню на CSS (2 метода решения)

Содержание

Вертикальные разделители в меню на CSS (2 метода решения)

Если вы реализуете вертикальное меню в одну строку, то, как правило, между пунктами добавляются специальные разделители (как показано на иллюстрации слева). Это позволяет визуально отделить несколько ссылок между собой. Обычно для этих целей используется вертикальная полоска, но могут встречаться и любые другие символы. В статье найдете 2 метода верстки, позволяющих легко и быстро сделать разделители в меню на CSS.

В обоих случаях подразумевается, что ваша навигация создана через конструкцию списка, то есть имеет плюс-минус такое вид:

<ul>
	<limenu-item>Пункт2</a></li>
	<litheCode"><ul>
	<limenu-item>Пункт2</a></li>
	<li1">
ul#top-menu {
    list-style: none;
}

ul#top-menu { list-style: none; }

А также добавляйте всех вывод пунктов в один ряд:

ul#top-menu li {
    display: inline;
}

ul#top-menu li { display: inline; }

Последнюю фишку можно также сделать через float: left; (но тут все зависит от вашей верстки).

Перейдем непосредственно к нашему заданию.

Вариант1

В первом примере будем использовать добавление границы (border) для элементов. Вставляете в стили следующую конструкцию:

#top-menu li {
	border-right: 1px solid #ffffff;
}
#top-menu li:last-child {
	border-right: none
}

#top-menu li { border-right: 1px solid #ffffff; } #top-menu li:last-child { border-right: none }

Во второй части кода селектор :last-child позволяет задать стиль последнему пункту, для которого мы рамку справа убираем. Таким образом, разделители получаются только внутри менюшки.

Вариант2

Этот подход использует селектор ::after для добавления символа после объекта. В коде ниже используется вертикальная черточка «|», но вместо нее можете подставить любой другой символ. Это делает данный метод более гибким.

#top-menu li::after {
	content: "|";
	color: #fff;
}
#top-menu li:last-child::after {
	display: none;
}

#top-menu li::after { content: "|"; color: #fff; } #top-menu li:last-child::after { display: none; }

Здесь тоже нужно добавить строку с last-child дабы скрыть ненужный разделитель в меню после последнего пункта.

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

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

Вертикальные разделители в горизонтальном меню UL



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

Фактический HTML выглядит следующим образом:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Текущий CSS выглядит следующим образом:

. menu li {
  display: inline;
  margin-left: 25px;
  padding-left: 25px;
}

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

Конечный результат должен выглядеть примерно так:

Пункт 1 | Пункт 2 | Пункт 3 | Пункт 4 | Пункт 5

Просто заменив трубу на реальное изображение.

Я пробовал разные способы - я пытался установить свойство list-style-image , но изображение не появлялось. Я также попытался установить разделитель в качестве фона, который на самом деле более или менее работал, за исключением того, что он заставил первый элемент иметь разделитель перед ним.

html css markup
Поделиться Источник Michael L     20 декабря 2009 в 19:12

8 ответов




112

Довольно и просто без каких-либо "having to specify the first element". CSS является более мощным, чем большинство думает (например, first-child:before велик!). Но это, безусловно, самый чистый и правильный способ сделать это, по крайней мере, на мой взгляд.

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

Теперь просто используйте простой неупорядоченный список в HTML, и он заполнит его для вас. HTML должен выглядеть так:

<div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

Результат будет именно таким:

HOME | О НАС | SUPPORT

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

Поделиться David Cahill     15 июня 2012 в 14:14



27

попробуй вот это, искатель.:

li+li { border-left: 1px solid #000000 }

это повлияет только на смежные элементы li

найти здесь

Поделиться vladkras     05 января 2013 в 08:52



11

Это также можно сделать с помощью CSS:pseudo-classes. Поддержка не так широка, и ответ выше дает вам тот же результат, но это чистый CSS-y =)

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

OR:

.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }

См.: http://www.quirksmode. org/css/ первенец.html
Или: http://www.w3schools.com/cssref/sel_firstchild.asp

Поделиться Campbeln     21 декабря 2009 в 00:22


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

    Как и в названии-я хочу растянуть последний тег li в горизонтальном меню до конца меню. Вот мой код: #menu{width:600px; height:50px; background-color:#666; } ul{padding:0; margin:0;} ul li{list-style:none; height:20px;} li{ float:left; background-color:#999; display:block; padding:10px;...

  • Разделители в горизонтальном навигационном списке

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



2

Я думаю, что ваш лучший выстрел-это свойство border-left , которое присваивается каждому из li s, кроме первого (вам придется дать первому класс с именем first и явно удалить границу для этого).

Даже если вы генерируете <li> программно, назначение класса first должно быть простым.

Поделиться Pekka     20 декабря 2009 в 19:19



2

Более простым решением было бы просто добавить #navigation ul li~li { border-left: 1px solid #857D7A; }

Поделиться newbie     16 сентября 2014 в 19:31



1

.last { border-right: none

.last { border-right: none !important; }

Поделиться Scott     11 июля 2010 в 22:19



0

Это прекрасно работает для меня:

NB я использую синтаксис BEM/OCSS SCSS

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}

Поделиться Satu     27 ноября 2017 в 11:36



-2

Я делаю так, как говорит Пекка. Поместите встроенный стиль на каждый <li> :

style="border-right: solid 1px #555; border-left: solid 1px #111;"

Взлетайте первым и последним по мере необходимости.

Поделиться Martin     15 августа 2012 в 13:14


Похожие вопросы:


Использование IMG в списке навигационного меню UL LI

Я хотел бы иметь список меню, используемый в навигации по веб-сайту, где некоторые пункты меню содержат как текст, так и изображение справа от текста: <ul> <li>Nav item 1</li>...


Как провести линии через вертикальные разделители Bootstrap?

Я использую Twitter Bootstrap Мне нужно нарисовать линию меню Вот так: https://www.dropbox.com/с/hl8moeabxxecu8j/раскрывающийся список.png . Поэтому мне нужно провести линии через вертикальные...


Разделительная линия в горизонтальном меню

У меня есть это меню - <div ><ul id=menu> <li class=one><a href=http://www. domain.com>Dashboard</a></li> <li class=two><a href=<?php echo...


Родительское меню и дочернее меню вертикальный разделитель (уникальный, расширенный)

У меня есть следующая навигация по адресу http:/ / www.roydukkey.com . Навигация предназначена для того, чтобы иметь вертикальные разделители между родительским меню и его дочерним меню. Если вы...


Расположение нижнего колонтитула и вертикальные разделители

Просто хочу задать несколько вопросов по этому примеру: Как лучше всего сделать этот макет из 3 столбцов в наши дни? Конечно, там были столы, а теперь есть дивы и т. д. Какой последний величайший...


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

Как и в названии-я хочу растянуть последний тег li в горизонтальном меню до конца меню. Вот мой код: #menu{width:600px; height:50px; background-color:#666; } ul{padding:0; margin:0;} ul...


Разделители в горизонтальном навигационном списке

Моя задача-ввести несколько горизонтальных полос между ссылками в простой несортированный навигационный список для сайта моей компании.

Я пробовал каждый метод, указанный в вертикальных разделителях...


Границы и вертикальные разделители

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


Вертикальные кнопки в горизонтальном навигационном меню

я пытаюсь иметь вертикальные кнопки (текст снизу вверх) в горизонтальной навигационной системе. Кто-нибудь может мне помочь? Я читал что-то о transform: rotate, но не знаю, куда это девать.. HTML...


Как представить вертикальные разделители на горизонтальном `FlatList'?

Я использую новый компонент React Native FlatList . Я использую его для представления горизонтального списка, но при использовании встроенного ItemRenderComponent он представляет разделители под...

Правильная верстка горизонтального меню с разделителями

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

Пишем HTML-код:

<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>

<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>

Теперь CSS:

ul {overflow: hidden; zoom: 1;} li {list-style: none; float: left; border-left: 1px solid #666; padding: 0 20px; margin: 0 1px 0 -1px;}

ul {overflow: hidden; zoom: 1;}

li {list-style: none; float: left; border-left: 1px solid #666; padding: 0 20px; margin: 0 1px 0 -1px;}

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

Код кроссбраузерный: IE6+, Opera 9+, Firefox 2+, Chrome, Safari

Смотрим ДЕМО

CSS-трюк: двойные бордюры-разделители вертикального меню

Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий “akella” Артюх.

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

Возможные способы решения задачи:

  • использовать изображение;
  • использовать только CSS.

В решении необходимо предусмотреть, что:

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

Проблемы при использовании изображения

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

Структура HTML-кода нашего меню максимально проста:


<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Статьи</a></li>
	<li><a href="#">Отзывы</a></li>
	<li><a href="#">Фотографии</a></li>
	<li><a href="#">Вопросы</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

По идее, используя технику Юры Артюха, можно было бы разделитель сделать изображением и поставить его фоном к элементу <li>. Но дело в том, что в списке у каждого пункта еще используется изображение-маркер, и если это изображение ставить фоном тега <a>, тогда возникают следующие проблемы:

  1. Если в меню появится многострочный пункт, тогда меню станет некрасивым (не хватает одинакового отступа слева у текста в каждой строке):

  2. Первую проблему можно было бы решить, сделав ссылку блочный элементом (a {display:block}), однако при этом возникнет другая проблема – если после ссылки добавить текст, то он перенесется на новую строку, а этого также необходимо избежать:

Решение с помощью CSS

Мое решение с использованием чистого CSS позволяет избежать вышеописанных проблем.

CSS-код будет выглядеть нижеследующим образом. Основные для нашей задачи стили я прокомментирую:


ul {
	width: 150px;
	padding: 0 6px;
	background: #F2F7FD url(bg.gif) 0 100% repeat-x;
  border: 1px solid #C0D7FB;
  font-weight: bold;

	overflow: hidden; /* необходимо для того, чтобы
	спрятать верхний бордюр у первого пункта и
	нижний бордюр у последнего пункта */
}
li {
	list-style: none;
  background: url(bullet.gif) 4px 8px no-repeat;
	padding: 5px 0 8px 22px;

  border-top: 1px solid #C0D7FB; /* синяя линия */
  border-bottom: 1px solid #FFF; /* белая линия */
  margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт,
	в результате чего и достигается нужный эффект */
	height: 1%; /* для устранения бага в IE6 и IE7 */
}

Для наглядности вы можете посмотреть на живой пример.

Вот, собственно, и все. Решение кроссбраузерное, надеюсь, кому-нибудь пригодится.

* * *

Для качественного сайта с большой аудиторией лучше использовать VPS хостинг (VPS или VDS – это виртуальный выделенный сервер), который, по сравнению с обычным виртуальным хостингом, имеет большие преимущества в плане ресурсов и программной части.

Разделители в меню

Разделители в меню

05 Nov, 2006

Довольно часто на практике встречаются меню с разделителями - например:

О том как сделать такое меню с минимумом правильного HTML кода и пойдет дальше речь.

HTML

Очевидным HTML для подобных конструкций служит ненумерованный список UL, вот например такой:
  1. <ul>
  2. <li><a href="#">Главная</a></li>
  3. <li><a href="#">Новости</a></li>
  4. <li><a href="#">Каталог</a></li>
  5. <li><a href="#">Рейтинг</a></li>
  6. </ul>
Конечно если бы мы тупо и цинично рубили бабло © мы могли бы написать что то вроде:
  1. <a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">Каталог</a> | <a href="#">Рейтинг</a>
Но по причине совсем не циничной рубки (© Flack), а так же истокам проблемы с этим меню, и вдобавок семантики кода так лучше не поступать.

Как обычно делалось

Обычно для получения результата - то есть меню с вертикальными разделителями, приходилось задавать левую (или правую) границу для каждого элемента(здесь я опускаю код позиционирующий меню, он есть в примерах):
  1. #nav li{border-left:1px solid #000}
Таким образом мы получали что то вроде: Не совсем то что нам надо, так как разделители на то и разделители что бы быть только между пунктами, а они у нас сейчас находятся просто слева от каждого пункта. Ранее эта проблема для меня решалась вставкой класса для первого элемента:
  1. <ul>
  2. <li><a href="#">Главная</a></li>
  3. ...
И потом добавлением правила:
  1. #nav li.first{border:none}
И все вроде бы работает как надо. Но. Оба эти подхода(с и с текстовыми разделителями "|") требуют от нас несимметричной генерации элементов - надо различать первый и все остальные LI.

Проблема(лень)

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

Решение

Идея простая как 5 копеек. Вот весь код:
  1. #nav{
  2. overflow:hidden;/* что бы UL растянулся до содержимых float во всех броузерах кроме ИЕ, а так же для нашего "обрезания"*/
  3. width:100%;/* что бы UL растянулся до содержимого в ИЕ, к самому трюку имеет косвенное отношение*/
  4. }
  5. #nav li{
  6. margin-left:-1px;/*сдвигаем все элементы влево*/
  7. }
Суть такова. Задаем overflow:hidden для UL - таким образом все что выходит за пределы блока UL отображаться не будет. Затем задаем margin-left:-1px для всех элементов списка, то есть первый элемент выйдет на 1 пиксель за пределы элемента UL, но это как раз и будет тот лишний злополучный первый разделитель! Все же остальные разделители останутся в деле - так как не выйдут за пределы блока. А первый будет скрыт. В результате получим: Смотреть пример

Идея

Эта же идея только с заменой на border-top и margin-top:-1px сработает и для таких меню: Смотреть пример Более того такой прием можно применять и для графических разделителей. Будь они даже потолще одного пиксела - просто придётся задавать больший отрицателый отступ для элементов списка. Таким образом это работает и для разделителей в виде картинки.

В конце

Хотя прием и довольно узкоприменимый, но мне сэкономил время, да и идея мне понравилась. Тестировалось и работает во всех моих виндошных браузерах(IE5-7, FF, Opera). Думаю работает везде. Буду рад услышать Ваше мнение или приемы которые вы используете!

Создание меню html / css

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul. В каждый пункт li вкладывается гиперссылка a.

Можно создавать меню и на основе блоков div, таблиц table или списков определений dl.
Но традиционной является конструкция ul.

Код простейшего меню будет выглядеть так:

<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>
×
Примечание

В процессе разработки удобно указывать адрес гиперссылки - #/. Во-первых, она никуда не ведет, а во-вторых - не происходит перехода к началу страницы.

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки - только абсолютный. (Если забыли - смотрите Абсобютные и относительные ссылки).

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

Поэтому предварительно нужно создать файл, например my-menu.css, и подключить его. 

<!-- Подключение таблицы стилей -->
 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>Создание меню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
. ..
</body>
</html>

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

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

/* Не желательно! */
ul li a {color: #f00;}

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

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

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

Каким тегам нужно присваивать классы

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

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

<nav>
  <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>
</nav>

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul, а класс . my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu.

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

×
Внимание!

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

Имеено по-этому я выбрал класс .my_menu, так как на сайте уже есть класс .menu со своими стилями. 

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

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

Например, за цветовое оформление у нас отвечает класс .menu_color

/* === Группа цветового оформления === */
 
/* Цвет фона менд */
.menu_color {
  background: gray;
}
/* Оформление пункта меню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Группа разметки основного меню === */ 
 
/* Сброс и установка стилей по умолчанию */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Разметка для пункта меню */
. my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

Т.е. все стили, определяющие цветовое оформление того или иного элемента меню, должны быть привязаны к классу .menu_color, а стили отвечающие за разметку - соответственно .my_menu.

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

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

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

Исходный html-код меню будет выглядеть так:

<nav>
  <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>
</nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li. active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor: default;
}

Цветовое оформление

×
Примечание

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

/* === Цветовое оформление menu_color === */
.menu_color {
  background:#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* Подсветка пункта при наведении */
. menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

Пояснения:

  • Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
  • Использование прозрачности при задании цвета фона - background: rgba(0, 0, 0, 0.1). Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно. 
×
Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными - черный 15% прозрачности и белый 10% соответственно.

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

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

Изначально любое меню нужно создавать как многоуровневое!

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

HTML-код 2-х уровневого меню:

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul>
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

Добавлены классы li.parent - родительский тег, содержащий подменю, и ul.sub-menu - вложенный список выпадающего меню.

Цветовое оформление

/* Оформление sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
. menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* Добавляем отступ для подпунктов */
}

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent. (Именно для этого при сбросе и установке для него было задано position: relative;)

/*Общие*/
.my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
} 

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет). 

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}
×
Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам - нужно этот класс добавить к тегу nav.menu_color.sidebar_left.

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

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

Переопределение существующих стилей:

/* Оформление пункта */
. menu_color >  ul >  li >  a {
  color: #999;  
  background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color: #555;
   background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 

А вот с плавным появленем подменю проблема ...

Дело в том, что использовать display: none; для того чтобы скрыть подменю нельзя - анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display: block; /* переопределено */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
 
  /* Добавить */
  opacity: 0;
  -webkit-transition: opacity . 5s, top .7s;
  -moz-transition: opacity .5s, top .7s;
  -o-transition: opacity .5s, top .7s;
  transition: opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left: -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display: block;
  top: 4px;
 
  /* Добавить */
  opacity: 1;
}

Раздвижное меню-аккордеон 

×
Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover.

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

Аккордеон должен раскрываться по click, а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS...

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

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu. Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>
/* === Группировка классов === */
 
/* Убираем маркеры и отступы */
.my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* Подсветка пункта при наведении */
. menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
 
 

После этого добавим стили, для закрытого и раскрытого аккордеона:

/* === Закрытый ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Скрываем выпадающее подменю */
  transition: max-height 1s;  /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* Добавляем отступ для подпунктов */
}

Примечание.
Почему было использовано свойство max-height, а не height? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto - анимация не срабатывает.

Горизонтальное меню

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

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

В итоге наше меню будет выглядеть так:

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

<nav>
  <ul>
    <li><a href="#/">punkt 1</a></li>
    <li><a href="#/">dropdown</a>
      <div>
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Разметка

/* === Разметка основного меню === */
. hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}
Что было сделано:
  1. Сброс стилей по умолчанию для тега ul
  2. Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
  3. Установка отступов для пунктов меню
Пояснения:

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

Разметка выпадающего меню

/* === Разметка выпадающего подменю === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
. dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ от основного меню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* если не очень длинные заголовки */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим некоторые особенности:

  • Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu. Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
    Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет ... Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
  • Для подпункт определено правило white-space: nowrap. Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
    Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li, которым присвоено float: left, выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он "схлопывается" и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Решение

/* Предотвращаем схлопывание */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

/* === Оформление меню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Здесь все достаточно очевидно. Единственное, cursor: default, следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

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

/* === Оформление выпадающего подменю === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

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

Дополнительно

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

/* Дополнительно. Разделители пунктов + маркер */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "\25BC ";
 font-size: 10px;
 vertical-align: top;
}

Здесь вы можете скачать Код примера горизонтального меню

Как убрать последний разделитель у горизонтального меню

Я уверен, что многие из вас тоже задавались вопросом: как убрать последний разделитель у горизонтального меню. Обычно в CSS для разделения пунктов горизонтального меню задают правый вертикальный бордер толщиной в 1 пиксель:

. nav li {
border-right: 1px solid #333;
}

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

Чтобы от него избавиться, можно применить парочку трюков CSS.

Убрать последний разделитель у горизонтального меню | Вариант 1

В правилах для пунктов списка li добавим вот такую фишку:

.nav li {
border-right: 1px solid #333;
}
.nav li:last-child {
border-right: none;
}

Здесь мы применили специальный селектор :last-child для отмены стиля, ранее объявленного в родительском селекторе.

Совсем другое дело:

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

Убрать последний разделитель у горизонтального меню | Вариант 2

В правилах для пунктов списка li запишем следующее:

. nav li:not(:last-child) {
border-right: 1px solid #333;
}

Здесь мы применили псевдо-класс :not() и сократили запись до одного объявления вместо двух. Такая запись говорит: применить правый бордер для всех пунктов, кроме последнего. Красиво и лаконично!

Ну и на закуску. Вы наверное уже и сами догадались, что раз есть псевдокласс :last-child, то должен быть и противоположный — :first-child. Все верно. Этот псевдокласс задает стилевое оформление первому дочернему элементу своего родителя. Иногда удобнее пользоваться им. Например, если у вас в меню первым стоит не текстовая ссылка, а картинка:

Здесь применено правило:

#header_menu li:first-child {
border-left: #E5E5E5 solid 1px;;
}

Enjoy! :{)

Как мне добавить вертикальную линию в мой пункт меню в html / css

Как добавить вертикальную линию в мой пункт меню в html / css - qaru

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

Спросил

Просмотрено 13к раз

На этот вопрос уже есть ответы здесь :

Закрыт 5 лет назад.

Я пытаюсь иметь такую ​​навигацию по меню:

начало огня | наши огни | прошлые пожары

Я хочу, чтобы пункты меню были разделены вертикальными линиями, а не пробелами

  
  

CSS находится здесь:

 . standard-nav {
    стиль списка: нет;
    отступ: 0;
    маржа: 0;
    маржа сверху: 25 пикселей;
    float: right;
}
.standard-nav li {
    дисплей: встроенный блок;
    плыть налево;
    маржа слева: 10 пикселей;
    маржа справа: 10 пикселей;
}
.standard-nav li> a {
    цвет: #ffffff;
    семейство шрифтов: "Vegur Light";
    размер шрифта: 16 пикселей;
    font-weight: 400;
    межбуквенный интервал: 0,15 мкм;
    высота строки: 19 пикселей;
    / * преобразование текста: верхний регистр; * /
}
  
рянюю

5,96 золотых знаков4545 серебряных знаков4747 бронзовых знаков

Создан 30 июн.

Билле Саркози

5311 золотой знак33 серебряных знака99 бронзовых знаков

1

Вы можете использовать псевдоэлемент : после рядом с : not (: last-child) , чтобы не применять это к последнему элементу:

  ul li {
  дисплей: встроенный блок;
}

ul li: not (: last-child): after {
  содержание: "|";
  }  
    

Для поддержки IE8 обратная логика правила css:

  ul li {
  дисплей: встроенный блок;
}
ul li: not (: first-child): before {
  содержание: "|";
}  
    

Список литературы

: после

: не

: последний ребенок