Как сделать меню?

9 января 2017

Всем привет, сегодня в этой статье рассмотрим, как создать горизонтальное меню с анимацией на чистом html и css, без применения каких-либо плагинов и библиотек.

Меню на html

Перед тем, как создавать навигацию, нужно создать саму страницу html. Для этого, создаем обычный текстовый документ и переименовываем его в любое имя, далее меняем его расширение txt на html. У меня получилось menu.html, дальше нам нужно написать структуру страницы html, для этого открываем файл в редакторе, кодируем его в UTF-8 или UTF-8 без BOM и пишем такой код:

<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

Отлично, теперь в тело сайта вставляем само меню, написанное на основе маркированного списка:

<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li>Главная</li>
<li>Новости</li>
<li>Профиль</li>
<li>Друзья</li>
<li>Выход</li>
</ul>
</body>
</html>

Меню на css

Мы написали меню на html, почти, теперь добавим к нему стили css. Стили я не буду выносить во внешний файл, буду писать прямо в коде html с применением тега style, если ты забыл, как это делается, то советую прочесть эту статью. Добавим тег стилей, сразу после меню:

<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li>Главная</li>
<li>Новости</li>
<li>Профиль</li>
<li>Друзья</li>
<li>Выход</li>
</ul>
<style>
</style>
</body>
</html>

Начнем писать стили с тега ul.
Зададим внутренние отступы по нулю со всех сторон:

<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li>Главная</li>
<li>Новости</li>
<li>Профиль</li>
<li>Друзья</li>
<li>Выход</li>
</ul>
<style>
ul{
padding:0;
}
</style>
</body>
</html>

Дальше, зададим ширину в 650px и внешние отступы по нулям, а для центрирования добавим auto.

ul{
padding:0;
width:650px;
margin:0 auto;
}

Теперь займемся пунктами li, уберем круглые маркеры(list-syle), чтобы меню было горизонтальное, прижмем его к левому краю(float):

li{
list-style:none;
float:left;
}

Далее, зададим фон(background) и изменим цвет шрифта(color):

li{
list-style:none;
float:left;
background:rgb(25, 181, 254);
color:white;
}

Зададим ширину(width), внешние и внутренние отступы:

li{
list-style:none;
float:left;
bacground:rgb(25, 181, 254);
color:white;
width:100px;
margin:5px;
padding:10px;
}

Обозначим размер шрифта(font-size) и расположим его по центру(text-align):

li{
list-style:none;
float:left;
bacground:rgb(25, 181, 254);
color:white;
width:100px;
margin:5px;
padding:10px;
font-size:20px;
text-align:center;
}

Отлично, теперь скруглим углы(border-radius) и изменим значок курсора со стрелочки на руку:

li{
list-style:none;
float:left;
bacground:rgb(25, 181, 254);
color:white;
width:100px;
margin:5px;
padding:10px;
font-size:20px;
text-align:center;
border-radius:3px;
cursor:pointer;
}

Со стилями достаточно, продолжим позже, теперь для анимирования нам нужен дополнительный элемент. Создадим внутри пунктов li блок div с классом a и внутри напишем аналогичный текст:

<!doctype html>
<html>
<head>
</head>
<body>
<ul>
<li><div class="a">Главная</div>Главная</li>
<li><div class="a">Новости</div>Новости</li>
<li><div class="a">Профиль</div>Профиль</li>
<li><div class="a">Друзья</div>Друзья</li>
<li><div class="a">Выход</div>Выход</li>
</ul>
<style>
ul{
padding:0;
width:650px;
margin:0 auto;
}
li{
list-style:none;
float:left;
bacground:rgb(25, 181, 254);
color:white;
width:100px;
margin:5px;
padding:10px;
font-size:20px;
text-align:center;
border-radius:3px;
cursor:pointer;
}
</style>
</body>
</html>

Теперь напишем стили для этого класса. Для начала, зададим абсолютное позиционирование(position) и зададим фон(background):

.a{
position:absolute;
background:#2ecc71;
}

Дальше, ширина, скругление углов и размер шрифта:

.a{
position:absolute;
background:#2ecc71;
width:100px;
border-radius:3px;
font-size:20px;
}

После, внутренние отступы, положение относительно верха родителя(top) и левого края родителя(left):

.a{
position:absolute;
background:#2ecc71;
width:100px;
border-radius:3px;
font-size:20px;
padding:10px;
top:0;
left:-120px;
}

Теперь добавим свойства нашим пунктам li, а именно зададим позиционирование и скроем невмещяющийся контент(overflow):

li{
list-style:none;
float:left;
bacground:rgb(25, 181, 254);
color:white;
width:100px;
margin:5px;
padding:10px;
font-size:20px;
text-align:center;
border-radius:3px;
cursor:pointer;
position:relative;
overflow:hidden;
}

Дальше используем псевдокласс hover, а именно при наведении на пункт li будут меняться стили у класса a и изменяться свойство left:

li:hover .a{
left:0;
}

Отлично, теперь наша анимация будет работать, но будет работать незаметно, не плавно. Чтобы этого избежать, нужно добавить свойство transition к классу ".a":

.a{
position:absolute;
background:#2ecc71;
width:100px;
border-radius:3px;
font-size:20px;
padding:10px;
top:0;
left:-120px;
transition:left 0.5s;
-webkit-transition:left 0.5s;
-moz-transition:left 0.5s;
-o-transition:left 0.5s;
}

Вот и все, как итог, у вас должно получиться что-то подобное

Заключение

Всем спасибо за внимание, до скорых встреч.
Пока =)

Автор: Алексей Повольнов

Следующая статья