
Всем привет, сегодня в этой статье рассмотрим, как создать горизонтальное меню с анимацией на чистом 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;
- }
Вот и все, как итог, у вас должно получиться что-то подобное

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