« Большое выпадающее меню для интернет-магазина »

Описание материала:

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

Установка:
1. Скачиваем архив с нашего сайта и загружаем папки js и css в корень сайта
2. Вставьте это в head страницы.

Код

  <script src="/js/jquery-2.1.1.js"></script>
  <script src="/js/jquery.menu-aim.js"></script>  
  <script src="/js/main.js"></script>

  <script src="/_demo/demo.js"></script>
  <link rel="stylesheet" href="/css/reset.css">  
  <link rel="stylesheet" href="/css/style.css">  
  <script src="/js/modernizr.js"></script>

3. Вставьте этот html код где вы хотите видеть кнопку вызова меню.
Код

<div class="cd-dropdown-wrapper">
  <a class="cd-dropdown-trigger" href="#0">Выпадающее меню</a>
  <nav class="cd-dropdown">
  <h2>Заголовок</h2>
  <a href="#0" class="cd-close">Закрыть</a>
  <ul class="cd-dropdown-content">
  <li>
  <form class="cd-search">
  <input type="search" placeholder="Поиск...">
  </form>
  </li>
  <li class="has-children">
  <a href="#">Одежда</a>

  <ul class="cd-secondary-dropdown is-hidden">
  <li class="go-back"><a href="#0">Меню</a></li>
  <li class="see-all"><a href="#">Вся одежда</a></li>
  <li class="has-children">
  <a href="#">Аксессуары</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Одежда</a></li>
  <li class="see-all"><a href="#">Все аксессуары</a></li>
  <li class="has-children">
  <a href="#0">Шапочки</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Аксессуары</a></li>
  <li class="see-all"><a href="#">Все шапочки</a></li>
  <li><a href="#">Головные уборы</a></li>
  <li><a href="#">Подарки</a></li>
  <li><a href="#">Шарфы</a></li>
  </ul>
  </li>
  <li class="has-children">
  <a href="#0">Головные уборы</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Аксессуары</a></li>
  <li class="see-all"><a href="#">Все головные уборы</a></li>
  <li><a href="#">Шапочки</a></li>
  <li><a href="#">Шапки</a></li>
  <li><a href="#">Головные уборы</a></li>
  </ul>
  </li>
  <li><a href="#">Очки</a></li>
  <li><a href="#">Перчатки</a></li>
  <li><a href="#">Ювелирные изделия</a></li>
  <li><a href="#">Шарфы</a></li>
  </ul>
  </li>

  <li class="has-children">
  <a href="#">Верхняя одежда</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Одежда</a></li>
  <li class="see-all"><a href="#">Вся верхняя одежда</a></li>
  <li><a href="#">Повседневная брюки</a></li>
  <li class="has-children">
  <a href="#0">Джинсы</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Верхняя одежда</a></li>
  <li class="see-all"><a href="#">Все джинсы</a></li>
  <li><a href="#">Рваные</a></li>
  <li><a href="#">Узкие</a></li>
  <li><a href="#">Зауженные</a></li>
  <li><a href="#">Прямые</a></li>
  </ul>
  </li>
  <li><a href="#0">Леггинсы</a></li>
  <li><a href="#0">Шорты</a></li>
  </ul>
  </li>

  <li class="has-children">
  <a href="#">Куртки</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Одежда</a></li>
  <li class="see-all"><a href="#">Все куртки</a></li>
  <li><a href="#">Блейзеры</a></li>
  <li><a href="#">Куртки бомбер</a></li>
  <li><a href="#">Куртки деним</a></li>
  <li><a href="#">Ветровки</a></li>
  <li><a href="#">Кожаные куртки</a></li>
  <li><a href="#">Парки</a></li>
  </ul>
  </li>

  <li class="has-children">
  <a href="#">Верх</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Одежда</a></li>
  <li class="see-all"><a href="#">Весь верх</a></li>
  <li><a href="#">Кардиганы</a></li>
  <li><a href="#">Пальто</a></li>
  <li><a href="#">Футболки поло</a></li>
  <li><a href="#">Футболки</a></li>
  <li class="has-children">
  <a href="#0">Рубашки</a>

  <ul class="is-hidden">
  <li class="go-back"><a href="#0">Верх</a></li>
  <li class="see-all"><a href="#">Все рубашки</a></li>
  <li><a href="#">Обычные</a></li>
  <li><a href="#">С принтом</a></li>
  <li><a href="#">В полоску</a></li>
  <li><a href="#">С длинными рукавами</a></li>
  </ul>
  </li>
  <li><a href="#">Жилеты</a></li>
  </ul>
  </li>
  </ul> <!-- .cd-secondary-dropdown -->
  </li> <!-- .has-children -->

  <li class="has-children">
  <a href="#">Галерея</a>

  <ul class="cd-dropdown-gallery is-hidden">
  <li class="go-back"><a href="#0">Меню</a></li>
  <li class="see-all"><a href="#">Перейти в галерею</a></li>
  <li>
  <a class="cd-dropdown-item" href="#">
  <img src="http://internetempire.ru/mydesign.png" alt="Изображение товара">
  <h3>Продукт #1</h3>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item" href="#">
  <img src="http://internetempire.ru/mydesign.png" alt="Изображение товара">
  <h3>Продукт #2</h3>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item" href="#">
  <img src="http://internetempire.ru/mydesign.png" alt="Изображение товара">
  <h3>Продукт #3</h3>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item" href="#">
  <img src="http://internetempire.ru/mydesign.png" alt="Изображение товара">
  <h3>Продукт #4</h3>
  </a>
  </li>
  </ul> <!-- .cd-dropdown-gallery -->
  </li> <!-- .has-children -->

  <li class="has-children">
  <a href="#">Услуги</a>
  <ul class="cd-dropdown-icons is-hidden">
  <li class="go-back"><a href="#0">Меню</a></li>
  <li class="see-all"><a href="#">Перейти в услуги</a></li>
  <li>
  <a class="cd-dropdown-item item-1" href="#">
  <h3>Услуга #1</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-2" href="#">
  <h3>Услуга #2</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-3" href="#">
  <h3>Услуга #3</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-4" href="#">
  <h3>Услуга #4</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-5" href="#">
  <h3>Услуга #5</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-6" href="#">
  <h3>Услуга #6</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-7" href="#">
  <h3>Услуга #7</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-8" href="#">
  <h3>Услуга #8</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-9" href="#">
  <h3>Услуга #9</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-10" href="#">
  <h3>Услуга #10</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-11" href="#">
  <h3>Услуга #11</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  <li>
  <a class="cd-dropdown-item item-12" href="#">
  <h3>Услуга #12</h3>
  <p>Это описание услуги</p>
  </a>
  </li>

  </ul> <!-- .cd-dropdown-icons -->
  </li> <!-- .has-children -->

  <li class="cd-divider">Разделитель</li>

  <li><a href="#">Страница 1</a></li>
  <li><a href="#">Страница 2</a></li>
  <li><a href="#">Страница 3</a></li>
  </ul>  
  </nav>  
  </div>

$IMAGE2$


Скачать ( Размер архива 390.0 Kb )

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

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: maksim | Категория: Меню и навигация | Просмотров: 717 | Загрузок: 29


Поделиться в соц. сетях:
Комментариев к материалу: 1
Ох ну и меню, молодцы.
1
avatar