Горизонтальное выпадающее меню HTML + CSS
 | |
| Это простое меню с несколькими уровнями, которое полностью создано на чистом CSS, где подойдет под многие тематические сайты. Идея состоит в том, чтобы оживить каждый пункт меню после изменения уровня. Анимация начинается с щелчка элемента и задержки распространяются через категорию, что можно присвоить каждому запросу. Простая и понятная анимация следуют той же логике для входящих элементов нового уровня многоуровневой навигаций В качестве дополнительных элементов у нас есть навигационная панель и запросы, виде кнопок, что стильно вписаны под палитру цвета. Более глубокие уровни ссылаются на атрибут данных, где можно добавить медиа запросов для мобильной версии меню с переключением меню, что по умолчанию не вписаны, где сам веб мастер уже после установки может настроить на мобильные гаджеты, чтоб с них также корректно смотрелось и можно было работать с навигацией. Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:  Анимированные меню дает разработчикам хорошее сочетание традиционного стиля и макета, а также быстрые и отзывчивые эффекты анимации, чтобы сделать навигацию более увлекательной для пользователей. В дизайне анимированные ленты выпадают за каждой вкладкой меню при наведении мыши. Дополнительные вкладки и подменю полностью соответствуют дизайнерам. После того, как мы применили CSS, у нас должно получиться что-то вроде этого:  Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню. В этом пособии по навигации, вы узнаете о шагах по созданию чистого выпадающего меню, что создано при помощи стилистике CSS. В основном мы будем использовать свойства CSS2, где будет дополнительный небольшой трюк. И если все сделано правильно, когда мы наводим верх над пунктом меню, то должны увидеть раскрывающийся список с тремя другими добавленными нами элементами.  Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию. И вот как должен выглядеть конечный результат:  Приступаем к установке: HTML Чтобы добавить раскрывающийся список к одному элементу, здесь прописываем ul внутри li, где мы хотим вывести его. Код <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="http://zornet.ru">Zornet.Ru</a> <ul> <li><a href="#">Стили CSS</a></li> <li><a href="#">Скрипты сайта</a></li> <li><a href="#">Шаблоны ресурса</a> </li> </ul> </li> <li><a href="#">Стилистика CSS</a></li> <li><a href="#">Раскрутка SEO</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Связь</a></li> </ul> </nav> Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки. Осталось прописать стиль CSS, где все элементы по умолчанию все скрыты, где их появление будет, как только тогда, когда у нас есть над родительским элементом. Поэтому добавьте следующее после вышеуказанного CSS: Код nav { margin: 0px 0; background-color: #c14018; width: 100%; } nav ul { padding:0; margin:0; list-style: none; position: relative; } nav ul li { margin: 0px 0px 0 0; display: inline-block; background-color: #c1411a; } nav a { display: block; padding: 0 17px; color: #f5eeee; font-size: 19px; line-height: 59.9px; text-decoration: none; } nav a:hover { background-color: #69240e; } nav ul ul { display: none; position: absolute; top: 100%; } nav ul li:hover > ul { display:inherit; } nav ul ul li { min-width:168px; display:list-item; position: relative; } nav ul ul ul { position: absolute; top:0; left:100%; } li > a:after { content: ' +'; } li > a:only-child:after { content: ''; } Вы можете еще раз анонсировать этот процесс столько раз, сколько хотите, чтобы добавить дополнительные привязки, что идет на выпадающее элементы списков. Кроме того, вам не нужно добавлять его крайнему элементу в раскрывающемся списке. Многие используют jQuery для достижения этого эффекта раскрывающееся списка, где аналогично используются совершенно другие методы CSS стилей. Вы предпочитаете создавать свои выпадающие списки, что помощью CSS или jQuery. Позвольте мне знать в комментариях ниже. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
