Вертикальное выпадающее меню на CSS
Сегодня я приведу пример создания вертикального выпадающего меню оформленного с помощью CSS. Постараюсь задействовать как можно больше свойств css, чтобы наглядно показать, как можно оформить созданное меню. Меню будет полностью оформлено с использованием Каскадных таблиц стилей. Единственно, что пришлось сделать с помощью JavaScript, это эффект выпадающего меню для Internet Explorer, т.к одно из нужных свойств он всё таки не поддерживает.
Для начала нужно построить структуру нашего меню. Она будет состоять из ненумерованного базового списка включающего в себя списки-подменю.
index.html
<title>Вертикальное выпадающее меню на CSS</title> <script type="text/javascript" src="cssmenu.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <ul> <li><a href="#">Главная страница</a></li> <li><a href="#">Создание сайтов</a> <ul> <li><a href="#">Дизайн сайтов</a></li> <li><a href="#">Вёрстка сайтов</a></li> <li><a href="#">Оптимизация сайтов</a></li> </ul> </li> <li><a href="#">Продвижение сайтов</a> <ul> <li><a href="#">SEO продвижение</a></li> <li><a href="#">SMO продвижение</a></li> </ul> </li> <li><a href="#">SEO биржи</a></li> <li><a href="#">SEO софт</a></li> </ul> |
style.
css
|
JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.
Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip
Твитнуть
Метки: вертикальное выпадающее меню, выпадающее меню на CSS, примеры css меню
Видеоурок 1. Выпадающее меню для сайта с помощь html и css на WordPress
Опубликовано:
Не так давно, на одном из рабочих сайтов, мне нужно было сделать выпадающее меню.
Ну дело вроде пустяковое, думал по быстрому сделаю и получу оплату, но не тут то было =) Сначала я решил взять код html и css из каких ни будь подобных уроков и все скопировать, то есть сделать по шаблону. Но после того, как я обнаружил что на многих блогах код дают не правильный — не рабочий, я решил все сделать сам… И все оказалось достаточно просто и быстро. Покажу вам html и css код выпадающего меню — рабочий 🙂 Также рекомендую узнать, как сделать выпадающее меню на WordPress сайте.
html код выпадающего меню — скилет
html код выпадающего меню одинаков, как для вертикального, так и для горизонтального меню. Вы можете увеличить количество пунктов меню, копируя часть кода и вставляя в нужное место.
<ul> <li><a href="/">Подменю 1</a> <ul> <li><a href="/" >Пункт подменю 1</a></li> <li><a href="/">Пункт подменю 2</a></li> <li><a href="/">Пункт подменю 3</a></li> </ul> </li> <li><a href="/">Подменю 2</a> <ul> <li><a href="/">Пункт подменю 1</a></li> <li><a href="/">Пункт подменю 2</a></li> <li><a href="/">Пункт подменю 3</a></li> </ul> </li> </ul>
CSS код горизонтального выпадающего меню
Вот такое меню можно сделать моим способом.
..
Далее, я привожу вам css код горизонтального меню. Внешний вид меню достаточно прост, но при начальных знаниях css вы сможете придать этому меню тот стиль, который подойдет к дизайну вашего сайта.
#mymenu {
float: left;
width: 100%;
margin: 20px 10px;
list-style: none;
}
#mymenu li {
float: left;
width: auto;
padding: 0 10px;
font-size: 18px;
}
#mymenu li ul {
display: none;
width: 200px;
}
#mymenu li:hover ul {
display: block;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
#mymenu li ul li {
float: left;
width: 200px;
padding: 5px 0;
font-size: 14px;
}CSS код вертикального выпадающего меню
А вот и вертикальное выпадающее меню для вашего сайта
#mymenu {
float: left;
width: 150px;
height: auto;
margin: 20px 10px;
list-style: none;
}
#mymenu li {
display: block !important;
width: auto;
padding: 0 10px;
font-size: 18px;
}
#mymenu li ul {
display: none;
width: 200px;
}
#mymenu li:hover ul {
display: block;
list-style: none;
margin: 0 0 0 0px;
padding: 0;
}
#mymenu li ul li {
float: left;
width: 200px;
padding: 5px 0;
font-size: 14px;
}В данном случае меню выпадает вертикально вниз.
#mymenu li:hover ul {
display: block;
list-style: none;
margin: 0 0 0px 100px;
position: absolute;
padding: 0;
}Выпадающее меню для сайта
Выпадающее меню будет полезным для сайта, где планируется меню с большим количеством внутренних пунктов. Преимущества выпадающего меню — это экономия места, удобство использования и простота изготовления 😉 В данном примере меню я не использовал ничего, кроме HTML и CSS, что дает определенные плюсы. Это меню можно сделать многоуровневым — хотя, возможно будет не аккуратно смотреться, но бывают случаи, что это просто необходимо.
Если у вас код откажется работать — пишите в комментарии, подправлю вам лично 🙂
Удачной работы! 😉
Опубликовано:
Создание выпадающего меню CSS
Одной из самых основных функций, которыми пользуется большинство веб-сайтов, является простое навигационное меню, которое часто включает в себя некоторый тип «выпадающего списка».
В наши дни меню могут принимать все формы и формы, от простого сложенного списка (слева, внизу) до «мега» меню, включающего фотографии и другие медиафайлы (справа, внизу). Мы собираемся построить простую версию слева, хотя эту начальную структуру можно легко перепрофилировать для создания более сложных меню.
Существует столько же способов их кодирования, сколько и дизайнов, но основные функциональные возможности могут быть легко достигнуты с помощью чистого HTML и CSS (без какого-либо javascript), и это отличный инструмент для изучения семантического HTML и CSS в процесс.
Сначала сосредоточимся на построении правильной структуры HTML на странице. Все начинается со скромного маркированного списка, например:
- Дом
- О
- Услуги
- Веб-разработка
- Графический дизайн
- Брендинг
- Портфолио
- Дизайн
- Фотография
- Интерактивный
- Контакт
Это примерное меню, которое можно найти на веб-сайте портфолио.
Маркеры первого уровня («Главная», «О нас», «Услуги», «Портфолио», «Контакты») — это элементы навигации «верхнего уровня», которые всегда видны.
Здесь есть два «подменю», которые представлены пунктирными маркерами в разделах «Услуги» и «Портфолио». Мы должны увидеть их после того, как наведем указатель мыши на верхний уровень.
Кроме того, каждый из маркированных пунктов меню должен быть ссылкой на соответствующую страницу. Хотя мы не собираемся создавать эти страницы здесь, для целей руководства мы добавим ссылки на каждый элемент с местами назначения отдельных HTML-страниц с одинаковым именем.
Шаг 1
Вот как должен выглядеть наш HTML. Введите или вставьте это в свой HTML-файл везде, где вы хотите, чтобы ваше меню отображалось (возможно, вверху страницы, под открывающим тегом
).<навигация> <ул>
html">Веб-разработкаДавайте немного проверим HTML:
Тег
- — это ненумерованный список, а тег
Это выглядит как маркированный список из-за тегов
- . Если бы вместо этого мы использовали теги
- (в частности, НЕ верхний уровень
- , у которого есть класс меню)
нав ул ул { максимальная ширина: 11em; цвет фона: #585858; }Я ориентируюсь только на ul второго уровня, используя каскад : в этом случае
- внутри
- внутри
- , список был бы пронумерован. (См. эту ссылку для получения дополнительной информации об упорядоченных списках.)
Если вы следите за серией и используете HTML5Boilerplate в качестве основы, когда вы вставили это на свою страницу, вы, скорее всего, НЕ увидели маркеры, вместо этого ваш список, вероятно, выглядел так:
Это потому, что мы вложили наш список в элемент
нав ул, навигация { стиль списка: нет; изображение в стиле списка: нет; }Если вы не отрабатываете HTML5Boilerplate, вы можете добавить этот фрагмент в свой собственный файл CSS. Этот код в основном удаляет любые маркеры или числа, обычно связанные с упорядоченными или неупорядоченными списками, если эти списки вложены в элемент
Шаг 2
Теперь у нас есть вся необходимая HTML-структура на нашей странице — остальная часть магии обрабатывается CSS. Итак, откройте ваш файл css, и мы приступим к стилизации.
Если вы работаете с HTML5Boilerplate, откройте файл main.css и добавьте следующие примеры где-то между этими двумя комментариями:
/* ================= Пользовательские стили автора ================= */ Вы добавите сюда свой код! /* ================== Вспомогательные классы ================= */
Первое, что мы собираемся сделать, это удалить все поля и отступы по умолчанию, которые браузер назначает нашим элементам списка, с этим набором правил CSS:
нав ул, нав ол, нав ли { маржа: 0; заполнение: 0; плыть налево; } навигация { дисплей: блок; }Второй набор правил присваивает всем ссылкам в меню отображаемый тип блока.
Поскольку ссылки по умолчанию являются встроенными, но здесь мы хотим, чтобы они определяли структуру нашего меню, нам нужно преобразовать их в блочный тип.Теперь ваше меню должно выглядеть сжатым, вот так:
Уже заметили, что элементы «вспомогательной навигации» второго уровня находятся ниже верхних элементов? Это потому, что мы назначили display:block всем ссылкам, и все плавает.
Шаг 3
Чтобы начать стилизацию нашего меню, давайте назначим несколько визуальных стилей, чтобы начать определять, как все это выглядит. При этом убедитесь, что вы используете инспектор элементов в браузере, чтобы лучше понять структуру меню. Мы обновим наш набор правил навигации {} (обновления выделены) :
навигация { дисплей: блок; набивка: 1em; текстовое оформление: нет; цвет: #d0d0d0; }Результат должен выглядеть примерно так:
Здесь начинаются сложности. Мы хотим, чтобы наши выпадающие меню располагались вертикально, чтобы «Веб-разработка, графический дизайн и брендинг» отображались сверху вниз, а не слева направо.
Итак, на какой элемент HTML мы можем настроить таргетинг в нашем CSS, чтобы это произошло? Взгляните в свой инспектор элементов и посмотрите, сможете ли вы сами это понять.Шаг 4
Элемент
- , вложенный в «сервисы»
- (в частности, НЕ верхний уровень
Поскольку ссылки по умолчанию являются встроенными, но здесь мы хотим, чтобы они определяли структуру нашего меню, нам нужно преобразовать их в блочный тип.
Итак, на какой элемент HTML мы можем настроить таргетинг в нашем CSS, чтобы это произошло? Взгляните в свой инспектор элементов и посмотрите, сможете ли вы сами это понять.
Увеличение ширины выпадающего списка 
Таким образом, чтобы сделать поле интуитивно понятным раскрывающимся списком, последний шаг — немного изменить класс select и добавить фоновое изображение стрелки.
