• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Мобильная навигация внизу сайта на JS + CSS (Основы мобильной навигации с использованием CSS)
Мобильная навигация внизу сайта на JS + CSS
Kosten
Дата: Среда, 2018-12-19, 00:06 | Сообщение 1
Администраторы
Сообщений:20287
Награды: 56


Для пользователя или гостей сайте не важно какой сайт по дизайну и как выглядит, если в нем не грамотно сделана навигация. Вашему вниманию неординарная навигация, которая находится в самом низу, что можно применять на отдельных страниц.

Вероятно для кого то это уже не актуально, но посмотрев его функционал, то можно из меню сделать открывающий блок, где уже не будут запросов, а примерно под описание создано.

При открытие сайта или страницы по умолчанию.



После как сделали клик, открывается окно где находятся запросы под ссылками.



Приступаем к установке:

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);
   });

});

Но по умолчанию идет меню, что возможно для отдельной страницы будет отлично. Но под каркас сделать, этот тот же споллер,который открываешь, чтоб прочесть всю информацию.

Демонстрация
Прикрепления: 5390062.png(1.4 Kb) · 9103174.png(15.1 Kb) · mobile-navigati.zip(3.1 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Мобильная навигация внизу сайта на JS + CSS (Основы мобильной навигации с использованием CSS)
  • Страница 1 из 1
  • 1
Поиск: