Автор

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

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

Полоса прокрутки это неотъемлемая часть интерфейса, зачастую полоса прокрутки зависит от браузера и операционной системы, но если вы не хотите следовать установленным правилам, а установить свои, тогда вам потребуется небольшой плагин Tiny Scrollbar, который позволит создать собственную, плавную, полосу прокрутки с приятным интерфейсом. данный плагин позволяет реализовать как вертикальную так и горизонтальную полосу прокрутку. В данном уроке мы детально рассмотрим как подойти к данной реализации.


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

Если вы решили использовать защищенный протокол на страницах своего сайта, вы молодец. Используя HTTPS-соединение, вы заботитесь о конфиденциальности данных своих пользователей.


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

Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.


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

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close