Вертикальное меню на CSS
До сих пор мы с Вами занимались в основном одной теорией и изучали css свойства, а сегодня мы перейдем к практике, и при помощи уже изученных свойств, прошу заметить, что только при помощи тех, которые мы рассматривали, создадим вертикальное меню на CSS. В результате меню будет обычное, а не выпадающее. А теперь можно приступать к написанию кода:
<html>
<head>
<title>Вертикальное меню</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Меню 1</a>
</li>
<li>
<a href="#">Меню 2</a>
</li>
<li>
<a href="#">Меню 3</a>
</li>
<li>
<a href="#">Меню 4</a>
</li>
<li class="last">
<a href="#">Меню 5</a>
</li>
</ul>
</div>
</body>
</html>
Применяем стили, благодаря которым мы и получим конечный результат:
#menu {
background: #ccc;
border: 1px solid #000;
width: 200px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
border-bottom: 1px solid #000;
}
#menu ul li a {
color: #00f;
display: block;
font-size: 20px;
padding: 10px 0 10px 10px;
text-decoration: none;
}
#menu ul li a:hover {
background: #eee;
}
#menu .last {
border-bottom: none;
}
В результате выполнения данного кода, вы получаете вот такое меню:
Хоть оно получилось довольно простое, но целью урока было показать, каким образом можно создать вертикальное меню, а все остальные, так называемые навороты, вы сможете применить самостоятельно. И вкратце поясню, чем мы занимались. Вначале был создан блок меню, в который поместили ненумерованный список, и в каждый элемент li вложили ссылку. Все остальное благодаря CSS коду, установили цвет фона меню, фиксированную ширину и данному блоку задали рамку. В дальнейшем для списка убрали все отступы, поля, а также маркер, которые были установлены по умолчанию. Для каждого элемента меню li задали рамку снизу, чтобы пункты меню можно было отделить друг от друга, и у последнего элемента при помощи класса last отменили рамку снизу, для того, чтобы она не сливалась с нижней границей меню. И последнее к чему мы приступили - к оформлению ссылок. Задали синий цвет, размер шрифта, убрали подчеркивание, сделали их блочными элементами, чтобы можно было задать поля сверху и снизу. И в конечном результате для ссылки установили псевдокласс, при помощи которого при наведении курсора на ссылку меняется цвет фона. Вот и весь процесс создания вертикального меню на CSS. Если вы впервые сталкиваетесь с CSS, то для Вас это покажется сложным, но уверяю, что данное меню является одним из самых легких в создании. Надеюсь, что некоторым из Вас было интересно прочитать данную статью и возможно Вы узнали для себя что-то новое. На этом все, до скорой встречи!
