Автор

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

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close