Меню
Спросить
???

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

9 января 2017
Как сделать меню?

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

Меню на html

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. </body>
  7. </html>

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <ul>
  7. <li>Главная</li>
  8. <li>Новости</li>
  9. <li>Профиль</li>
  10. <li>Друзья</li>
  11. <li>Выход</li>
  12. </ul>
  13. </body>
  14. </html>

Меню на css

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <ul>
  7. <li>Главная</li>
  8. <li>Новости</li>
  9. <li>Профиль</li>
  10. <li>Друзья</li>
  11. <li>Выход</li>
  12. </ul>
  13. <style>
  14. </style>
  15. </body>
  16. </html>

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <ul>
  7. <li>Главная</li>
  8. <li>Новости</li>
  9. <li>Профиль</li>
  10. <li>Друзья</li>
  11. <li>Выход</li>
  12. </ul>
  13. <style>
  14. ul{
  15. padding:0;
  16. }
  17. </style>
  18. </body>
  19. </html>

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

  1. ul{
  2. padding:0;
  3. width:650px;
  4. margin:0 auto;
  5. }

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

  1. li{
  2. list-style:none;
  3. float:left;
  4. }

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

  1. li{
  2. list-style:none;
  3. float:left;
  4. background:rgb(25, 181, 254);
  5. color:white;
  6. }

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

  1. li{
  2. list-style:none;
  3. float:left;
  4. bacground:rgb(25, 181, 254);
  5. color:white;
  6. width:100px;
  7. margin:5px;
  8. padding:10px;
  9. }

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

  1. li{
  2. list-style:none;
  3. float:left;
  4. bacground:rgb(25, 181, 254);
  5. color:white;
  6. width:100px;
  7. margin:5px;
  8. padding:10px;
  9. font-size:20px;
  10. text-align:center;
  11. }

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

  1. li{
  2. list-style:none;
  3. float:left;
  4. bacground:rgb(25, 181, 254);
  5. color:white;
  6. width:100px;
  7. margin:5px;
  8. padding:10px;
  9. font-size:20px;
  10. text-align:center;
  11. border-radius:3px;
  12. cursor:pointer;
  13. }

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <ul>
  7. <li><div class="a">Главная</div>Главная</li>
  8. <li><div class="a">Новости</div>Новости</li>
  9. <li><div class="a">Профиль</div>Профиль</li>
  10. <li><div class="a">Друзья</div>Друзья</li>
  11. <li><div class="a">Выход</div>Выход</li>
  12. </ul>
  13. <style>
  14. ul{
  15. padding:0;
  16. width:650px;
  17. margin:0 auto;
  18. }
  19. li{
  20. list-style:none;
  21. float:left;
  22. bacground:rgb(25, 181, 254);
  23. color:white;
  24. width:100px;
  25. margin:5px;
  26. padding:10px;
  27. font-size:20px;
  28. text-align:center;
  29. border-radius:3px;
  30. cursor:pointer;
  31. }
  32. </style>
  33. </body>
  34. </html>

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

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

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

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

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

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

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

  1. li{
  2. list-style:none;
  3. float:left;
  4. bacground:rgb(25, 181, 254);
  5. color:white;
  6. width:100px;
  7. margin:5px;
  8. padding:10px;
  9. font-size:20px;
  10. text-align:center;
  11. border-radius:3px;
  12. cursor:pointer;
  13. position:relative;
  14. overflow:hidden;
  15. }

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

  1. li:hover .a{
  2. left:0;
  3. }

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

  1. .a{
  2. position:absolute;
  3. background:#2ecc71;
  4. width:100px;
  5. border-radius:3px;
  6. font-size:20px;
  7. padding:10px;
  8. top:0;
  9. left:-120px;
  10. transition:left 0.5s;
  11. -webkit-transition:left 0.5s;
  12. -moz-transition:left 0.5s;
  13. -o-transition:left 0.5s;
  14. }

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

Анимационное меню на css

Заключение

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

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