Вертикальное выпадающее меню на CSS

29 января 2020 | Автор: | Категория: Уроки вёрстки

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 id="nav">
 
 	<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

<div class="scriptcode">
/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка. */
li:hover ul, li.over ul{
display: block;
}
/* Задаём стили для выпадающего меню */
ul li a:hover {
background: #77CF7F;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* ХАК для ie, чтобы и там всё корректно отображалось:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</div>

JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.

Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip

4 комментария к "Вертикальное выпадающее меню на CSS"

  1. ЛОТОС | 15 августа 2010 @ 16:29
  2. Специально нашёл шестую версию IE и в ней проверил эту менюшку — Не работает — это первое. Во-вторых: совсем некорректно смотрятся стрелки, т.к. вставлены как фоновое изображение, а лучше вставить стрелки как маркеры списка в виде картинки/стрелки. Тогда надписи меню не будут сливаться/накладываться на стрелки :)

    Ответить

  3. seogrot | 16 августа 2010 @ 0:17
  4. Если честно в 6й версии работу скрипта не проверял, смотрел в Firefox, Opera и IE 7. Я как бы не профессионал только учусь :).
    По поводу стрелок, аналогично в приведённых браузерах работают, как для примера сойдёт. А вообще спасибо за критику, учту!

    Ответить

  5. Алексей | 23 декабря 2010 @ 12:55
  6. Искал подходящею статью как раз по теме меню) Начну пожалуй с вашей. Спасибо)

    Ответить

  7. stalker828 | 1 марта 2011 @ 21:04
  8. Спасибо!!! все класно работает!! немного поиграл в стилях для своего сайта и все встало просто суппер! еще раз огромное спасибо!!!!

    Ответить

Добавить комментарий для Алексей Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *