Горизонтальное меню слайд на сайт uCoz - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


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

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

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

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

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



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



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

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

Код
<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>


На этом все сохраняем и вам предоставлена демонстрация этого материала, что переходим и смотрим как работает это горизонтальная панель и плюс меню с ним идет.

Важно!

При копировании материала указывать ссылку на источник.

- 503
- 25-Февраля-2017
- 2
- 0
Материал разместил:

Похожий материал
Статьи сайта