Красивое меню для uCoz

Красивое меню для uCoz

Красивое выпадающее меню в стиле flat для uCoz.

Установка





1. Загрузить папки с архива в корень сайта 

2. Подключить CSS и JS-скрипты: 

2.1. В CSS
Код
@import '/css/style.css';
@import '/css/reset.css';

2.2. В нижнюю часть сайта:
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
  if( !window.jQuery ) document.write('<script src="/js/jquery-3.0.0.min.js"><\/script>');
</script>
<script src="/js/modernizr-custom.js"></script>
<script src="/js/main.js"></script> <!-- Resource jQuery -->


3. Вставить код в нужное вам место (верхняя часть сайта):

Код

<header class="cd-morph-dropdown">
  <a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>
   
  <nav class="main-nav">
  <ul>
  <li class="has-dropdown gallery" data-content="about">
  <a href="#0">About</a>
  </li>

  <li class="has-dropdown links" data-content="pricing">
  <a href="#0">Pricing</a>
  </li>

  <li class="has-dropdown button" data-content="contact">
  <a href="#0">Contact</a>
  </li>
  </ul>
  </nav>
   
  <div class="morph-dropdown-wrapper">
  <div class="dropdown-list">
  <ul>
  <li id="about" class="dropdown gallery">
  <a href="#0" class="label">About</a>
   
  <div class="content">  
  <ul>
  <li>
  <a href="#0">
  <em>Title here</em>
  <span>A brief description here</span>
  </a>
  </li>

  <li>
  <a href="#0">
  <em>Title here</em>
  <span>A brief description here</span>
  </a>
  </li>

  <li>
  <a href="#0">
  <em>Title here</em>
  <span>A brief description here</span>
  </a>
  </li>

  <li>
  <a href="#0">
  <em>Title here</em>
  <span>A brief description here</span>
  </a>
  </li>
  </ul>
  </div>
  </li>

  <li id="pricing" class="dropdown links">
  <a href="#0" class="label">Pricing</a>

  <div class="content">
  <ul>
  <li>
  <h2>Services</h2>

  <ul class="links-list">
  <li><a href="#0">Logo Design</a></li>
  <li><a href="#0">Branding</a></li>
  <li><a href="#0">Web Design</a></li>
  <li><a href="#0">iOS</a></li>
  <li><a href="#0">Android</a></li>
  <li><a href="#0">HTML/CSS/JS</a></li>
  <li><a href="#0">Packaging</a></li>
  <li><a href="#0">Mobile</a></li>
  <li><a href="#0">UI/UX</a></li>
  <li><a href="#0">Prototyping</a></li>
  </ul>
  </li>

  <li>
  <h2>Projects</h2>

  <ul class="links-list">
  <li><a href="#0">Logo Design</a></li>
  <li><a href="#0">Branding</a></li>
  <li><a href="#0">Web Design</a></li>
  <li><a href="#0">iOS</a></li>
  <li><a href="#0">Android</a></li>
  <li><a href="#0">HTML/CSS/JS</a></li>
  </ul>
  </li>
  </ul>
  </div>
  </li>

  <li id="contact" class="dropdown button">
  <a href="#0" class="label">Contact</a>
   
  <div class="content">  
  <ul class="links-list">
  <li><a href="#0">Link #1</a></li>
  <li><a href="#0">Link #2</a></li>
  <li><a href="#0">Link #3</a></li>
  <li><a href="#0">Link #4</a></li>
  <li><a href="#0">Link #5</a></li>
  <li><a href="#0">Link #6</a></li>
  </ul>

  <a href="#0" class="btn">Get in Touch</a>
  </div>
  </li>
  </ul>

  <div class="bg-layer" aria-hidden="true"></div>
  </div> <!-- dropdown-list -->
  </div> <!-- morph-dropdown-wrapper -->
  </header>


avatar

Вид материалов для uCoz

Вид материалов для uCoz. Простой и красивый вид материалов. Подойдет под любую тематику. Картинка расположилась вверху над текстом. Под заголовком сам текст и дальше кнопка для перехода на страницу (материал). Вид материалов выполнен в минималистичном стиле.

Плавный скроллинг (smoothscroll) для uCoz

Данный скрипт придаст плавности прокрутки вашего сайта. Установка очень простая и не займет больше одной минуты.

Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0