Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Sozdanie-gorizontalnogo-menyu-sajta

Создание горизонтального меню

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальное меню<title>
<style>
ul{
list-style:none; /* Убираем маркер списка */
background:#F9E3C3; /* Задаём цвет фона меню или списка */
width:9em; /* Ширина блока */
padding:0.4em 0 0.4em 10%; /* Отступы внутри блока */
}
li{
width:65%; /* Ширина строки списка */
margin:0.3em 1em 0.3em 0; /* задаём значение полей вокруг пункта меню */
padding:0.5em; /* Задаём отступы внутри строчки списка */
background:#CCFFFF; /* Цвет фона пункта */
}
li a{
text-decoration:none; /* Убираем нижнее подчеркивание у ссылок */
color:#000000; /* Цвет текста ссылки */
}
li:hover,li:hover a {
background:#006666; /* Фон пункта меню при выделении */
color:#ffffff; /* Цвет ссылки */
cursor:pointer; /* Устанавливаем вид курсора при выделении пункта меню */
}
</style>
</head>
<body>
<nav>
    <ul>
       <li><a href="#">Категории</a></li>
       <li><a href="#">Новости</a></li>
       <li><a href="#">Конкурсы</a></li>
       <li><a href="#">Архив сайта</a></li>
    </ul>
</nav>
</body>
</html>

Всё что нам надо сделать это выстроить пункты меню не по-вертикали, а по-горизонтали. Для этого зададим положение пункта меню с помощью свойства float. Код CSS будет следующим:

ul{
    list-style:none; /* Убираем маркер списка */
    background:#F9E3C3; /* Задаём цвет фона меню или списка */  
    width:95%; /* Ширина блока */ 
    padding:0.4em; /* Отступы внутри блока */
    margin:auto; /*Выравниваем блок списка по центру */
    height:3em; /* Задаём высоту блока */
}
li{
   float:left; /* Задаём положение пункта меню */
   width:19%; /* Ширина */
   margin:0.3em; /* задаём значение полей вокруг пункта меню */
   padding:0.5em; /* Задаём отступы */ 
   background:#CCFFFF; /* Цвет фона */
}
li a{    
    text-decoration:none; /* Убираем нижнее подчеркивание у ссылок */  
    color:#000000; /* Цвет текста ссылки в списке */
}
li:hover,li:hover a {
    background:#006666; /* Фон при выделении */
    color:#ffffff; /* Цвет ссылки */
    cursor:pointer; /* Устанавливаем вид курсора при выделении */
}

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

Можно воспользоваться несколько другим способом для создания меню, а именно, использовать вместо свойства float, другое свойство display со значением inline-block, которое генерирует наш пункт меню, как блочный и создаёт обтекание нашего блока другими элементами. Код и результат можно увидеть здесь.



наверх