Горизонтальное выпадающее меню
Приветствую вас, друзья на своём блоге и сегодняшняя статьи будет посвящена созданию горизонтального выпадающего меню без использования javascript. Кстати, именно этой статьёй я открываю новую рубрику Уроки HTML&CSS.
Итак приступим, сразу предлагаю посмотреть на демонстрационный вариант данного меню, чтобы смогли понимать о каких деталях меню идет речь.
Для начала создадим каркас из html. Первое, что нам необходимо сделать это подключить файл стилей:
<link rel="stylesheet" type="text/css" href="style.css">
Далее мы пропишем меню для первого уровня ссылок. Для этого мы создадим блок с классом .menu и внутри этого блока создадим еще один блок с идентификатором #menu. Выглядит это примерно так:
<div class="menu"> <div id="menu"> </div> </div>
Далее внутри блока с идентификатором #menu прописываем списки первого уровня меню. Здесь у нас появляется теги ul внутри которых заключены теги li, а в них в свою очередь заключены ссылки.
<div class="menu">
<div id="menu">
<ul>
<li><a id="menu" href="#">ГЛАВНАЯ</a></li>
<li><a id="menu" href="#">О КОМПАНИИ</a></li>
<li><a id="menu" href="#">УСЛУГИ</a></li>
<li><a id="menu" href="#">БЛОГ ВЕБМАСТЕРА</a></li>
<li><a id="menu" href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
Обратите, также, внимание на то, что всем тегам «a» мы добавили идентификатор #menu.
<li><a id="menu" href="#">КОРПОРАТИВНЫЙ</a></li>
Позже вы поймёте для чего это было сделано.
Если вы хотите, чтобы в вашем меню также как и демонстрационном варианте отображалась стрелка, то вам необходимо вставить следующий код в том месте где вы хотите показать, что при наведении на данный пункт выпадет список подменю. В данном примере это реализовано при помощи вставки картинки этой самой стрелки. В исходниках хранится эта картинка. Но если вы не хотите этого делать, то вы можете этого не делать. На работу не влияет.
<li><a id="menu" href="#">УСЛУГИ <img src="images/arrow-down.png" alt=""></a>
Теперь я предлагаю перейти к ссылкам второго уровня меню. Для того чтобы внести пункты меню второго уровня в определённом пункте меню первого уровня, нужно перед закрывающимся тегом li первого уровня добавить новый список, который будет заключен в теги ul. Выглядит это так:
<div class="menu">
<div id="menu">
<ul>
<li><a id="menu" href="#">ГЛАВНАЯ</a></li>
<li><a id="menu" href="#">О КОМПАНИИ</a></li>
<li><a id="menu" href="#">УСЛУГИ <img src="images/arrow-down.png" alt=""></a>
<ul>
<li><a id="menu" href="#">ВИЗИТКА</a></li>
<li><a id="menu" href="#">КОРПОРАТИВНЫЙ</a></li>
<li><a id="menu" href="#">БИЗНЕС</a></li>
<li><a id="menu" href="#">ИНТЕРНЕТ МАГАЗИН</a></li>
<li><a id="menu" href="#">ПРОДВИЖЕНИЕ</a></li>
<li><a id="menu" href="#">ОПТИМИЗАЦИЯ</a></li>
<li><a id="menu" href="#">ДИЗАЙН</a></li>
</ul>
</li>
<li><a id="menu" href="#">БЛОГ ВЕБМАСТЕРА <img src="images/arrow-down.png" alt=""></a>
<ul>
<li><a id="menu" href="#">ВИЗИТКА</a></li>
<li><a id="menu" href="#">КОРПОРАТИВНЫЙ</a></li>
<li><a id="menu" href="#">БИЗНЕС</a></li>
<li><a id="menu" href="#">ИНТЕРНЕТ МАГАЗИН</a></li>
<li><a id="menu" href="#">ПРОДВИЖЕНИЕ</a></li>
<li><a id="menu" href="#">ОПТИМИЗАЦИЯ</a></li>
<li><a id="menu" href="#">ДИЗАЙН</a></li>
</ul>
</li>
<li><a id="menu" href="#">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
Стилизация выпадающего меню
Теперь перейдём к стилизации меню, для того, чтобы это всё выглядело и работало как положено. Если вы будете скачивать исходники, то в первую очередь в файле style.css необходимо удалить это:
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
Это нужно сделать, потому что, скорее всего, в основном документе стилей вашей темы этот код уже есть. Также скорее всего шрифт тоже уже установлен.
Теперь давайте вспомним о том, что каждому тегу «а» мы назначали идентификатор #menu. Для этого идентификатора нам необходимо задать следующие параметры: убрать нижнее подчёркивание, задать белый цвет и если, у вас не задан шрифт в теге «body», то задать шрифт. Выглядит это так:
a#menu {
text-decoration: none;
color: #fff;
font-family: Arial, sans-serif; /* Если не задан шрифт в теги body или
где-то ещё. */
}
Далее мы зададим основной цвет блока с классом .menu и ширину блока с идентификатором #menu. А также расположение блока с идентификатором #menu и параметр overflow. Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
.menu {
background: #333333;
width: 100%;
}
#menu {
width: 1000px;
margin:0 auto;/*Располагаем блок ровно по центру*/
overflow: hidden;
}
Обратите внимание, что блоку с идентификатором #menu была присвоена ширина в 1000px, вы можете задать иную ширину, смотря под какой размер экрана вы используете это меню, а также вы можете задать ширину в процентах, но будьте внимательны, могут произойти не понятные изменения.
Далее зададим тегам тегам li выравнивание по левому краю, для того, чтобы все теги li выравнивались в одну строку. Также зададим отступы и позиционирование текста.
#menu li {
float: left;
padding: 0;
text-align: center;
}
Теперь необходимо задать параметры всем тегам «a» без идентификатора #menu. Во-первых, необходимо задать ширину для того, чтобы наметить границы каждой ссылки. Так как, при наведении на каждую ссылку будет изменяться фон этой ссылки. Также мы укажем отступы, но только верхние. Разместим текст по центру, укажем свойство display со значением block. Свойство display определяет, как элемент должен быть показан в документе. И ещё укажем свойство transition. Оно служит для того чтобы указать время для изменения элемента. В данном примере изменяться будет фон ссылки, мы укажем для свойства transition 0.2s — это говорит о том, что появление фона у тега «а» займёт 0,2 секунды.
#menu a {
width: 180px;
padding: 28px 0;
text-align: center;
display: block;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
Теперь укажем изменение цвета фона на чёрный при наведении на ссылку:
#menu a:hover {
background: #000;
}
Далее мы пропишем вложенному списку, который заключен в тег «ul» следующее параметры: ширину — задаст ширину выпадающего списка, абсолютное позиционирование, высоту на которой отобразится выпадающий список и фон. Кстати, обратите внимание, в демонстрационном варианте выпадающий список появляется на том же уровне, что и основной горизонтальный, это связано с тем, что в свойстве top мы указали 0%, если вы хотите опустить выпадающее меню ниже, то укажите в свойстве top значение больше нуля в процентах или пикселях. Так как в демонстрационном варианте меню находится в самом верху страницы, то значение top равняется нулю, но если ваше меню будет располагаться ниже, то соответственно мы будем менять значение top методом подбора нужной высоты.
#menu ul li ul {
width: 180px;
position: absolute;
top: 0%;
background: #333333;
}
Теперь необходимо сделать так, чтобы выпадающий список не отображался, пока курсор не будет наведен на нужный пункт меню. Для этого добавим в #menu ul li ul свойство display со значением none.
#menu ul li ul {
width: 180px;
position: absolute;
top: 0%;
background: #333333;
display:none;
}
А затем пропишем следующее правило: если наводим на элемент «li» то отобразятся все теги «li» второго уровня.
#menu ul li:hover > ul {
display: block;
}
И напоследок, мы добавим нижнюю границу для всех тегов «li» второго уровня.
#menu li li {
border-bottom: 1px solid #fff;
}
Вот такое простенькое выпадающее меню у нас получилось. Удачи и до новых встреч!