» »

Горизонтальное меню с эффектам категорий


Горизонтальное меню с эффектам категорий

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

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

Горизонтальное меню

Это когда вы переведете, а точнее кликните:

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

Здесь как раз вы можете выставить самые нужные разделы, но и не исключаем замену оттенка цвета.

Установка:

Скачиваем архив и там будет 2 папки и из файловый менеджер закидываем. Потом идем вверх сайта и в самый низ пишем этот код сайта.

Код
<link rel="stylesheet" href="/js/style.css">  
  <script src="/js/main.js"></script>  
  <script src="/js/modernizr.js"></script>  
  <header>  
  <nav class="cd-main-nav-wrapper">  
  <ul class="cd-main-nav">  
  <li><a href="#0">О нас</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="#0">Меню</a></li>  
  <li><a href="#0">zornet.ru 1</a></li>  
  <li><a href="#0">zornet.ru 2</a></li>  
  <li><a href="#0">zornet.ru 3</a></li>  
  <li><a href="#0">zornet.ru 4</a></li>  
  <li><a href="#0">zornet.ru 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">Menu<span></span></a>  
  </header>  
   
  <main class="cd-main-content">  
  <!-- main content here -->  
  </main>


Этот материал адаптирован, и теперь работает на системе, проверен на тестовом портале, все отлично.

Источник: http://boba.ucoz.com/
03.03.2016 Загрузок: 12 Просмотров: 618 Комментарий: (11)

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

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

Комментарий: 10
Сопрано
Сопрано 03.03.2016 18:251
0
Сейчас или ставят простое меню, которое переделанное, просто много возможностей есть на это, или адаптированное, просто они реально удобнее и красивее.
Kosten
Kosten 03.03.2016 18:342
0
Смотря какая адаптация, но мне пришлось пробелы здесь ставить, чтоб выставить его нормально, то сильно просело, возможно что на тестовом сайте, так кодов напихано всяких.
Canon
Canon 03.03.2016 18:514
0
Но есть хорошие а также и плохие, как материал, но это горизонтальное меню, второй цвет не сильно идет.
tsakonter
tsakonter 03.03.2016 18:423
0
В демо версий видел, так для сайта на uCoz удивительно будет, просто не встречал не разу такую навигацию.
Scheme
Scheme 03.03.2016 18:545
0
Интересно, а что то с uCoz вообще адаптируют, или он еще не дотягивает до той планки, чтоб на его внимание обратили.
Kosten
Kosten 04.03.2016 00:546
0
waak, ты про какое меню говоришь, что то понять не могу. А про это, а что оно адаптированное под мобильные устройства. Не знал, думал что делают только тогда, когда оно уже на сайте стоит. Хотя мне известно один вид материала, по которому не скажешь, что адаптирован, так как красиво смотрится и все функций в правой стороне в столбик, а нет проверил, все почти четко, только пару моментов скрыть нужно и нормально будет.
frecsarg
frecsarg 04.03.2016 02:437
0
Не очень мне это горизонтальное меню нравиться, просто может привык к стандартным, ты до этого с лого заливал на сайт, то вот отличное, давно установил и логотип заказал, сделали под фирму.
Kosten
Kosten 04.03.2016 02:488
0
Думаю вы про это горизонтальное меню говорите. То оно отлично и без ошибок сделано и главное понятно, кто соображает, может под меню сделать, хотя оно без них отлично смотрится для главной страницы и логотип там как раз по теме.

Scheme
Scheme 04.03.2016 03:229
0
Что то видать пропустил, а так оно сделано очень даже хорошо, только логотип остался, и место под него как видно нормально выделено, но много не нужно.
Brung
Brung 04.03.2016 03:3210
0
Так бы эти полукруглые обводы, были бы на всех, красивей смотрелось.
avatar