Михаил сб, 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.
Хабр, привет!
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest , это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsive Mega Menu - Navigation
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu - Menu Interaction Concept
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта . В этой статье я расскажу, как при помощи обычного 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