Два вертикальных меню html

Содержание

CSS меню
Вертикальное меню
Горизонтальное меню
Выпадающее меню
Раздвигающееся вертикальное меню на CSS3
Разметка HTML
CSS
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Реализация забавных подсказок
Анимированные буквы
Солнцезащитные очки от первого лица
Вертикальное многоуровневое меню для сайта
Шаг 1. HTML
Шаг 2. CSS
Шаг 3. jQuery
Вот и все. Готово!
Раздвигающееся вертикальное меню на CSS3
Разметка HTML
CSS
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Реализация забавных подсказок
Анимированные буквы
Солнцезащитные очки от первого лица

CSS меню

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

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

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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

Горизонтальное меню

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

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar < margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; >#navbar a < color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; >#navbar a:hover

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

#navbar ul < display: none; >#navbar li:hover ul

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul < display: none; background-color: #f90; position: absolute; top: 100%; >#navbar li:hover ul < display: block; >#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar < height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; >#navbar li < float: left; position: relative; height: 100%; >#navbar li a < display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; >#navbar ul li < float: none; >#navbar li:hover < background-color: #f90; >#navbar ul li:hover

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

Раздвигающееся вертикальное меню на CSS3

В данном уроке представлено вертикальное раздвигающееся меню на CSS3. Подпункты появляются при нажатии основного пункта.

demo sourse

Разметка HTML

Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).


  Главная
  HTML/CSS 
   Ссылка 1
   Ссылка 2
   Ссылка 3
   Ссылка 4
   Ссылка 5


  jQuery/JS 
   Ссылка 6
   Ссылка 7
   Ссылка 8
   Ссылка 9
   Ссылка 10


  PHP
  MySQL
  XSLT

CSS

#nav < border:3px solid #3e4547; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; >#nav, #nav ul < list-style:none; padding:0; width:200px; >#nav ul < position:relative; z-index:-1; >#nav li < position:relative; z-index:100; >#nav ul li < margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s; transition: 0.4s linear 0.4s; >#nav li a < background-color:#d4d5d8; color:#000; display:block; font-size:12px; font-weight:bold; line-height:28px; outline:0; padding-left:15px; text-decoration:none; >#nav li a.sub < background:#d4d5d8 url("../images/down.gif") no-repeat; >#nav li a + img < cursor:pointer; display:none; height:28px; left:0; position:absolute; top:0; width:200px; >#nav li a img < border-width:0px; height:24px; line-height:28px; margin-right:8px; vertical-align:middle; width:24px; >#nav li a:hover < background-color:#bcbdc1; >#nav ul li a < background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:11px; line-height:22px; >#nav ul li a:hover < background-color:#ddd; color:#444; >#nav ul li a img < background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; margin-right:5px; vertical-align:middle; width:16px; >#nav ul li:nth-child(odd) a img < background:url("../images/bulb2.png") no-repeat; >#nav a.sub:focus < background:#bcbdc1; outline:0; >#nav a:focus ~ ul li < margin-top:0; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linears; -webkit-transition: 0.4s linears; transition: 0.4s linear; >#nav a:focus + img, #nav a:active + img < display:block; >#nav a.sub:active < background:#bcbdc1; outline:0; >#nav a:active ~ ul li < margin-top:0; >#nav ul:hover

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/css3-onclick-vertical-metal-menu/
Перевел: Сергей Фастунов
Урок создан: 5 Июня 2012
Просмотров: 74862
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Вертикальное многоуровневое меню для сайта

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

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

Шаг 1. HTML

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

Количество подпунктов вы можете добавить самостоятельно в необходимом количестве.

Шаг 2. CSS

У нас уже есть заготовленная анимация, нам только необходимо вставить необходимые классы:

.dl-menu.dl-animate-out-1 < animation: MenuAnimOut1 0.4s linear forwards; >@keyframes MenuAnimOut1 < 50% < transform: translateZ(-250px) rotateY(30deg); >75% < transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; >100% < transform: translateZ(-500px) rotateY(0deg); opacity: 0; >> .dl-menu.dl-animate-in-1 < animation: MenuAnimIn1 0.3s linear forwards; >@keyframes MenuAnimIn1 < 0% < transform: translateZ(-500px) rotateY(0deg); opacity: 0; >20% < transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; >100% < transform: translateZ(0px) rotateY(0deg); opacity: 1; >>

Шаг 3. jQuery

Мы будем использовать плагин dlmenu. js для корректного отображения и функциональности меню, для этого нам необходимо его инициализировать:

Вот и все. Готово!

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

Источник

Раздвигающееся вертикальное меню на CSS3

demo sourse

Разметка HTML


  Главная
  HTML/CSS 
   Ссылка 1
   Ссылка 2
   Ссылка 3
   Ссылка 4
   Ссылка 5


  jQuery/JS 
   Ссылка 6
   Ссылка 7
   Ссылка 8
   Ссылка 9
   Ссылка 10


  PHP
  MySQL
  XSLT