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

Содержание

Вертикальные разделители в меню на 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

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

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

Как из вертикального меню сделать горизонтальное? — Хабр Q&A

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

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

Горизонтальное меню для сайта на HTML+CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.

HTML-код для горизонтального меню

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

Для создания меню используют теги <ul>, <li> и <a>.

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

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

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Цены</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Стандартные CSS стили для горизонтального меню

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
}

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

Пример каркаса (шаблона) вашего будущего меню

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

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.

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

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

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

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

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

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#30A8E6; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:10px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  border-radius:4px; /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
  background:#1C85BB;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
  
}

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #F36262; /*добавляем бордюр справа*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
}

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню

<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a>
        <ul>
            <li><a href="#">Услуга 1</a></li>
            <li><a href="#">Длинная услуга 2</a></li>
            <li><a href="#">Услуга 3</a></li>
        </ul>
    </li>  
    <li><a href="#">Цены</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

Стили CSS выпадающего меню

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#819A32; /*добавляем фон всему меню*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#819A32; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #677B27; /*добавляем бордюр справа*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
}
     
    /*Стили для скрытого выпадающего меню*/
    li > ul {
        position:absolute;
        top:25px;
        display:none;   
    }
     
    /*Делаем скрытую часть видимой*/
    li:hover > ul {
        display:block; 
        width:250px;  /*Задаем ширину выпадающего меню*/      
    }
   li:hover > ul > li {
        float:none; /*Убираем горизонтальное позиционирование*/
    }

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

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

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Благодарю за внимание.

nz4.ru

двойные бордюры-разделители вертикального меню / 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

html - Горизонтальное меню с наклонными разделителями

Stack Overflow на русском

Loading…

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

Войти

ru.stackoverflow.com

Штирлиц — Сеть печатных салонов в Перми

Css вертикальный разделитель в горизонтальном меню – Вертикальные разделители в горизонтальном меню UL — html