Горизонтальное меню на CSS
Доброго дня, сегодня я расскажу Вам, как можно реализовать горизонтальное меню на CSS. При этом меню будет необычным, а резиновым, мы сможем добавлять в меню новые пункты, и оно будет растягиваться и самостоятельно подбирать нужную ширину элементов меню. Для начала мы приступим к написанию html кода.
<html>
<head>
<title>Горизонтальное меню CSS</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>
</ul>
</div>
</body>
</html>
Мы будем реализовывать меню при помощи ненумерованного списка, и в элементы списка будем вкладывать ссылки. И теперь будем применять стили, при помощи которых из простого набора ссылок, находящихся в списке, получится горизонтальное резиновое меню.
#menu {
width: 100%;
}
#menu ul {
display: table-row;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: table-cell;
}
#menu ul li a {
background: #ccc;
color: #000;
display: table-cell;
padding: 10px 0;
text-align: center;
text-decoration: none;
width: 1000px;
}
#menu ul li a:hover {
background: #aaa;
}
Вот мы и реализовали меню, получилось оно довольно простое, но ведь целью данной статьи было разобрать саму реализацию, а не украшения. Их Вы всегда успеете сделать, по вашему усмотрению. А сейчас я Вам расскажу, как мы все это реализовали.
Первым делом мы создали оболочку, в которую и поместили ненумерованный список. Блоку мы задали ширину, равную ста процентам, что будет означать то, что меню будет растягиваться на всю ширину экрана.
Для самого списка мы убираем все отступы и поля, которые присутствуют по умолчанию, также убираем маркер списка. И задаем, что список будет являться строкой таблицы.
Следующим делом, мы задаем для элементов списка, что они должны выглядеть как ячейки таблицы. И переходим к оформлению самих ссылок. Для каждой ссылки задаем серый цвет фона, цвет ссылок устанавливаем черным, убираем подчеркивание, сверху и снизу задаем поля, выравниваем ссылки по центру, и последние два главных момента. Вы знаете, что ссылки по умолчанию являются строчными элементами, так вот мы также задаем для них свойство display, и чтобы они также выглядели ячейками таблицы. И задаем ширину для ссылки равную тысяче пикселей. Благодаря этим двум свойствам меню получается на всю ширину экрана. Можно задавать значение ширины и меньше, однако, лучше этого не делать, поскольку, если задать ширину, например сто пикселей, Вы не получите нужный результат, а меню займет всего лишь 500 пикселей, т.к., в нем будут присутствовать 5 элементов по сто пикселей. А задав ширину в одну тысячу пикселей и поведение ссылки как ячейки таблицы, мы не даем вылезть за пределы ячейки и растягиваем меню на всю ширину экрана. Все это конечно не совсем легко осмыслить, но вот таким одним из многих способов можно реализовать горизонтальное меню на CSS. Вы можете добавлять, удалять пункты меню, и оно будет соответственно сжиматься и растягиваться. На этом мы завершим нашу тему, и в дальнейшем Вы сможете использовать такое меню уже на своем сайте.
