Верстка простого горизонтального меню шаг за шагом!

Здравствуйте, уважаемые читатели моего блога! Сегодняшняя  статья будет очень полезная для начинающих верстальщиков. Так как сегодня мы будем с вами верстать простое горизонтальное меню. Перед тем как мы приступим непосредственно к верстке, хочу пару слов сказать о том, почему я решил выбрать именно эту тему для статьи.

На самом деле все достаточно просто, когда я думал над темой очередного урока для сайта я начал вспоминать и анализировать свой опыт изучения верстки, то с чем мне приходилось сталкиваться на начальном этапе становления себя как верстальщика, что больше всего мне было непонятно при изучении данной области и т.д. Все эти вопросы я задавался себе, чтобы лучше всего разобраться в том, что может быть интересно человеку, который начинает свой путь верстальщика. И лично у меня, как только я начинал изучать верстку, больше всего возникало вопросов по верстке различных меню, особенно если речь идет о многоуровневом меню. И поэтому сегодня мы будем говорить о меню, а конкретней о горизонтальном меню. Итак начинаем!

Начинаем верстку нашего горизонтального меню!

Как вы наверняка догадываетесь первым делом нам нужно создать html стараницу со стандартной разметкой и подключить к ней файл стилей. Не буду подробно останавливаться на данном шаге, так как все-таки надеюсь, что  вы не настолько начинающие, чтобы подробно разсказывать вам, что такое body и head и как подключаются стили. Скажу лишь, что помимо стилей для нашего меню в файл css я напишу самый простой reset, чтобы обнулить стили и добиться одинакового отображения отступов во всех браузерах. Вот собственно так выглядит мой простейший ресет:

*{
	padding:0;
	margin:0;
}

Про обнуление стилей тоже пока ничего подробно говорить не буде, так как по сути это тема для  еще одной статьи, единственное, что вам нужно знать о вышеописанном коде, это то что благодаря данному коду у всех элементах страницы которые мы будем писать обнулятся отступы margin и padding, это нужно делать, для того чтобы наша страница одинаково выглядела во всех браузерах.

Итак что в нас есть на данном этапе? У нас есть html страница со стандартной разметкой:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Горизональное меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
</body>
</html>

И у нас есть подключенный к данной странице файл стилей (у меня это style.css), со следующем содержимым:

*{
	padding:0;
	margin:0;
}

Следующим этапом будет создания html разметки для нашего меню.

Создаем разметку для меню

В нашей разметке мы будем использовать новый тег <nav>, который появился в HTML5,  я решил вас сразу приучать к новым тегам, чтобы так сказать следовать тренду и стандарту.Несмотря на то, что новые теги HTML 5 не поддерживаются старыми браузерами я все же настоятельно рекомендую использовать их в своей верстка, так как рано или позно вам всеравно нужно будет перейти на них, как в свое время верстальщики перешли от с табличной верстке к блочной, такова реальность, лучше следовать тренду!

И раз мы уже заговорили о поддержке новых тегов html 5, чтобы у нас не возникало проблем с этим в старых браузерах, в наш документ нужно подключить специальную библиотеку — html5shiv. Делается это вставкой в
раздел head вашей страницы следующего кода:

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Все после этого тег <nav>(и другие теги оносящиеся к HTML5) будут нормально восприниматься старыми браузерами.

Вернемся непосредственно к нашей разметке. Далее нам нужно в наш тег  <nav> вставить маркированый список, у меня это выглядит так:

<nav class="menu">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Портфолио</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </nav>

Так же как видите я к нашему меню <nav>  добавил класс .menu, сделал я это для того, чтобы если вдруг на нашей странице будет использоваться еще один тег <nav> у нас небыло проблем со стилями.

Итак с разметкой мы вроде закончили пора приступать непосредственно к написанию стилей, так как сейчас наше меню выглядит мягко говоря не очень:

html_ul

