Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
Выпадающее меню 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; }
У нас получился список такого вида:
Рисунок 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; }
Что мы тут сделали:
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.
Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
1. Вертикальное яркое jQuery меню 2. Прикольный эффект. Танцующее меню.
Отличная стилизация элемента интерфейса в виде раскрывающегося списка.
При наведении мышки на кнопку сверху выезжает панель.
6. jQuery плагин «MobilyBlocks» для отображения кругового меню
Анимированное javascript меню с эффектом свечения.
Свежее симпатичное меню на jQuery.
9. jQuery меню «GarageDoor» 10. jQuery меню с вертикальной прокруткой
Реализация меню с большим количеством пунктов. Прокручивается при перемещении курсора мыши вверх или вниз.
11. jQuery оформление выпадающего списка
Плавная прокрутка к нужному разделу на странице. Плагин «jQuery One Page Navigation».
13. Плагин «Animated Content Menu»
Новый jQuery плагин. Отличная реализация анимированной навигации по сайту. При переходе по пунктам меню всплывает блок с описанием и возможными ссылками, при этом в зависимости от выбранного пункта меняется фон страницы, который растягивается на весь экран независимо от размеров окна браузера. Обязательно посмотрите на демонстранционной странице.
14. jQuery плагин меню «Sweet Menu»
Анимированное меню с выезжающими пунктами.
15. Фиксированное jQuery меню
При прокрутке страницы вниз, меню остается зафиксировано сверху экрана.
16. Прокручивающиеся меню «Slider Kit»
Для реализации вертикльного меню с большим количеством пунктов. Прокрутка пунктов осуществляется с помощью колеса мыши, либо с помощью ссылок «Previos» и «Next».
17. Стильное CSS3 меню
Новое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.
19. Оригинальное jQuery меню
Выпадающее меню с фоновым эффектом. Подпункты меню разворачиваются вверх. При наведении на пункт меню сменяется фоновое изображение.
20. Анимированное меню на jQuery
Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все - пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.
21. «Scrolling menu» XML меню с прокруткой
Вертикальное и горизонтально меню с прокруткой. Хорошее решение при большом количестве пунктов в меню.
22. Контекстное меню на сайте на jQuery
Меню всплывает по нажатию правой кнопкой мыши на определенной области.
23. Круговое двухуровневое меню для сайта
При выборе пункта меню, справа отображаются пункты подменю.
24. jQuery CSS3 меню с эффектом размытия «Blur Menu» CSS3
Оригинальное jQuery CSS3 меню выполнено в 7 различных стилевых оформлениях. При наведении курсора мыши на один из пунктов меню остальные как бы размываются.
25. Несколько эффектных анимированных jQuery CSS3 меню
10 креативных анимированных меню. Горизонтальные и вертикальные CSS3 меню с различными эффектами и переходами.
В архив также вложен исходный PSD файл меню.
27. Меню MagicLine
Фон или подчеркивание пункта меню следует за мышкой с небольшой задержкой, при этом фон плавно изменяет свой цвет при следовании от пункта к пункту. Очень красивый эффект, выглядит необычно. Внимание: эффект не работает в опере
28. Image Bubbles
Отличный эффект, при наведении мышки на одно из изображений. Эффект чем-то напоминает jQDock, описанный выше.
Горизонтальное, вертикальное меню. Интересные эффекты.
32. Отличное jQuery меню в стиле Apple
Очень интересный эффект. Отлично подойдет для оформления сайтов-портфолио.
Интересный эффект выплывающих миниатюр при наведении.
40. Выпадающий список с автоскроллингом
Симпатичный эффект перехода между пунктами.
42. Отличное jQuery меню
Пункты меню представлены в виде миниатюр.
Панель навигации с окном поиска, которая становится полупрозрачной, когда вы прокручиваете страницу вниз.
48. Горизонтальное jQuery меню
Отличное вертикально меню. При наведении курсора выплывает пункт меню.
50. Горизонтальное jQuery меню
Интересный эффект при наведении курсора на пункт меню.
52. Раскрывающееся jQuery меню
При наведении курсора мыши на меню появятся его пункты. Появившиеся пункты отображаются в виде дуги, радиус которой вы сможете задать при настройке плагина. В некоторых браузерах вы не увидите отображения по дуге, меню будет отображаться прямо, но это все равно не испортит общее впечатление от этой jQuery реализации меню.
53. CSS и jQuery панель навигации
Интересный эффект при наведении курсора мыши на пункт меню.
54. Всплывающая jQuery панельСвежее анимированное меню в серых тонах.
58. Колоночная навигация по сайту на jQuery
Интересное решение для навигации, которая представлена в виде вертикальных полос. При наведении курсора мыши на эти полосы появляется изображение для пункта и список подменю. При нажатии на пункт подменю появляется страница с описанием. Такая реализация отлично подойдет для промо-сайтов или презентаций. Обязательно посмотрите демо плагина.
59. jQuery навигация по сайту
Навигация по сайту представлена в виде 4 картин, при наведении на которую вы заметите интересный анимированный эффект.
60. Панель навигации прокручивается вместе с содержимым
Панель навигации. При нажатии на стрелку происходит прокрутка страницы. Навигация прокручивается вместе с содержимым страницы.
61. jQuery панель с различными социальными сервисами
Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в CSS. Поиск решений приводит к весьма ограниченному списку методов, основная часть которых полагается на трюки CSS, JavaScript или использование нестандартных правил, которые поддерживаются не всеми браузерами. В данном уроке мы разберем метод центрирования горизонтального меню, который использует только стандартные правила CSS и работает во всех браузерах.
Пример центрированного менюНиже приведено горизонтальное центрированное в данной колонке меню, в котором активизирована вторая закладка. Можно попробовать изменить размер окна браузера или страницы, чтобы убедиться в том, что меню всегда остается центрированным и рабочим.
На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.
Разметка HTMLВсе меню, примеры которых приводятся в данном уроке, используют простую структуру. Это обыкновенный неупорядоченный список ссылок, помещенный в элемент div .
- Первая закладка
- Вторая закладка
- Третья закладка
- Четвертая закладка
Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.
#centeredmenu { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; } #centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #centeredmenu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; } #centeredmenu ul li a:hover { background:#369; color:#fff; } #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }
Как работает метод центрированияДействие метода основано на относительном позиционировании плавающих блочных элементов один в другом. Для начала посмотрим, как изменяется размер элементов при смещении.
Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.
Но если мы будем смещать элемент div влево, он автоматически будет ужиматься до размеров своего содержимого. Сжатие является ключевым моментом в реализации данного метода центрирования меню. Оно помогает перемещать меню в правильную позицию.
Стандартное выровненное влево менюВозьмем стандартное выровненное влево меню и будем шаг за шагом его переделывать. Для наглядности пункты окрашены в разные цвета, так что сразу понятно, что куда вложено.
Обратите внимание на следующие моменты:
- Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
- Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenu div и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
- Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
- Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.
Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative; . Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.
Сдвигаем положение всех элементов меню
Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.
Несколько важных замечанийПри использовании данного метода центрирования надо помнить о нескольких важных моментах:
- Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div . Таким образом, выступающая часть элемента div будет обрезана.
- Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li .
- Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li , чтобы можно было стилизовать их индивидуально.
Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.
Создадим простое горизонтальное меню навигации для сайта. Для этого будем пользоваться простыми приемами, которые в результате дадут корректное отображение нашего меню во всех браузерах.
Итак начнем. Создадим список с названиями нашего меню. В качестве названий пунктов пусть будут такие: "Главная", "Новости", "Продукция", "Услуги", "Партнеры", "Контакты". Создаем новый файл под названием menu.html , например, с помощью программы Dreamweawer или используя обычный блокнот. В нем между тегами body размещаем наше меню. Это обычный маркированный список ul с элементами li . Разумеется, каждый пункт меню делаем ссылкой, где вместо URL вставляем решетку #. Используя программу Photoshop создадим изображение размером 3х30 px, с градиентной заливкой как показано на рисунке ниже. Файл сохраним в формате GIF. Назовем его bg.gif . Данный рисунок будет выступать в качестве фонового изображения нашего меню.
Вот содержимое файла menu.html :
Простое кроссбраузерное горизонтальное меню
- Главная
- Новости
- Продукция
- Услуги
- Партнеры
- Контакты
Теперь отдельно создадим файл стилей под названием main.css . Его листинг приведен полностью ниже.
Ul { margin:0; /*обнуляем отступы*/ padding:0; /*обнуляем отступы*/ float:left; /*выравниваем список по левому краю*/ width:auto;/*задаем ширину авто исходя из типа и содержимого списка*/ background-image: url(bg.gif); /*устанавливаем фоновое изображение*/ background-repeat:repeat-x; /*повторяем наше изображение по горизонтали*/ list-style:none; /*удаляем маркеры списка*/ background-color:#4778c3; /*задаем цвет фона под изображение*/ font-size:13px; /*задаем размер шрифта*/ font-family:Arial, Helvetica, sans-serif; /*устанавливаем шрифт*/ } ul li { float:left; /*выравниваем элементы списка по левому краю*/ } ul a { display:block; /*представляем ссылки меню как блочные элементы*/ width:100px; /*задаем размер блока*/ height:30px; /*и высоту блока*/ text-align:center; /*надпись по центру*/ line-height: 2.1em; /*межстрочный интервал*/ text-decoration:none; /*убираем подчеркивание у ссылок*/ color:#fff; /*цвет текста ссылок - белый*/ border-right:#fff solid 1px; /*бордюр правой стороны блока (белая линия в 1px)*/ } ul a:hover { color:#ccc; /*ссылка меняет цвет при наведении указателя*/ }
Думаю, что по содержимому файла main.css вопросов возникнуть не должно, подсказки в комментариях я написал достаточно подробно и ясно, поэтому повторяться не буду. Не забываем его подключить к нашей странице menu.html с помощью
Подведем итог. В результате мы получили полностью кросбраузерное горизонтальное меню, которое выглядит одинаково не только во всех современных браузерах, но и в таких раритетах, как IE 5.5 и IE 6.0. Все элементы меню представлены как блочные элементы и имеют одинаковые размеры по ширине 100 px и высоте 30px. В качестве разделителя пунктов меню используется оформление блокового элемента с помощью правого бордера белого цвета толщиной в 1px. Это практически самый простой способ реализации горизонтального меню. Разумеется, при желании его можно модифицировать, сделать более красивым и функциональным используя фантазию, свойства css и дополнительные графические элементы. Ну а наше горизонтальное меню выглядит примерно так:
Плюсы этого решения:
Простота выполнения
Простой код
Нет никаких таблиц и javascript
Кроссбраузерность: меню во всех браузерах выглядит одинаково
Используются всего один рисунок
Минимум кода на странице menu.html
Минимум кода для реализации стилей в main.css
Файлы, используемые в данном примере, можно скачать в архиве
Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить - юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом css коде. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.
Если вам нужно простое горизонтальное меню. Читаем статью о создании . Освоив основы приступайте к созданию выпадающего меню.
Вариант 1 - Выпадающее горизонтальное менюДля ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.
Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:
Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).
Давайте рассмотрим CSS код:
#header { height:120px; position:relative; background: transparent url(header_bkg.png) repeat-x scroll top center;} #nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;} #nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;} #nav > li:hover ul { display:block; } #nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; } #nav li ul { margin:0px; padding:0px; display:none;} #nav li ul li { list-style-type:none; margin:10px 0 0 0;} #nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;} #nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;} #nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
Вот как это можно сделать с помощью чистого CSS кода. До сих пор в голове не влаживается, для чего использовать JavaScript, разве что для .
Вариант 2 - горизонтальное меню + решение для IE6Нужно обратить внимание, что вариант 1, не будет работать в IE6. Решением совместимости меню с IE6, будет кусочек js кода. Ближе к делу, создаем меню. Ниже предоставлен скриншот будущего меню:
Конструкция меню схожа с первой версией, поэтому перейдем к самому коду.
#menu { padding: 0; margin: 0; font-size: 100%; font-family: Georgia; } #menu li { list-style: none; float: left; height: 33px; padding: 0; margin: 0; width: 150px; text-align: center; background: #171717; position: relative; padding-top: 12px; } #menu li ul { list-style: none; padding: 0; margin: 0; width: 150px; display: none; position: absolute; left: 0; top: 45px; } #menu li ul li { float: none; height: 33px; margin: 0; width: 150px; text-align: center; background: #7F7F7F; } #menu li a { display: block; width: 150px; height: 33px; color: #fff; text-decoration: none; } #menu li:hover ul, #menu li.jshover ul { display: block; } #menu li:hover, #menu li.jshover { background: #424242; }
JS - решение для IE6
jsHover = function() { var hEls = document.getElementById("menu").getElementsByTagName("li"); for (var i=0, len=hEls.length; i
