Вашему вниманию горизонтальное меню, что просто адаптированное под мобильные устройства. Если просто, это не означает, что только поверхностно сделано. По сути это простая навигация, которая может отлично смотреться на отдельных страницах. В мануале, который здесь предоставлен, мы создадим полностью отзывчивую навигационную панель с полного нуля, где не будет Javascript, что безусловно идет в плюс, так как совершенно не станет грузить страницы.
Все проверено на работоспособность, включая функций на элементе при наведение курсора.
1.
2.
Приступаем к установке:
HTML
Код
<header>
<div class="sagonu-avigation" id="sagonu-avigation">
<hr class="kolprusa-ramewten">
<a class="navlink first" href="#" title="Главная">Главная</a>
<hr class="kolprusa-ramewten">
<a class="navlink" href="#" title="Скрипты">Скрипты</a>
<hr class="kolprusa-ramewten">
<a class="navlink" href="#" title="Шаблоны">Шаблоны</a>
<hr class="kolprusa-ramewten">
<a class="navlink last" href="#" title="Zorner.Ru">Zorner.Ru</a>
</div>
</header>
CSS
Код
/* Top Navigation */
header {
width: 100%;
min-height: 48px;
margin: 0 0 0% 0;
background: #919191;
/* remove ugly highlighter effects */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0 none;
}
.sagonu-avigation {
width: 92%;
margin: 0 auto;
line-height: 1.28em;
overflow: hidden;
background-color: #187E91;
}
.sagonu-avigation a {
float: left;
display: block;
color: #fff;
/*padding-top: 19px;
padding-bottom: 17px;*/
text-decoration: none;
font-size: 18px;
font-weight: normal;
}
.sagonu-avigation a:hover {
background-color: #fff;
color: #187E91;
}
.sagonu-avigation .icon {
border: 0;
width: 25px;
height: 25px;
}
.navlink {
width: 100%;
padding-top: 19px;
padding-bottom: 17px;
padding-left: 18px;
text-align: left;
}
.kolprusa-ramewten {
margin: 0;
padding: 0;
width: 760px;
border: 1px solid transparent;
}
@media only screen and (min-width: 760px) {
.kolprusa-ramewten {
display: none;
}
.navlink {
margin: 0;
width: 120px;
max-width: 15%;
text-align: center;
padding-left: 6px;
padding-right: 6px
}
header {
background: #187E91;
}
}
Также используется мобильный подход для создания навигационной панели, да именно панели, где можно самостоятельно установить логотип и самому ее доработать до оригинальности.
Демонстрация