Пишем стили нашего горизонтального меню

И так первым делом при верстке меню нам нужно убрать маркеры списка, они нам явно не нужны, делается это так:

ul{
	list-style:none;
}

После этого наше меню станет таким:

menu2

Мне не очень нравится, что наше меню прилеплено к краям браузера, давайте исправим это:

.menu{
	width:960px;
	margin:50px auto;
}

Данным кодом мы задали ширину нашему меню, дали ему отступы сверху и низу по 50px и расположили по центру. Кто не знает если в блочного элемента есть ширина то для того чтобы расположить данный элемент строго по центру нам нужно всего лишь задать ему внешний отступ (margin) справа и слева со значением auto.

Следующим этапом нам нужно уже наконец-то сделать наше меню горизонтальным, делается это заданием элементам  <li> float: left

.menu li{
	float:left;
}

Все теперь наше меню стало горизонтальным.

gorizont-menu

Если вы не поняли, что именно случилось и что делает свойство float рекомендую погуглить информацию о данном свойстве и хорошенько изучить его, так как
без него не обходится ни одна страница верстки, это я вам точно говорю. Ну да ладно продолжаем!

Давайте теперь немного поработаем с ссылками меню и преобразуем их в нормальный вид. Предлагаю задать нашим ссылкам отступы слева и сверху, убрать нижнее подчеркивание, задать цвет текста и цвет фона:

.menu li а{
    display:block;/* Делаем ссылку блочным элементом*/
    padding:12px 20px;/* Задаем внутрение отступы */
    text-decoration: none; /* убираем нижнее подчеркивание */
    color:#fff;/* делаем цвет ссылки белым */
    background:#444;/* делаем цвет фона темным */
    font:14px Verdana, sans-serif;/* задаем размер и название шрифта */
}

Здесь одно из самых важных правил — display:block;. Дело в том, что по умолчанию ссылки являются строчными элементами, а к строчным элементам отступы в разных браузерах применяются по разному, поэтому  желательно ссылку сделать блочным элементом и только тогда применять к ней свойства связанные с внешним или внутренним отступами. Сейчас не хочется нагружать вас лишней информацией со временем на реальных примерах вы  сами поймете зачем здесь делается такой акцент.

Давайте посмотрим что у нас получилось, обновляем страницу браузера и тадам!:

menu3

Как видите выглядит не плохо, можно сказать, что в принципе наше меню готово. Единственное, что нужно еще сделать — это задать свет ссылок при наведении, ну еще как мне кажется меню лучше будет смотреться с разделителями между пунктами.

Начнем с разделителей:

.menu li{
	border-left:1px solid #666;
}
.menu li:first-child{
	border-left:none;
}

Что мы здесь сделали? Да все очень просто мы задали для наших пунктов (<li>) границу слева размером в 1px и цветом #666;. Что касается селектора .menu li:first-child , то здесь мы используем специальный псевдо- класс, который позволяет выбрать первый дочерний элемент списка. Про псевдоклассы тоже рекомендую более подробно почитать в интернете, узнаете много полезного.

Опять смотрим, что у нас получилось:

menu4

По моему с разделителями намного лучше.

Итак нам остается только задать цвет ссылки при наведении курсора, здесь тоже все очень просто:

.menu li a:hover{
	background:#888;
}

Опять используя специальный псевдокласс, в это раз — hover, мы задаем цвет ссылке при наведении на неё курсора, смотрим:

hover-menu

По моему крутяк 🙂 , надеюсь у вас вышло такое же меню как у меня.

На этом буду заканчивать данный урок, очень надеюсь, что он вам был полезен и теперь вы знаете, как верстать простое горизонтальное меню на чистом html и css. Конечно, мы сверстали одноуровневое меню, немного сложней будет с двухуровневым мену (с вложенным списком), но это уже тема для другого урока, на этом у меня все. Заходите еще, буду рад!!!