Пример:
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 38 39 40 41 42 43 |
<ul class="block-menu"> <li> <a href="#link"> <div class="name">Национальный Парк Йеллоустоун</div> <div class="arrow"> <svg viewBox="0 0 60 60"><polyline points="29.8,2.6 57.3,30 29.8,57.5 "/></svg> </div> </a> </li> <li> <a href="#link"> <div class="name">Мальдивские Острова</div> <div class="arrow"> <svg viewBox="0 0 60 60"><polyline points="29.8,2.6 57.3,30 29.8,57.5 "/></svg> </div> </a> </li> <li> <a href="#link"> <div class="name">Горы в Шотландии</div> <div class="arrow"> <svg viewBox="0 0 60 60"><polyline points="29.8,2.6 57.3,30 29.8,57.5 "/></svg> </div> </a> </li> <li> <a href="#link"> <div class="name">Национальный парк Роки-Маунтин</div> <div class="arrow"> <svg viewBox="0 0 60 60"><polyline points="29.8,2.6 57.3,30 29.8,57.5 "/></svg> </div> </a> </li> <li> <a href="#link"> <div class="name">Енот</div> <div class="arrow"> <svg viewBox="0 0 60 60"><polyline points="29.8,2.6 57.3,30 29.8,57.5 "/></svg> </div> </a> </li> <div class="block-menu-wall"></div> </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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
.block-menu { padding: 0; position: relative; list-style-type: none; margin: 20px 0; } .block-menu li a { width: 100%; height: 80px; background-color: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.4); position: relative; box-sizing: border-box; display: block; } .block-menu li a:hover { background-color: rgba(0, 0, 0, 0.6); } .block-menu li:nth-child(1):hover ~ .block-menu-wall { background-image: url('menu-1.jpg'); } .block-menu li:nth-child(2):hover ~ .block-menu-wall { background-image: url('menu-2.jpg'); } .block-menu li:nth-child(3):hover ~ .block-menu-wall { background-image: url('menu-3.jpg'); } .block-menu li:nth-child(4):hover ~ .block-menu-wall { background-image: url('menu-4.jpg'); } .block-menu li:nth-child(5):hover ~ .block-menu-wall { background-image: url('menu-5.jpg'); } .block-menu li .name { position: absolute; display: flex; align-items: center; height: 80px; left: 40px; text-transform: uppercase; font-family: Verdana, sans-serif; font-size: 20px; line-height: 24px; color: white; margin-right: 80px; } .block-menu li .arrow { position: absolute; right: 60px; top: 14px; height: 60px; width: 60px; opacity: 0; transition: all 0.2s ease-in; } .block-menu li .arrow svg { width: 50px; height: 50px; fill: none; stroke: white; stroke-width: 4; } .block-menu li:hover .name { left: 60px; margin-right: 60px; transition: all 0.2s ease-in; } .block-menu li:hover .arrow { right: 20px; opacity: 1; } .block-menu .block-menu-wall { width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; background-color: #000; background-size: cover; background-position: center center; background-image: url('menu-no-hover.jpg'); } |
При добавлении нового пункта меню не забудьте задать ему фоновое изображение
|
1 2 3 |
.block-menu li:nth-child(6):hover ~ .block-menu-wall { background-image: url('menu-6.jpg'); } |
И так далее, где nth-child(6) - его порядковый номер
За основу взято решение, найденное на codepen.io у пользователя Vivian Zhang
Добавить комментарий: