Для пользователя или гостей сайте не важно какой сайт по дизайну и как выглядит, если в нем не грамотно сделана навигация. Вашему вниманию неординарная навигация, которая находится в самом низу, что можно применять на отдельных страниц.
Вероятно для кого то это уже не актуально, но посмотрев его функционал, то можно из меню сделать открывающий блок, где уже не будут запросов, а примерно под описание создано.
При открытие сайта или страницы по умолчанию.
После как сделали клик, открывается окно где находятся запросы под ссылками.
Приступаем к установке:
HTML
Код
<nav>
<div>
<ul>
<li><a href="#">ZorNet - Портал 1</a></li>
<li><a href="#">ZorNet - Портал 2</a></li>
<li><a href="#">ZorNet - Портал 3</a></li>
<li><a href="#">ZorNet - Портал 4</a></li>
<li><a href="#">ZorNet - Портал 5</a></li>
<li><a href="#">ZorNet - Портал 6</a></li>
<li><a href="#">ZorNet - Портал 7</a></li>
</ul>
</div>
<h3>☰</h3>
</nav>
CSS
Код
nav {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background-color: white;
text-align: center;
color: #fff;
font-size: 20px;
}
nav a {
color: #565252;
text-decoration: none;
line-height: 38px;
font-size: 17px;
padding: 0 15px;
display: block;
}
nav li {
border-top: 1px solid #e0e0df;
}
nav h3 {
cursor: pointer;
margin: 0;
padding: 0;
line-height: 41px;
height: 38px;
background-color: #1f5880;
}
nav ul {
display: none; padding: 0; margin: 0; text-align: left;
}
nav > ul.nav-toggled {
display: block;
}
nav div {
overflow: auto;
box-shadow: 0 -3px 5px -3px rgba(0,0,0,.2) inset;
}
JS
Код
jQuery(document).ready(function($) {
$('nav h3').click(function() {
$('nav div').addClass('nav-toggled');
$('nav ul').slideToggle();
var windowHeight = $(window).height();
var h3Height = $('nav h3').outerHeight();
var viewportHeight = windowHeight - h3Height;
$('div.nav-toggled').css('max-height', viewportHeight);
});
//adjustHeight();
$(window).resize(function() {
var windowHeight = $(window).height();
var h3Height = $('nav h3').outerHeight();
var viewportHeight = windowHeight - h3Height;
$('div.nav-toggled').css('max-height', viewportHeight);
});
});
Но по умолчанию идет меню, что возможно для отдельной страницы будет отлично. Но под каркас сделать, этот тот же споллер,который открываешь, чтоб прочесть всю информацию.
Демонстрация
