Css вертикальный разделитель в горизонтальном меню – Как создать разделители горизонтального меню на CSS

Содержание

Как создать разделители горизонтального меню на CSS

Stack Overflow на русском

Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
Справка Подробные ответы на любые возможные вопросы
Мета Обсудить принципы работы и политику сайта
О нас Узнать больше о компании Stack Overflow
Бизнес Узнать больше о поиске разработчиков или рекламе на сайте

Войти Регистрация
текущее сообщество
- Stack Overflow на русском справка чат

ru.stackoverflow.com

Вертикальные разделители в меню на 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 для меню/пунктов, поэтому следует подставлять данный код с поправкой на это. Возможно, придется указать отступы влево/вправо для того чтобы вертикальная полоска располагалась по центру.

tods-blog.com.ua

двойные бордюры-разделители вертикального меню / Dimox.name

Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий «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>, тогда возникают следующие проблемы:

Если в меню появится многострочный пункт, тогда меню станет некрасивым (не хватает одинакового отступа слева у текста в каждой строке):
Первую проблему можно было бы решить, сделав ссылку блочный элементом (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 — это виртуальный выделенный сервер), который, по сравнению с обычным виртуальным хостингом, имеет большие преимущества в плане ресурсов и программной части.

dimox.name

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

Я уверен, что многие из вас тоже задавались вопросом: как убрать последний разделитель у горизонтального меню. Обычно в 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! :{)

Автор: Игорь Квентор
www.websovet.com

www.websovet.com

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

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

Пишем 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

Смотрим ДЕМО

neolot.com

Как из вертикального меню сделать горизонтальное? — Toster.ru

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div>
     <ul>
         <li><a href="#">punkt1</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt2</a></li>
         <li><a href="#">punkt3</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
         <li><a href="#">punkt4</a></li>
         <li><a href="#">punkt5</a>
         <ul>
             <li><a href="#">podpunkt1</a></li>
             <li><a href="#">podpunkt2</a></li>
             <li><a href="#">podpunkt3</a></li>
             <li><a href="#">podpunkt4</a></li>
             <li><a href="#">podpunkt5</a></li>
         </ul>
         </li>
     </ul>
  </div>
    
</body>
</html>
<code lang="css">
body{
    margin: 0;
    padding: 0;
    font: 1em/1.4em sans-serif;
}


.side{
    width: 200px;
    margin: 30px;
}

a{text-decoration: none;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }


/*внешний вид меню*/

.menu a{
    background: #3d3d3d;
    color: #fff;
    padding: 10px;
    display: block;
    width: 200px;
    border-bottom: 1px solid #7d7d7d;
    transition: 0.4s all;
    
}

.menu a:hover{
    background: #FF009D;
    color: #fff ;
    padding: 10px 0 20px 20px;   
}

/*всплывающее меню*/

.menu_list{
    position: relative;
}

.menu_drop{
    position: absolute;
    width: 100%;
    left: 110%;
    opacity: 0;
    top: 0;
}

.menu_list:hover .menu_drop{
    opacity: 1;
}
</code>

toster.ru

cssing » Архив » Разделители в меню

5 November, 2006

XHTML/CSS

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

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

HTML

Очевидным HTML для подобных конструкций служит ненумерованный список UL, вот например такой:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Каталог</a></li>
<li><a href="#">Рейтинг</a></li>
</ul>

<a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">Каталог</a> | <a href="#">Рейтинг</a>

Но по причине совсем не циничной рубки (© Flack), а так же истокам проблемы с этим меню, и вдобавок семантики кода так лучше не поступать.

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

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

#nav li{border-left:1px solid #000}

Таким образом мы получали что то вроде:

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

<ul>
<li><a href="#">Главная</a></li>
…

И потом добавлением правила:

#nav li.first{border:none}

И все вроде бы работает как надо. Но. Оба эти подхода(с class=”first” и с текстовыми разделителями “|”) требуют от нас несимметричной генерации элементов – надо различать первый и все остальные LI.

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

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

Решение

Идея простая как 5 копеек. Вот весь код:

#nav{
overflow:hidden;/* что бы UL растянулся до содержимых float во всех броузерах кроме ИЕ, а так же для нашего “обрезания”*/
width:100%;/* что бы UL растянулся до содержимого в ИЕ, к самому трюку имеет косвенное отношение*/
}
#nav li{
margin-left:-1px;/*сдвигаем все элементы влево*/
}

Суть такова. Задаем overflow:hidden для UL – таким образом все что выходит за пределы блока UL отображаться не будет. Затем задаем margin-left:-1px для всех элементов списка, то есть первый элемент выйдет на 1 пиксель за пределы элемента UL, но это как раз и будет тот лишний злополучный первый разделитель! Все же остальные разделители останутся в деле – так как не выйдут за пределы блока. А первый будет скрыт. В результате получим:

Смотреть пример

Идея

Эта же идея только с заменой на border-top и margin-top:-1px сработает и для таких меню:

Смотреть пример
Более того такой прием можно применять и для графических разделителей. Будь они даже потолще одного пиксела – просто придётся задавать больший отрицателый отступ для элементов списка. Таким образом это работает и для разделителей в виде картинки.

В конце

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

Буду рад услышать Ваше мнение или приемы которые вы используете!