Создание горизонтального меню с помощью HTML и CSS

В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.

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

Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
    <li><a href=”#”>Link1</a></li>
    <li><a href=”#”>Link2</a>
          <ul>
            <li><a href=”#”>Link2.1</a></li>
            <li><a href=”#”>Link2.2</a></li>
            <li><a href=”#”>Link2.3</a></li>
         </ul>
    </li>
    <li><a href=”#”>Link3</a>
          <ul>
          <li><a href=”#”>Link3.1</a></li>
          <li><a href=”#”>Link3.2</a></li>
          </ul></li>    
    <li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>

Теперь, если вы откроете эту HTML — страницу в браузере, она будет выглядеть, как показано ниже. Далее мы добавим CSS код для позиционирования горизонтального меню с подменю для сайта.

• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4

Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением .css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:

<style>
/* Main */
    #menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    }
</style>

После добавления CSS:

Step1

Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:

#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    border-radius: 50px;
}

После добавления CSS:

Step2

Он выглядит лучше, правда?

Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative; 
}

После добавления CSS:

step3

Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #CC6600;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000; 
}

После добавления CSS:

step4

Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:

#menu li:hover > a{
    color: #CC3333; 
}

Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #222; }
   #menu li:hover > ul{
    display: block; 
}

После добавления CSS:

Step6

Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
}

Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
 }

Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:

#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
 }

После добавления CSS:

Step9

На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.

Дополнительный шаг 1: Для отображения указателя под выделенной ссылкой добавьте код, представленный ниже:

#menu ul li:first-child a:after{
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FF0000;
}

После добавления CSS:

Astep1

Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:

border-radius: 5px;

После добавления CSS:

finalhm

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

Перевод статьи «Create horizontal menu bar using HTML and CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.