Как создать горизонтальное меню CSS
В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.
Создаем горизонтальное меню CSS
Для написания сценария можете использовать любой 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:
Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
border-radius: 50px;
}После добавления CSS:
Он выглядит лучше, правда?
Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы 'li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}После добавления CSS:
Шаг 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:
Шаг 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:
Шаг 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:
На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.
Дополнительный шаг 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:
Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:
border-radius: 5px;После добавления CSS:
Мы могли бы добавить еще больше свойств, чтобы придать меню более профессиональный вид. Но это наше первое горизонтальное меню для сайта, поэтому не будем усложнять его. Если у вас есть какие - либо вопросы, задайте их нам.