Автор

01 08.2019
CSS и jQuery Вторичное Расширяемое Меню

CSS и jQuery Вторичное Расширяемое Меню


Эта простая адаптивная навигация позволяет пользователям сосредоточиться на нескольких важных пунктах меню, в то время как вся навигация по-прежнему доступна, всего одним щелчком мыши.

 

ДЕМО
ИСХОДНИКИ

 

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

Преимущества: вторичная навигация скрыта под основным содержанием страницы; щелчок по значку меню позволяет плавно переводить содержимое страницы, открывая скрытую навигацию. Нравится!

Создание структуры

Мы вставили основную навигацию в элемент <header> и использовали элемент <main>, чтобы обернуть весь наш контент. Мы вставили вторичную навигацию за пределы элемента <main>, чтобы она не влияла на CSS-перевод основного содержимого.

<header>
   <!-- logo here -->
   <nav id="cd-top-nav"><!-- your primary navigation here --></nav>
   <a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
</header>
<main class="cd-main-content">
   <!-- put your content here -->
</main>
<nav id="cd-lateral-nav"><!-- your secondary navigation here --></nav>

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

<nav id="cd-lateral-nav">
   <ul class="cd-navigation">
      <li class="item-has-children">
         <a href="#0">Products</a>
         <ul class="sub-menu">
            <!-- all its children here -->
         </ul>
      </li>
      <!-- other .item-has-children here -->
   </ul>
   <ul class="cd-navigation cd-single-item-wrapper">
      <li><a href="#0">Info</a></li>
      <!-- other simple items here -->
   </ul>
   <div class="cd-navigation socials">
      <a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
      <a class="cd-github cd-img-replace" href="#0">Git Hub</a>
      <a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
      <a class="cd-google cd-img-replace" href="#0">Google Plus</a>
   </div>
</nav>

 

Добавление стиля

Чтобы анимировать элемент <main>, мы объединили Преобразование CSS3 с Переходом CSS3:

.cd-main-content {
  /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
  min-height: 100%;
  z-index: 2;
  transition-property: transform;
  transition-duration: 0.4s;
}
.cd-main-content.lateral-menu-is-open {
  transform: translateX(-260px);
}

Мы сделали то же самое, чтобы оживить <header>.

Обратите внимание, что для назначения минимальной высоты элементу <main> мы устанавливаем height: 100%; в <body> и <html>. Но в конечном итоге у вас будет содержимое прямо под заголовком, поэтому эти свойства могут не понадобиться.

По умолчанию основная навигация прокручивается вместе с содержимым. Чтобы переключить навигацию прокрутки формы (в позиции: absolute;) на фиксированную навигацию, добавьте класс .is-fixed к элементу <header>.

Интересное примечание: значок гамбургера и значок «X», который заменяет его при отображении меню, были созданы в CSS. Мы использовали элемент <span> и 2 псевдоэлемента (:: before и :: after). Теперь, когда «X» видим, мы скрываем элемент <span>, устанавливая видимость: hidden; в то время как для псевдоэлементов мы устанавливаем visibility: visible; - поскольку свойство видимости не наследуется по умолчанию (в отличие от свойств Display и Opacity). Это сработало ... за исключением IE, где, похоже, псевдоэлементы наследуют родительское свойство видимости. Хитрость заключалась в том, чтобы использовать функцию rgba, чтобы придать цвет фона: rgba (255, 255, 255, 0); элементу <spann>, тогда как background-color: rgba (255, 255, 255, 1); к псевдоэлементам. Это сработало!

 

Обработка событий

Ничего особенного в файле jQuery, кроме добавления / удаления классов в соответствии с конкретными событиями. В следующий раз будет лучше!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

29 05.2017
CSS и jQuery Вторичное Расширяемое Меню

Таблица цен, которая анимируется в форме покупки, когда пользователь выбирает нужную услугу.


27 10.2017
CSS и jQuery Вторичное Расширяемое Меню

Скругленный навигационный триггер, который растягивается при нажатии / нажатии, чтобы открыть навигационные элементы.


19 06.2015
CSS и jQuery Вторичное Расширяемое Меню

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


24 06.2017
CSS и jQuery Вторичное Расширяемое Меню

Вторичная панель содержимого, которая складывается плотно, поддерживается CSS-преобразованиями и jQuery.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close