В этой статье представлен материал из категорий навигация, а точнее как сделать вертикальное фиксированное меню с помощью HTML и CSS. На некоторых веб-сайтах меню всегда отображается слева фиксированное меню. Здесь аналогично идет, но отличается от других. Так как здесь можно выставить ключевые слова и под них создать открытие окна с описание или ссылками на переход. Это отличное решение для современного дизайна, который устанавливаем вертикально фиксированное меню.
В этом примере ниже вы увидите, как сделать вертикальное меню слева:
HTML
Код
<div id="akigesdan">
<ul id="menu">
<li><a class="nasedamugas" href="#">Главная</a></li>
<ul>
<li><a href="#">Projects</a>
</li>
</ul>
<li><a class="menu selected"href="#">Шаблоны</a>
<ul>
<font style="float:left; ">
<br><br>
ZorNet.Ru <br><br>
Можете увидеть больше от этого пользовател<br><br>
Исправлено вертикальное меню слев <br><br>
CSS и Javascript найти оригинальный код на Codepen<br><br>
</font>
</li>
</ul>
</li>
<li><a href="#">Дизайн</a></li>
</ul>
</div>
CSS
Код
background:#f8f8f8 url(http://www.leeonconsultancy.com/images/audrina%20web%20background.jpg) repeat-x;
}
/* stil sıfırlama işlemi */
#akigesdan ul, #akigesdan ul li{
margin:0;
padding:0;
list-style:none;
}
#menu{
background:#272727;
width:110px;
height:100%;
position:fixed;
border-right:4px #a00 solid;
}
#akigesdan ul li{font: 14.5px arial ;
background-color:#272727;
width:110px;
cursor:pointer;
text-align:center;
}
#akigesdan ul li:hover {
}
#akigesdan ul li a{
padding-top:20px;
padding-bottom:20px;
color:#555555;
display:inline-block;
text-decoration:none;
}
#akigesdan ul li a.selected{
color:#ddd;
}
#akigesdan ul li a:hover{
color:#a00;
transition:color 0.3s ease;
-o-transition:color 0.3s ease;
-webkit-transition:color 0.3s ease;
-moz-transition:color 0.3s ease;
}
#akigesdanul li a:hover:after {
content: " ";
display: inline-block;
border-bottom: 0.8em solid transparent;
border-left: 0.8em solid transparent;
border-right: 0.8em solid #a00;
border-top: 0.8em solid transparent;
height: 0px;
margin-top: -2px;
position: absolute;
left: 91px;
width: 1px;
transition:border-right 1s ease;
-o-transition:border-right 1s ease;
-webkit-transition:border-right 1s ease;
-moz-transition:border-right 1s ease;
}
#akigesdan ul li a.nasedamugas:hover:after {
border-right: 0.8em solid transparent;
transition:none;
-o-transition:none;
-webkit-transition:none;
-moz-transition:none;
}
#akigesdan ul li ul{
position:absolute;
display:block;
visibility:hidden;
height:100%;
background-color:transaprent;
width:0px;
color:#fff;
}
#akigesdanul li ul li{
color:#fff;
background:transparent;
padding:15px;
}
#akigesdan ul li:hover ul{
left:110px;
top:0px;
display:block;
visibility:visible;
width:300px;
background-color:#a00;
transition:background-color 0.5s ease;
-o-transition:background-color 0.5s ease;
-webkit-transition:background-color 0.5s ease;
-moz-transition:background-color 0.5s ease;
}
JS
Код
$(document).ready(function () {
$('ul > li > ul').css('height', $(window).height() + 'px');
$('#menu').css('height', $(window).height() + 'px');
});
Демонстрация
