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


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

Создание вертикального меню сайта

Я уже писал про, то как сделать меню на сайте. Сегодня я решил расширить тему так, как примеры в старой статье стали, так сказать менее актуальны, да и тема была не совсем раскрыта. Ну а делать мы с вами будем вертикальное меню.
вертикальное менюБуду основываться только на свои знания и опыт. И так начнём! Одно дело скопировать готовый код и вставить его на страницу, здесь я думаю большого ума не надо. А что если приходится делать всё с нуля? Обычно с этим вопросом сталкиваются верстальщики, которые верстают страничку из макета PSD под заказ. Давайте с вами разберёмся с чего же начать? Пожалуй сейчас со мной согласятся многие разработчики, что меню делается на основе ненумерованного списка. Что ж тогда создадим его:

<ul>
   <li>Категории</li>
   <li>Новости</li>
   <li>Конкурсы</li>
   <li>Архив сайта</li>
</ul>

Результат вы можете увидеть здесь. Согласитесь не важно выглядит, всего лишь — обычный список. Давайте-ка подумаем, а зачем вообще нужно меню на сайте? Ответ очевиден:


Меню используется для навигации по сайту и служит для удобства передвижения посетителей сайта передвигаться по страничкам, рубрикам, подкатегориям и т.п.


Не судите строго определение придумал сам. Так вот в меню обязательно должны присутствовать ссылки на другие страницы:

<nav>
       <ul>
           <li><a href="#">Категории</a></li>
           <li><a href="#">Новости</a></li>
           <li><a href="#">Конкурсы</a></li>
           <li><a href="#">Архив сайта</a></li>
       </ul>
</nav>

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

В принципе можно сказать, что навигация готова, но удобно ли она посетителю? Здесь уже надо считаться с понятием юзабилити сайта.

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

Стили для вертикального меню html

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

ul{
    list-style:none;
}
li a{
    text-decoration:none;
}

Вот что у нас получилось в результате. Некоторые вебмастера не убирают маркер, а ставят свой. Здесь вопрос на любителя, либо требование макета, который поступил от заказчика.
Следующим шагом будет обозначение блока и пунктов списка меню:

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; /* Цвет текста ссылки */
}

Результат можно посмотреть здесь. Осталось только сделать небольшой штрих и наше вертикальное меню будет готово. Добавим выделение пункта меню при помощи псевдокласса :hover:

li:hover, li:hover a {
    background:#006666; /* Фон пункта меню при выделении */
    color:#ffffff; /* Цвет ссылки */
    cursor:pointer; /* Устанавливаем вид курсора при выделении пункта */
}

Окончательный вариант примет вот такой вид. Окончательный код:


<!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>

В этой статье я не стал создавать какое-то супер красивое меню, с кучей свойств, здесь  важно было показать как оно делается. А как получилось донести до вас тему, уважаемые читатели решать только вам.



наверх