Пример меню можно увидеть справа
На экранах менее чем 767 пикселей, меню не показывается.
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 |
<div class="side-menu"> <div class="side-menu-buttons"> <a href="#link" class="side-menu-item"> <div class="side-menu-item-icon"> <i class="fa fa-bars" aria-hidden="true"></i> </div> <div class="side-menu-hover">Пункт меню с иконкой FontAwesome</div> </a> <a href="#link" class="side-menu-item"> <div class="side-menu-item-icon"> <img src="icon.png" /> </div> <div class="side-menu-hover">Пункт меню c PNG иконкой</div> </a> <a href="#link" class="side-menu-item svg-icon-anim"> <div class="side-menu-item-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg> </div> <div class="side-menu-hover">Пункт меню c SVG иконкой и анимацией</div> </a> <a href="#link" class="side-menu-item"> <div class="side-menu-item-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> </div> <div class="side-menu-hover">Пункт меню c SVG иконкой</div> </a> </div> </div> |
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
.side-menu { display: none; } @media screen and (min-width: 768px) { .side-menu * { box-sizing: border-box; } .side-menu { position: fixed; display: block; top: 200px; right: 0; z-index: 9999999; } .side-menu-buttons { position: absolute; top: 0; right: -2px; border: 2px solid #BFE2FF; border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 4px 4px rgba(0,0,0,0.2), 0 10px 18px rgba(0,0,0,0.2); } .side-menu-item:first-child { border-top-left-radius: 10px; } .side-menu-item:last-child { border-bottom-left-radius: 10px; } .side-menu-item { display: flex; align-items: center; justify-content: center; margin: 0px; width: 74px; height: 74px; position: relative; background-color: #fff; } .side-menu-item:not(:last-child) { border-bottom: 2px solid #BFE2FF; } .side-menu-item i, .side-menu-item span { font-size: 40px; color: #000; transition: color 0.3s; } .side-menu-item img { height: 40px; } .side-menu-item svg { stroke: #000; height: 40px; stroke-miterlimit: 10; stroke-dasharray: 400; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke 0.3s; } .side-menu-item:hover i, .side-menu-item:hover span { color: #337AB7; } .side-menu-item:hover svg { stroke: #337AB7; } .side-menu-item.svg-icon-anim:hover svg { stroke: #337AB7; animation: strok 1s reverse; } @keyframes strok { 100% { stroke-dashoffset: 400; } } .side-menu-hover { position: absolute; background-color: #337AB7; color: #FFF; border: 2px solid #BFE2FF; padding: 0 30px; transform: translateX(0); left: 0; top: 0; bottom: 0; opacity: 0; transition: all 0.2s; z-index: -100; font-size: 16px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; white-space: nowrap; display: flex; align-items: center; justify-content: center; } .side-menu-item:hover .side-menu-hover { opacity: 1; transform: translateX(-100%); } } |
Очень удобное меню, например, для того, чтобы в нем поместить иконки ссылок на соц.сети организации.
Но есть минус, который, увы, всё решает. Меню "прикручено" к правой стороне вьюпорта.
И если сайт неширок (1200px, например), а монитор широкий, то меню улетает далеко вправо от контента сайта.
А как его прикрутить к правой стороне контента, а не окна браузера, но при этом сохранить вертикальное позиционирование, как при position: fixed? То есть, думаю, с помощью JS функции Math динамически пересчитывать позицию меню так, чтобы на любой ширине экрана оно продолжало прилипать к правой стороне контента сайта. Это сильно сложно сделать?
1 - для широких экранов делаем отступ справа по вкусу
2 - прячем всплывающую подсказку не за экраном, а за иконкой.
Годный скрипт, спасибо!
Ещё бы понять, как сделать так, чтобы пункты меню сворачивались назад)
и прилепить меню не к боку, а к низу))