Для того, чтоб гости и пользователи быстро находили на сайте информацию, то для этого создана навигация. В нашем случай идет горизонтальное меню в темном оттенке цвета, что подходит на все мобильные гаджет и большие мониторы, где все корректно показывает.
Как известно, что что простая и удобная навигация является одной из наиболее важных частей на интернет ресурсе. Давайте рассмотрим наиболее распространенную технику создания простого меню навигации, где основная идея использования HTML и CSS, а точнее на чистой стилистике выполнен дизайн и функционал.
Так вот будет смотреться на смартфоне, где при клике снизу появятся все ключевые запросы для перехода на другой материал.
HTML
Код
<header>
<a class="logo" href="http://zornet.ru">ZORNET.RU</a>
<input id="nav" type="checkbox">
<label for="nav"></label>
<nav>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>
</header>
CSS
Код
header {
overflow: hidden;
background: #222;
}
header a, header label {
display: block;
padding: 20px;
color: #fff;
text-decoration: none;
line-height: 20px;
}
header a:hover, header label:hover { color: #aaa; }
header label {
float: right;
padding: 18px 20px;
cursor: pointer;
}
header label:after {
content: "\2261";
font-size: 1.8em;
}
.logo {
float: left;
font-weight: bold;
font-size: 1.5em;
}
nav {
float: right;
max-height: 0;
width: 100%;
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-o-transition: max-height 0.3s;
transition: max-height 0.3s;
}
nav ul {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
nav li {
display: block;
text-align: center;
}
nav a {
padding: 10px;
width: 100%;
}
#nav { display: none; }
#nav:checked ~ nav {
max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}
@media only screen and (min-width: 700px) {
header label { display: none; }
nav {
width: auto;
max-height: none;
}
nav ul {
padding: 0;
padding-right: 10px;
}
nav li {
display: inline-block;
text-align: left;
}
header nav a {
display: inline-block;
padding: 20px 10px;
width: auto;
}
}
По сути, эта техника перемещается с использованием списков HTML. Мы будем использовать простые списки HTML, чтобы создать простой и легкий список ссылок. В итоге мы получим простое, но привлекательное адаптивное меню навигации.
Демонстрация
