ul li бутерброд без js

[Ubhra]

Добрый день.

Подскажите пожалуйста как реализовать аккуратное бутерброд-меню (ul li) без дополнительных подразделов и главное без js.

[AlexZaw]

 <ul class="nav">
     <li class="main-menu">
         <a href="">Main Menu</a>
         <a href="">Products</a>
         <a href="">Store</a>
         <a href="">Forum</a>
     </li>
     <li class="settings">
         <a href="">Settings</a>
         <a href="">Account</a>
         <a href="">Notifications</a>
         <a href="">Display</a>
     </li>
     <li class="link">
         <a href="">Link</a>
         <a href="">Embed</a>
         <a href="">Short link</a>
         <a href="">Full link</a>
     </li>
     <li class="search">
         <a href="">Search</a>
         <a href="">Item 2</a>
         <a href="">Item 3</a>
         <a href="">Item 4</a>
     </li>
 </ul>

body{
    background: url(http://subtlepatterns.com/patterns/subtlenet2.png);
font: 1em tahoma, arial;text-transform: uppercase;
}
.nav{
    list-style: none;padding: 0;margin: 30px;width: 50px;
    opacity: 0.5;transition: opacity .3s ease-in-out;
}
.nav:hover{opacity: 1}
.nav li{
    height: 50px;width: 50px;overflow: hidden;
    transition: width .2s ease-in-out,height .2s ease-in-out .2s
}
.nav li:hover{
    width: 200px;
    height: 174px;   
}
.nav li a{
    display: block;width:200px;height: 40px; line-height: 40px;
    background: #bbb;margin:1px;color: #fff;padding-left: 15px;
    cursor: pointer;text-decoration: none;
    transition: all .2s ease-in-out;
    
}
.nav li a:hover{
    background: #2fc5ff
}
.nav li a:first-child{
    font-size: 1.1em;height: 50px;line-height: 50px;
    position: relative;text-indent: 36px
}
 .nav li a:first-child:before{
     content: '';position: absolute;display: block;
     height: 32px;width: 32px;top:9px;left: 9px
 }
.main-menu a:first-child:before{
    background: url(home.png) center no-repeat;
}
.settings a:first-child:before{
    background: url(settings.png) center no-repeat;
}
.link a:first-child:before{
    background: url(link.png) center no-repeat;
}
.search a:first-child:before{
    background: url(search.png) center no-repeat;
}

 

Edited October 9, 2017 by AlexZaw

[Hasiev]

Какой еще бутерброд? Имеется ввиду адаптивная навигация?

[Ubhra]

AlexZaw немного не то. Мне бы без "подменю", что бы понять принцип.

Hasiev это мобильное меню выпадающее при нажатии на "бутерброд", "гамбургер" значок из трех горизонтальных полос ☰

[AlexZaw]

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

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

Если грубо то вот так:

<ul>Menu<li></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

ul{list-style:none}
li{display:none}
ul:hover li{display:block}

[Ubhra]

Да, но если это меню для мобильника, то наведение курсора не сработает, нужно обработать нажатие, что то вроде onclick, только без js.

[Hasiev]

Начнем с того что саму навигацию можно сделать на чистом css, с помощью медиа-запросов можно реализовать скрытие\отображение меню, и кнопки. То есть по умолчанию кнопка скрыта, а когда вьюпорт становится уже определенной ширины, отображаем кнопку, а обертку с ссылками скрываем .. Обработку нажатия можно реализовать на чекбоксе, то есть кнопка это будет label привязанный к input, если input = checked открываем меню, если нет, - скрываем .. Или наоборот.

Edited October 9, 2017 by Hasiev

[AlexZaw]

тогда через input:

<label for="menu">Menu</label>
<input id="menu" type="checkbox">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

 #menu, ul{display:none}
ul{list-style:none;}
#menu:checked + ul{display:block}