Как сделать выпадающее меню в html javascript. CSS3 Горизонтальное плавно выпадающее меню

Михаил сб, 09/20/2014 - 12:28

Что-то мой комментарий не виден - дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка "ul.nav li:hover ul {display: block;}"
Подскажите, в чем дело?

Есть пожедания по изложению материала:

Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за "выпадение меню", а какая - за скрывание пунктов более глубокого уровня вложенности

Хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

В частности, неясно, зачем нужна строка "

Перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой
и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

В хеддере в вашем примере имеются 3 строки. Из них только одна относится к теме (задает имя ЦСС-файла), а 2 другие - нет. Это также осложняет освоение материала. Тем более, что на моем компьютере такой хеддер вообще приводит к некорректному отображению текста, поскольку мне нужно ставить не "utf-8", а "Windows-..."

В примере неясно, что слова "style.css", "block-menu" и "nav" - это не ключевые слова, а названия, задающиеся пользователем. Я выяснял это экспериментально

Короче говоря, хотелось бы, чтобы в примерах было только то, что имеет отношение к делу, причем, чтобы про неясные по контексту строки было бы написано, какое именно "отношение к делу" они имеют.

• Войдите , чтобы оставлять комментарии

Oleg сб, 09/20/2014 - 23:50

Самый объёмный коммент!!!
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul {display: block;} будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код) при наведении на пункт меню(ul.nav li) сработает:hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.

Давно хотел написать статью о том, как сделать подменю на 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:hover > ul { display: block; }

  Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент « li» в который вложен наш список второго уровня.

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

  Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

  Ну что же, давайте еще немного поколдуем над ним.

  Плавное выпадающее меню – это просто

  Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

  Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block; ).

  Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

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

  Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.

  Вывод:

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

  Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

  Спасибо за внимание и до скорых встреч!

  Вы дочитали до самого конца?

  Была ли эта статься полезной?

  Да Нет

  Что именно вам не понравилось? Статья была неполной или неправдивой?
  Напишите в клмментариях и мы обещаем исправиться!