» »

Горизонтальное меню слайд на сайт uCoz

Горизонтальное меню слайд на сайт uCoz

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

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

Хотел сделать с левой стороны мини профиль, но решил поставить логотип. Если вам нужно, то вы можете найти как вход на сайт и под него профиль установить, чтоб он соответственно горизонтальным. Здесь вы можете подключить шрифтовые иконки, которые бы разнообразили стандартный дизайн с уникальным эффектом, но это как предложение к применению.

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

Так по умолчанию будет:

Темное меню на сайт юкоз

Это когда вызовите вторую:

Навигация на сайт с разворотом

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

1. Нужно скачать архив и там будет 3 папки "css, img, js" и их нужно разместить файловом менеджере.

2. Вы просто можете скопировать код с установленными ссылки и поставить и не чего заливать не нужно.

2. Копируем код и устанавливаем вверх сайта.

Код
<link rel="stylesheet" href="http://zornet.ru/Aben/Aben-Abag/fer/reset.css"> <!-- CSS reset -->  
<link rel="stylesheet" href="http://zornet.ru/Aben/Aben-Abag/fer/style.css"> <!-- Resource style -->  
<script src="http://zornet.ru/Aben/Aben-Abag/fer/modernizr.js"></script> <!-- Modernizr -->  
<script src="http://zornet.ru/Aben/Aben-Abag/fer/main.js"></script> <!-- Resource jQuery -->  
  <header>  
  <div class="cd-logo"><a href="#0"><img src="http://zornet.ru/Aben/Aben-Abag/fer/5a1758.png" alt="Logo"></a></div>  
  <nav class="cd-main-nav-wrapper">  
  <ul class="cd-main-nav">  
  <li><a href="http://zornet.ru/">ZORNET.RU</a></li>  
  <li><a href="#0">Проекты</a></li>  
  <li><a href="#0">Блог</a></li>  
  <li><a href="#0">Контакты</a></li>  
  <li>  
  <a href="#0" class="cd-subnav-trigger"><span>Категории</span></a>  
  <ul>  
  <li class="go-back"><a href="http://zornet.ru/">Меню</a></li>  
  <li><a href="#0">Категория 1</a></li>  
  <li><a href="#0">Категория 2</a></li>  
  <li><a href="#0">Категория 3</a></li>  
  <li><a href="#0">Категория 4</a></li>  
  <li><a href="#0">Категория 5</a></li>  
  <li><a href="#0" class="placeholder">Placeholder</a></li>  
  </ul>  
  </li>  
  </ul> <!-- .cd-main-nav -->  
  </nav> <!-- .cd-main-nav-wrapper -->  
  <a href="#0" class="cd-nav-trigger">Меню<span></span></a>  
  </header>


На этом все сохраняем и вам предоставлена демонстрация этого материала, что переходим и смотрим как работает это горизонтальная панель и плюс меню с ним идет.
25.02.2017 Загрузок: 3 Просмотров: 740 Комментарий: (22)

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

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

Комментарий: 22
HTML5
HTML5 25.02.2017 17:131
0
А почему источник не указал?
Kosten
Kosten 25.02.2017 17:162
0
Мне он не известен.
HTML5
HTML5 25.02.2017 17:184
0
А ты его, где взял? Как я понимаю, шапка была создана здесь.
Kosten
Kosten 25.02.2017 17:258
0
Нет, Романыч ее не делал, она давно была сделана.
GHETTOBLASTER
GHETTOBLASTER 25.02.2017 17:173
0
Согласен. Где источник?
Sтранник
Sтранник 25.02.2017 17:185
0
11a 11a 11a
Kosten
Kosten 25.02.2017 17:206
0
Шапка давно по интернету ходит, на счет GHETTOBLASTER, если вы в материале ставите источник, то указываю.
Kosten
Kosten 25.02.2017 17:227
0
Увы, источник, здесь совсем другой, как оказалось этот повторно материал залил а первый раз разместил здесь и там реальный источник.
Kosten
Kosten 25.02.2017 17:309
0
Вопросы еще по источнику будут? Или все таки по теме!
Сопрано
Сопрано 25.02.2017 17:3810
0
Точно не могу сказать, но в первые эту манюшку у boba на сайте увидел и ставил давным давно, и точно не в этом году, как у некоторых только в этом году залит. Но видать с установкой нового шаблона у boba много файлов что то не могу найти.
waak
waak 26.02.2017 11:1516
0
я удалил много файлов с сайта но мне приятно что вы помните
1 2 »
avatar