Вредоносное ПО (malware) - это назойливые или опасные программы,...
Июль 2, 2016
Сегодня вертикальное выпадающее меню на css сделать не проблема и я покажу вам сегодня как это делается, абсолютно без скриптов.
Не проблема то не проблема, только я вот сегодня неожиданно понял, что забыл, как это делается Чето давно просто не делал. Ну да ладно, просмотром одного урока я полностью исправил эту проблему, так что поделюсь с вами максимально подробно тем, как все это реализовать. Кстати, если вы хотите узнать, как делается обычное вертикальное меню (красивое ), то смотрите .
Полная разметка
Я решил, что в нашем вертикальном меню будет четыре пункта. При наведении на каждый пункт будет появляться выпадающее подменю из трех подпунктов. Идея моя вам понятна? Из-за этого разметка получилась слегка громоздкой, вот она:
В принципе тут все очень просто. Все меню лежит в контейнере nav , там уже мы создаем список и его пункты. Но поскольку наше меню двухуровневое, то в каждый пункт списка (li) мы дополнительно вкладываем список с классом second-ul (типа вложенный ul). Название класса роли не играет. И так делаем с каждым пунктом. Если вы внимательно изучите разметку на примере одного пункта, то все поймете, вот еще раз:
То есть мы в пункт вкладываем список, в котором в свою очередь располагаются вложенные пункты. На этом с html-разметкой все, переходим в css, где все гораздо интереснее.
Оформление нашего меню
Я сделаю некоторые базовые настройки. В частности, нужно убрать маркер у пунктов меню, задать его высоту. Также дополнительно я сброшу отступы у всех элементов. Вы можете этого не делать, это по желанию, просто помните, что по умолчанию у вложенного списка будет отступ.
*{ margin: 0; padding: 0; } #nav{ height: 70px; } #nav ul{ list-style: none; }
Вот такие правила первым делом отправляются в таблицу стилей. Посмотрим, как выглядит наше меню:
Ужасно, не так ли? Но ничего, сейчас мы это исправим!
Следующие стилевые правила очень важны именно с эстетической точки зрения — наше меню станет гораздо красивее на вид. Вот все эти правила:
#nav > ul > li{ width: 180px; position: relative; } #nav li a{ display: block; background: #ccc; border: 1px solid #333; color: #fff; padding: 15px; } #nav li a:hover{ background: #999; }
Что я здесь настроил? Во-первых, для пунктов главного списка указал ширину и относительное позиционирование. Оно нужно для того, чтобы потом выполнить абсолютное позиционирование вложенного меню. Далее настраиваем сам внешний вид ссылок. Делаем их блочными, красим в нужный цвет, добавляем отступы, рамку и т.д. По желанию. Также сделаем изменение фонового цвета при наведении. Итог всех этих манипуляций:
Я обрезал скриншот. Если же вы все делаете за мной, то у вас будут в ряд располагаться все пункты и подпункты. Все, теперь внешний вид не вызывает отвращения, можно сосредоточиться на том, чтобы сделать меню выпадающим!
Делаем вертикальное меню выпадающим
Пока у нас все вложенные меню видно. Это неправильно, по умолчанию их не должно быть на странице, а появляться они должны только при наведении. То есть при наведении на конкретный пункт должно появляться меню только для него. Суть ясна?
Для начала мы скроем все наши вложенные меню, но перед этим их нужно позиционировать, чтобы они располагались не под основным пунктом, а слева от него. Для этого напишем вот что:
#nav li .second-ul{ display: block; position: absolute; left: 100%; top: 0; }
То есть для вложенного списка указываем абсолютное позиционирование и сдвиг влево на 100% ширины от ширины родительского блока (пункта списка). А насколько мы знаем, ширина у него 180 пикселей. По высоте вложенное меню должно быть на одном уровне. После этих манипуляций у вас должно получится так:
Ну и собственно теперь замените в стилях для вложенных списков display: block на display: none . После этого подменю пропадут с экрана, что нам и нужно. Мы подходим к самому важному этапу — реализации выпадания на css. Для этого сделаем вот что:
#nav li:hover .second-ul{ display: block; }
Все очень просто, этой строки вам хватит! Тут мы по сути говорим браузеру: при наведении на пункт главного списка делай видимым вложенный список!
Проверяем. Понаводите на каждый пункт и убедитесь, что для каждого пункта выводиться его, уникальное подменю. Вот так это выглядит:
И так будет для каждого пункта. Если вы все делали за мной, то именно так и будет. Правда я еще добавил ширину для вложенных пунктов списка, чтобы они были такими же по размеру, как основные:
#nav li li{ width: 180px; }
Ну а дальше вы уже по своему усмотрению можете изменять внешний вид всего этого меню, добавлять новые пункты и т.д. Все это уже очень просто делать, когда знаешь технологию. А технологию я вам показал. Если у вас есть какие-либо вопросы, то можете писать их в комментарии, я же на этом заканчиваю статью.
Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
У нас получился список такого вида:
Рисунок 1. Подготовительные работы.
Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег
Создадим этот список и добавим стили, описывающие его внешний вид.
Теперь у нас получился такой список:
Рисунок 2. Подготовительные работы.
Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.
Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .
Что мы тут сделали:
- правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
- Добавили в родительский элемент
- правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
- Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.
Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Горизонтальное выпадающее меню
написано на HTML и CSS. Код HTML и стили CSS лаконичны, просты и понятны. Всего строк CSS стилей, не считая пробельные, меньше 50. В HTML удобно добавлять новые пункты и подпункты. Немного изменив CSS стили можно сделать несколько тем и изменить вид или способ появления подпунктов (темы оранжевая, сиреневая, коричневая).
Основное отличие моего решения в том, что я не использую списки – теги
- и
- , заменив их на простые , а применение CSS3 flexbox - нового элемента CSS3 - значительно упростило написание и читаемость HTML кода и CSS стилей, сократив при этом их объём.
Ниже приведён рабочий пример горизонтального выпадающего меню на CSS.
Идея заключается в следующем: горизонтальное выпадающее меню создаётся как набор колонок. Колонка представляет собой стопку подпунктов.
Непосредственно горизонтальное меню складывается из верхних элементов стопки. Схематично это выглядит так:
Первые (верхние) пункты образуют верхний уровень горизонтального меню; остальные, пока на колонку не навели курсор, скрыты. При наведении курсора скрытая часть плавно разворачивается вниз.
Как это работает:В обёртку
Рекомендуем почитать
Лучшие программы для восстановления данных с любых носителей информации....
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
