Лучший способ сделать разделители в уль меню
За все годы, которые я развивал, это всегда было спором среди коллег. Каков наилучший способ добавить разделитель к пункту меню в горизонтальном меню (или заголовке панели навигации)? Учитывайте все факторы: совместимость браузера, удобство обслуживания, эстетичность, пространство меню и его влияние в адаптивных размерах и т. Д.
HTML
<!-- MENU 1 -->
<div class="container">
<p class="inline"> Using CSS border</p>
<div class="navbar">
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
<div>
<!-- MENU 2 -->
<div class="container">
<p class="inline"> Using Font Awesome in HTML</p>
<div class="navbar">
<ul class="menu2">
<li><a href="#">Item 1 <i class="fa fa-minus"></i></a></li>
<li><a href="#">Item 2 <i class="fa fa-minus"></i></a></li>
<li><a href="#">Item 3 <i class="fa fa-minus"></i></a></li>
<li><a href="#">Item 4 <i class="fa fa-minus"></i></a></li>
<li><a href="#">Item 5 </a></li>
</ul>
</div>
<div>
<!-- MENU 3 -->
<div class="container">
<p class="inline"> Using Font Awesome in CSS</p>
<div class="navbar">
<ul class="menu3">
<li><a href="#">Item 1 </a></li>
<li><a href="#">Item 2 </a></li>
<li><a href="#">Item 3 </a></li>
<li><a href="#">Item 4 </a></li>
<li><a href="#">Item 5 </a></li>
</ul>
</div>
</div>
<!-- MENU 4 -->
<div class="container">
<p class="inline"> Using Font character | in CSS</p>
<div class="navbar">
<ul class="menu4">
<li><a href="#">Item 1 </a></li>
<li><a href="#">Item 2 </a></li>
<li><a href="#">Item 3 </a></li>
<li><a href="#">Item 4 </a></li>
<li><a href="#">Item 5 </a></li>
</ul>
</div>
</div>
Соответствующий CSS для каждого варианта ниже.
body{
width:100%;
}
.inline{
width: 25%;
float:left;
text-align:right;
}
.navbar{
width:800px;
margin:10px auto;
background:#0067A5;
height: 40px;
}
.menu{
text-align: center;
width: 100%;
padding: 0;
}
.menu li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.menu li a{
color:#fff;
text-transform: uppercase;
text-decoration:none;
border-right: 1px solid #fff;
padding: 0px 20px 0px 0px;
}
.menu li:last-child a{
border:none;
}
/***** MENU 2 ********/
.menu2{
text-align: center;
width: 100%;
padding: 0;
}
.menu2 li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.menu2 li a{
color:#fff;
text-transform: uppercase;
text-decoration:none;
}
.menu2 .fa-minus {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
margin: 0px -10px 0 5px;
}
/***** MENU 3 ********/
.menu3{
text-align: center;
width: 100%;
padding: 0;
}
.menu3 li{
list-style-type: none;
display: inline-block;
padding: 10px;
position:relative;
}
.menu3 li a{
color:#fff;
text-transform: uppercase;
text-decoration:none;
}
.menu3 li a:after{
position:absolute;
font-family: FontAwesome;
top:10px;
left:66px;
content: "\f068";
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.menu3 li:last-child a:after{
content:"";
}
/***** MENU 4 ********/
.menu4{
text-align: center;
width: 100%;
padding: 0;
}
.menu4 li{
list-style-type: none;
display: inline-block;
padding: 10px;
position:relative;
}
.menu4 li a{
color:#fff;
text-transform: uppercase;
text-decoration:none;
}
.menu4 li a:after{
position:absolute;
font-family: Roboto;
top:6px;
left:72px;
content: "|";
}
.menu4 li:last-child a:after{
content:"";
}
Если у вас есть какие-то другие идеи, я открыт, чтобы развлечь их. По моему мнению, ничего из этого на самом деле не "неправильно", все они работают. Однако что будет более практичным? Какие плюсы и минусы (особенно минусы). На мой взгляд, вся концепция делителя - очень ранняя эра веб-дизайна (2000-е годы), но некоторые клиенты все еще предпочитают ее.
3 ответа
Я бы определенно использовал глифы (вариант 4) везде, где мог. я хотел бы использовать :before вместо :after, Вы выигрываете одну версию IE(7 или 8). Всегда убедитесь, что вы используете версию Unicode для глифа, как вы это делали в варианте 3. Если вы просто используете символ клавиатуры, вы должны знать, что он может не распознаваться другими раскладками клавиатуры (кодовыми страницами).
Посмотрев нотацию Unicode, я нашел csstricks очень полезным. Если вы не можете использовать глиф, вы можете создать собственный шрифт. Требуется некоторое время, чтобы все выяснить, но как только вы это сделаете, вы вернетесь к использованию CSS-контента в Юникоде. Следовательно, у вас есть все варианты с глифами (тень, граница, размер шрифта, цвет, дополнительный фон, отзывчивость,...)
dealbreakers:
- вариант 1: текст привязки / отступа не центрируется, что может привести к возникновению проблем с отзывчивостью в дальнейшем. Также высоки шансы, что вам понадобится
:first-childи / или:last-childселектор, который добавляет частичную поддержку браузера снова. - вариант 2: требуется дополнительная семантика, которая укрепляет ваш HTML.
- Вариант 3: похож на мой план резервного копирования, если я не могу использовать глифы. Базовая поддержка восходит к IE8. С некоторым специальным подходом вы можете использовать его для IE7.
К сожалению, на csstricks нет вертикальной линии трубопровода / вертикальной черты. Другой источник говорит мне, что это content: '\00007C',
Поначалу использование границ кажется хорошей идеей, и это так, если есть только один уровень элемента, но как только вы начинаете вкладывать несколько уровней с такими вещами, как якоря и изображения, и получаете эффекты, такие как наведение / фон... вы начинаете получить нежелательные результаты. Из-за этого я использую :after для делителей.
Я бы сделал это так:
<ul class="menu">
<li class="first"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
CSS:
li {
border-left: 1px solid ...;
}
li.first {
border-left: none;
}
Это легко работает во всех браузерах... Надеюсь, это поможет.