Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close