Я уже как-то писал статью о том, как сделать меню на чистом CSS. Но тогда это меню делалось на float , а теперь я расскажу как сделать его при помощи flexbox.
Как и впрошлый раз, я не буду расписывать все до мельчайших подробностей, но теперь, я прикреплю видео, которое возможно вам поможет больше. Видео я прикреплю ниже 😉
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<ul class="menu"> <li><a href=#>Menu 1</a> <ul class="submenu"> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> </ul> </li> <li><a href=#>Menu 2</a> <ul class="submenu"> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> </ul> </li> <li><a href=#>Menu 3</a> <ul class="submenu"> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> </ul> </li> <li><a href=#>Menu 4</a> <ul class="submenu"> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> </ul> </li> <li><a href=#>Menu 5</a> <ul class="submenu"> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> </ul> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.menu { display: flex; flex-direction:row; justify-content:space-around; margin: 0; padding: 0; list-style: none; border:1px solid black; border-radius:3px; } .menu li{ position:relative; } .menu > li > a { display: block; padding: 10px; color: white; background-color: white; color:black; text-decoration: none; transition: all 0.3s ease; } .menu li a:hover { background-color: black; color:white; } .submenu { display: none; position: absolute; width: 100px; bottom: 0px; left: 0px; background-color: white; transform:translate(0,100%); border: 1px solid black; border-radius:0 0 3px 3px; } .submenu li { display: block; } .submenu li a { display: block; padding: 10px; color:black; text-decoration: none; } .menu li:hover .submenu { display: block; } |
А вот и само видео, как я и обещал 🙂
Буду очень благодарен, если вы подпишетесь на мой канал на youtube, а также поставите данному видео лайк.
И еще, у нас есть телеграм-канал, чтобы вы всегда были вкурсе новых статей 😉
Если у вас есть вопросы, или интересные темы для статьи, которые хотите что бы я подсветил, оставляйте свои комментарии 🙂
Оставьте ответ