Выпадающее меню что. Выпадающие меню на HTML и CSS
Давно хотел написать статью о том, как сделать подменю на CSS . Многие делают его на JQuery и получается достаточно неплохо, однако, весь базовый принцип создания подменю на CSS я изложу здесь. А уже дальше, отталкиваясь от этой базы, можно совершенствовать подменю дальше.
Привожу сразу CSS-код :
* html ul li {
float: left;
}
* html ul li a {
height: 1%;
}
ul {
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ul li {
position: relative;
}
ul li a {
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul {
display: none;
left: 99px;
position: absolute;
top: 0;
}
li:hover ul {
display: block;
}
Самое главное здесь - это селектор "li:hover ul ". Фактически, он и показывает содержимое меню. По умолчанию, оно "display: none ", а при наведении курсора на пункт меню, подменю становится: "display: block ", то есть видимым. Это самое главное. Также в первых двух селекторах (которые со * ) идёт CSS-хак для IE , иначе без него в этом браузере ничего работать не будет. Всё остальное - это внешний вид, который, безусловно, можно менять.
Привожу и HTML-код :
Главная
Меню 1
Подменю 1
Подменю 2
Подменю 3
Меню 2
Подменю4
Подменю 5
Подменю 6
Подменю7
Подменю 8
Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег ul - создаёт меню. Если ul находится внутри другого ul , то это уже подменю. А тег li отвечает за конкретный пункт меню.
Разумеется, меню самое наипростейшее, как с точки зрения логики и структуры, так и с точки зрения дизайна. Разумеется, можно с помощью JQuery сделать плавное раскрытие. Можно также изменить дизайн, но весь принцип останется тем же, что и в этом подменю, написанном на CSS и HTML .
Горизонтальное выпадающее меню
написано на HTML и CSS. Код HTML и стили CSS лаконичны, просты и понятны. Всего строк CSS стилей, не считая пробельные, меньше 50. В HTML удобно добавлять новые пункты и подпункты. Немного изменив CSS стили можно сделать несколько тем и изменить вид или способ появления подпунктов (темы оранжевая, сиреневая, коричневая).
Основное отличие моего решения в том, что я не использую списки – теги
- и
- , заменив их на простые , а применение CSS3 flexbox - нового элемента CSS3 - значительно упростило написание и читаемость HTML кода и CSS стилей, сократив при этом их объём.
Ниже приведён рабочий пример горизонтального выпадающего меню на CSS.
Идея заключается в следующем: горизонтальное выпадающее меню создаётся как набор колонок. Колонка представляет собой стопку подпунктов.
Непосредственно горизонтальное меню складывается из верхних элементов стопки. Схематично это выглядит так:
Первые (верхние) пункты образуют верхний уровень горизонтального меню; остальные, пока на колонку не навели курсор, скрыты. При наведении курсора скрытая часть плавно разворачивается вниз.
Как это работает:Joomla-3 - отличный движок для вашего сайта! Базовые расширения Модули, компоненты, плагтны, шаблоны Структура каталогов Joomla-3 Метод замещения компоновок CSS3 - продвинутые возможности дизайна Плавная смена изображений. Часть 1 Плавная смена изображений. Часть 2 Плавная смена фона Изменение фона наведением мыши Псевдоклассы и псевдоэлементы JavaScript - Активные элементы WEB-страниц Скрипт плавной смены изображений HTML5 - используйте новые теги, элементы и атрибуты Использование поигрывателя HTML5
В обёртку помещены 4 колонки –
блоки .В свою очередь, в каждом из них лежат пункты, составляющие само горизонтальное меню (перед top пробел!) и вложенные подпункты .
Чтобы при выпадении вертикальных подпунктов контент, расположенный следом, не прыгал вниз длина обёртки должна немного превышать полное выпадение колонок.@import url("https://fonts.googleapis.com/css?family=Roboto"); #dd-menu__wrapper { display: flex; justify-content: space-between; width: 640px; min-height: 120px; margin: 1px auto; overflow: auto; } .dd-menu__column { display: flex; flex-direction: column; width: 159px; max-height: 38px; overflow: hidden; transition: 1.2s; z-index: 1000; } .dd-menu__column:hover { max-height: 600px; } .dd-menu__item { display: block; font-family: "Roboto", sans-serif; font-size: 11px; color: #ffffff; background-color: #1e90ff; border-bottom: 1px solid #fff; padding: 4px 6px; } .dd-menu__item.top { min-height: 30px; max-height: 38px; } .dd-menu__item:hover { cursor: pointer; background-color: #0062c1; } .dd-menu__item a { display: block; height: 100%; width: 100%; vertical-align: middle; text-decoration: none; color: #ffffff; }
Обёртка горизонтального меню (3) определяется как flex-контейнер (4). Здесь же указывается, что все элементы контейнера будут равномерно распределены по горизонтали в родительском блоке (5).
Следующие вложенные блоки (12) также будут flex-контейнерами (13), а содержащиеся в них элементы (26) будут блочными (27) и выстраиваться в колонку (14), образуя вертикальные подпункты. Изначально максимальная высота стопки равна высоте верхних пунктов (16). Все остальные элементы стопки будут скрыты (17). То есть, пока не наведётся курсор, отображаться будут только верхние пункты.
При наведении курсора на колонку ограничение высоты снимается (22) и всё содержимое стопки выпадает вниз. Когда курсор переместится в другую область все пункты утянутся наверх.
Все развёртки будут проходить плавно, в течение заданного времени (18). Чтобы контент не просвечивал из под развёрнутой стопки установим z-index (19).
Поскольку, в отличии от разворачивающихся подпунктов, которые могут иметь различную высоту в зависимости от содержимого, первые (верхние) пункты всегда должны иметь высоту строки горизонтального меню, установлено жесткое ограничение min и max высоты (37,38).
Обратите внимание, в моём случае min-height на 8 пикселей меньше max-height. Это связано с тем, что все элементы имеют снизу и сверху внутренние отступы по 4 пикселя (33). Именно сумма этих отступов и дополняет минимальную высоту пунктов горизонтального меню. Если отступов не будет значения min-height и max-height будут одинаковы.
Примечание: В строке (36) .dd-menu__item.top top пишется через точку, без пробела!Все стили написаны на языке (препроцессора CSS) LESS и оттранслированы в CSS программой WinLess. Очень удобно, трудоёмкость сокращается в разы, рекомендую.
Надеюсь, что статья оказалась для вас полезной. Good luck!Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта . В этой статье я расскажу, как при помощи обычного HTML-кода и несложных CSS-правил, можно создать отличное выпадающее меню , которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!
Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:
- Главная
- Статьи
- HTML
- CSS
- PHP
- MySQL
- Книги
- Раскрутка и продвижение
- Е-Бизнес
- Web-Дизайн
- Платежные системы
- О нас
Довольно простой и не сложный получился html-код. Выглядеть этот список будет так .
На следующем этапе мы приведем наше меню к более красивому виду. Это легко можно сделать благодаря использованию CSS .
Первым делом уберем меркеры в ненумерованном списке, отступы, а также зададим ширину нашего меню.#nav ul { margin: 0px; padding: 0px; list-style:none; width:200px; }
Теперь нам необходимо задать положение элементов списка. Так как наше меню будет вертикальное, это облегчает нашу работу. Однако, нам необходимо задать значение для свойства "position" , как "relative" . Это необходимо для того, чтобы относительно основного меню абсолютно позиционировать подменю. Также зададим нижнее подчеркивание для пунктов меню.
#nav ul li { position: relative; border-bottom:1px solid #ccc; }
Теперь необходимо подкорректировать наше подменю . Так как мы хотим, чтобы наше меню появлялась справа от основного меню в тот момент, когда над этим пунктом находится курсор, то нам необходимо вложенному списку, свойству "position" задать значение "absolute" . Также нам необходимо задать его положение. Это делается следующим образом
#nav li ul { position: absolute; left: 200px; top: 0; display: none; }
Используя атрибуты left и top мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню. Также я присвоил атрибуту "display" значение "none" , так как мы не хотим видеть подменю при открытии страницы.
Итак, теперь наше меню выглядит так.
Теперь придадим вид нашим ссылкам. В первую очередь для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим атрибуту "display" значение "block" . Также уберем нижнее подчеркивание и зададим цвет фона и цвет текста ссылок.
#nav ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; }
#nav li:hover ul { display: block; }
Вот теперь наше меню уже работает и выглядит так .
Осталось придать ему более привлекательный вид.
Для начала давайте сделаем так, чтобы при наведении на пункты нашего меню изменялся фон и цвет текста. Для этого добавим следующий код
#nav li:hover a { color:#FFFFFF; background: url(img/fone-tr.png); }
Здесь я в качестве фона использую вот эту картинку , но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff; ).
#nav li:hover ul a:hover { background-color:#cccccc; background-image:none; color:#FFFFFF; }
Ну вот и все! Наше выпадающее меню на html и CSS готово. Можете посмотреть, что у нас получилось .
На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover лишь для тега - так что li:hover , на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.
Для того чтобы устранить эту проблему, добавим небольшой JavaScript-код:
А теперь сделаем так, чтобы при наведении на пункт подменю, он также изменял цвет своего фона. Для этого используем следующий код:
jsHover = function() { var hEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0, len=hEls.length; i li{ list-style: none; /* убираем маркеры списка */ display: inline-block; /* разещаем списки горизонтально */ background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; }
У нас получился список такого вида:
Рисунок 1. Подготовительные работы.
Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег
-
Создадим этот список и добавим стили, описывающие его внешний вид.
Выпадающее меню ul.menu{ padding: 3px; /* убираем отступы */ margin-top: 50px; /* для красоты отодвигаю вниз */ text-align: center; /* выравниваю элементы спаска по центру */ } ul.menu > li{ list-style: none; /* убираем маркеры списка */ display: inline-block; /* разещаем списки горизонтально */ background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; }
Теперь у нас получился такой список:
Рисунок 2. Подготовительные работы.
Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.
Выпадающее меню ul.menu{ padding: 3px; margin-top: 50px; text-align: center; } ul.menu > li{ list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ display: none; /* делаем невидимым */ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; } /* делаем видимым при наведении курсора на блок li */ .menu > li:hover > .menuInner{ display: block; }
Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .
Выпадающее меню ul.menu{ padding: 3px; margin-top: 50px; text-align: center; } ul.menu > li{ position: relative; /* добавляем позиционирование */ list-style: none; display: inline-block; background-color: #D87171; padding: 5px 15px; height: 20px; /* добавляем высоту */ } /* устанавливаем стиль ссылок в меню */ ul.menu > li > a{ color: #FFFFFF; text-decoration: none; } /* устанавливаем стиль ссылок при наведении курсора */ ul.menu > li > a:hover{ text-decoration: underline; } /* устанавливаем стиль для внутреннего меню */ .menuInner{ display: none; /* делаем невидимым */ list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text-align: left; } .menu > li:hover > .menuInner{ display: block; position: absolute; top: 30px; left: 0; }
Что мы тут сделали:
- правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
- Добавили в родительский элемент
- правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
- Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.
Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Загрузка...
