» »

Выдвижное боковое меню при помощи CSS

Выдвижное боковое меню при помощи CSS

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

Современное меню для тематического ресурса, скрытие основной навигации веб-сайта сразу за пределами экрана становится повсеместным шаблоном в гибком веб-дизайне. Все больше и больше можно заметить такой принцип навигаций на разных площадках. Где при нажатии на него выталкивает весь каркас в сторону, что здесь будет с левой стороны. И чтобы открыть скрытое меню навигации, как говорил. вам нужно навести клик на кнопку, где они будут визуально просматриваться.

Плюс в том, что оно просто редактируется, если вам нужно подогнать под свою палитру на ресурсе, то все можно сделать в стилях, как пример в темной гамме.

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

Большой обзор красивых многоуровневых меню

Так установлено по умолчанию;

Выпадающее вертикальное меню

Здесь пользователь вызвал на открытие;

Создание вытягиваемого бокового меню

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

Выезжающее боковое меню jquery вертикальное меню с выпадающим подменю

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

HTML

Проверяя на работоспособность, код прописал вверх в шапку в самый низ.

Код
<html>
  <head>
   
  </head>
  <body><div class="raforehe_adymikacta"></div><nav class="lunderarumsa">
  <ul>
  <li>
  <a href="http://zornet.ru">
  <i class="fa fa-home fa-2x"></i>
  <span class="urewuhise_koltunkers">
Создание сайта uCoz
  </span>
  </a>
   
  </li>
  <li class="minaglittle_sokefingeres">
  <a href="#">
  <i class="fa fa-laptop fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Скрипты для uCoz
  </span>
  </a>
   
  </li>
  <li class="minaglittle_sokefingeres">
  <a href="#">
  <i class="fa fa-list fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Шаблоны для uCoz
  </span>
  </a>
   
  </li>
  <li class="minaglittle_sokefingeres">
  <a href="#">
  <i class="fa fa-folder-open fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Самоучитель HTML
  </span>
  </a>
   
  </li>
  <li>
  <a href="#">
  <i class="fa fa-bar-chart-o fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Ajax окна для uCuz
  </span>
  </a>
  </li>
  <li>
  <a href="#">
  <i class="fa fa-font fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Иконки для форума
  </span>
  </a>
  </li>
  <li>
  <a href="#">
  <i class="fa fa-table fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Меню для сайта uCoz
  </span>
  </a>
  </li>
  <li>
  <a href="#">
  <i class="fa fa-map-marker fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Иконки групп
  </span>
  </a>
  </li>
  <li>
  <a href="#">
  <i class="fa fa-info fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Графика для сайта
  </span>
  </a>
  </li>
  </ul>

  <ul class="zornet_ru_gseran">
  <li>
  <a href="#">
  <i class="fa fa-power-off fa-2x"></i>
  <span class="urewuhise_koltunkers">
  Выйти
  </span>
  </a>
  </li>  
  </ul>
  </nav>
  </body>
  </html>

CSS

Код
.fa-2x {
font-size: 2,7em;
}
.fa {
position: relative;
display: table-cell;
width: 59.7px;
height: 32px;
text-align: center;
vertical-align: middle;
font-size:19.5px;
}

.lunderarumsa:hover,nav.lunderarumsa.expanded {width: 247.5px;overflow:visible;}

.lunderarumsa {background: #f3f1f1;border-right: 1px solid #cac4c4;position:absolute;top:0;bottom:0;height:100%;left:0;width:59.3px;overflow:hidden;-webkit-transition: width .05s cubic-bezier(0, 0, 0.78, 1.01);transition: width .05s cubic-bezier(0, 0, 0.75, 1);-webkit-transform:translateZ(0) scale(1,1);z-index:1000;}

.lunderarumsa>ul {
margin:7px 0;
}

.lunderarumsa li {
position:relative;
display:block;
width:249px;
}

.lunderarumsa li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#405169;
  font-family: arial;
font-size: 13.9px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s cubic-bezier(0, 0, 0.8, 1.01);
transition:all .1s cubic-bezier(0, 0, 0.85, 0.99);
   
}

.lunderarumsa .nav-icon {
position:relative;
display:table-cell;
width:59.3px;
height:38px;
text-align:center;
vertical-align:middle;
font-size:19.5px;
}

.lunderarumsa .urewuhise_koltunkers {
position:relative;
display:table-cell;
vertical-align:middle;
width:187.3px;
  font-family: 'Titillium Web', sans-serif;
}

.lunderarumsa>ul.zornet_ru_gseran {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.lunderarumsa li:hover>a,nav.lunderarumsa li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#efe5e5;
background-color:#355f84;
}
.raforehe_adymikacta {
float: left;
background: #e2dbdb;
width: 99%;
height: 98%;
}

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

Но вы полностью можете скачать текстовой документ, где все представлено в полной сборке.

Демонстрация:
20.01.2018 Загрузок: 1 Просмотров: 496 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar