Floating Menu
<div id="wrap" style="height: 2000px;">
<div id="floatingMenu">
<div class="menuArea">
<div class="btnMenuList">
<svg viewBox="0 0 12 12">
<path id="icon" d="M7,5h5V7H7v5H5V7H0V5H5V0H7Z"></path>
</svg>
<span class="hidden">마우스 오버 시 메뉴 더보기</span>
<ul class="menuList">
<li>
<a href="#none">
<svg class="github" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10.0172337,20.0036431 C10.022429,20.1264837 10.0091724,20.2463579 9.98330461,20.3676906 C9.93784953,20.5808973 9.85006902,20.806507 9.72581375,21.0149561 C9.37258963,21.6075205 8.77254382,22.0029294 8,22.0029294 C6.18009841,22.0029294 5.46583567,21.110101 4.57152331,18.8743201 C3.96583567,17.360101 3.68009841,17.0029294 3,17.0029294 L3,15.0029294 C4.81990159,15.0029294 5.53416433,15.8957579 6.42847669,18.1315388 C7.03416433,19.6457579 7.31990159,20.0029294 8,20.0029294 C8,19.7127644 7.99602627,19.4557363 7.98766336,19.10766 C7.96806324,18.2918745 7.96580921,18.1253294 8.00139994,17.9072328 C8.01562221,17.4311461 8.13853505,17.0933379 8.38499657,16.758055 C6.15319163,16.2722225 4.64792011,15.2688507 3.78397367,13.6414131 L3.46033692,12.8803116 C3.14504523,11.9742045 3,10.9475314 3,9.76182789 C3,8.3962705 3.41634612,7.17529446 4.19401809,6.15466942 C3.95142672,5.18452501 3.98465035,3.99922139 4.52030872,2.66060213 L4.69533986,2.22319636 L5.14406803,2.07965982 C5.20414701,2.06044211 5.27718427,2.04308516 5.36298939,2.02961795 C6.2367624,1.89247825 7.48010477,2.21967938 9.10554673,3.26084348 C10.0637668,3.03871956 11.0728464,2.92657377 12.0887705,2.92657377 C12.9966325,2.92657377 13.8994565,3.01809831 14.761632,3.19853941 C16.3430593,2.20820612 17.552239,1.89759865 18.4025017,2.02979376 C18.4873192,2.04298081 18.5596096,2.06000541 18.6191923,2.07890005 L19.0707147,2.22208531 L19.2459583,2.66215824 C19.7145535,3.83889806 19.7949778,4.92336373 19.6244695,5.87228979 C20.5184674,6.94500389 21,8.26378067 21,9.76182789 C21,11.0247658 20.9095208,11.9744236 20.64943,12.8982988 L20.374903,13.6516598 C19.6562828,15.2773712 18.071463,16.2919934 15.627532,16.7752488 C15.881555,17.1269685 16,17.4840164 16,18.0029294 L16,19.0029294 C16,19.4875328 16,19.5024553 15.9988971,20.0029332 C16.0011677,20.0388683 16.0041674,20.0564681 16.0074409,20.0674343 C16.0069051,20.0676207 16.0044248,20.7127858 16,22.0029294 C15.1482062,22.0029294 14.5148687,21.5875264 14.2033753,20.9322561 C14.0418761,20.5925196 13.9936266,20.2681196 14,19.9887282 L14,18.0029294 C14,17.9190828 13.9970903,17.9142333 13.7928932,17.7100362 C13.2470903,17.1642333 13,16.7524162 13,16.0029294 L13,15.098327 L13.9000749,15.0079345 C16.5793439,14.7388614 18.0365375,13.994809 18.5196779,12.9078386 L18.7454621,12.2906007 C18.925117,11.6452201 19,10.8592573 19,9.76182789 C19,8.5957377 18.5929046,7.6324677 17.8229924,6.86285829 L17.399809,6.43984136 L17.5725269,5.86695742 C17.7259675,5.35801396 17.7624331,4.7557886 17.6001079,4.06889646 C17.5731265,4.07573155 17.5450908,4.08318009 17.5159887,4.09128216 C16.9805442,4.24035094 16.3120315,4.56021479 15.5064471,5.09869159 L15.139019,5.34429154 L14.7100567,5.23792413 C13.880388,5.0321958 12.9888516,4.92657377 12.0887705,4.92657377 C11.0878626,4.92657377 10.0984637,5.05392119 9.18445917,5.30309711 L8.73840507,5.42470039 L8.3568182,5.1636581 C7.52362575,4.59367395 6.83145179,4.25470831 6.27642408,4.09636524 C6.23678449,4.08505652 6.19904057,4.07494077 6.16316427,4.06592263 C5.9695217,4.8609066 6.04611126,5.51405583 6.24223012,6.00416015 L6.47738305,6.59181128 L6.04688499,7.05581793 C5.36089731,7.79520071 5,8.69496705 5,9.76182789 C5,10.7385874 5.11434439,11.5479509 5.32388252,12.1576254 L5.58556699,12.7770588 C6.23973869,14.0045823 7.62920432,14.743076 10.1065792,15.0086252 L11,15.1043908 L11,16.0029294 C11,16.7524162 10.7529097,17.1642333 10.2071068,17.7100362 C10.0029097,17.9142333 10,17.9190828 10,18.0029294 L9.98276345,18.1877969 C9.97135799,18.2484289 9.97135799,18.404984 9.98708636,19.0596217 C9.99432024,19.3607065 9.99844271,19.5990116 9.99963477,19.8480351 C10.0115828,19.8995855 10.013389,19.9328439 10.0172337,20.0036431 Z"></path>
</svg>
</a>
</li>
<li>
<a href="#none">
<svg class="bookmark" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10,19.118034 L3,22.618034 L3,7 C3,5.8954305 3.8954305,5 5,5 L15,5 C16.1045695,5 17,5.8954305 17,7 L17,22.618034 L10,19.118034 Z M5,19.381966 L10,16.881966 L15,19.381966 L15,7 L5,7 L5,19.381966 Z M8.00027023,3 C8.01800608,1.89235536 8.9065233,1 10,1 L19,1 C20.1045695,1 21,1.91055224 21,3.03377535 L21,18.9324493 L19,17.9155616 L19,3 L8.00027023,3 Z"></path>
</svg>
</a>
</li>
<li>
<a href="#none">
<svg class="download" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22,16 L22,20 C22,21.1045695 21.1045695,22 20,22 L4,22 C2.8954305,22 2,21.1045695 2,20 L2,16 L4,16 L4,20 L20,20 L20,16 L22,16 Z M13,12.5857864 L16.2928932,9.29289322 L17.7071068,10.7071068 L12,16.4142136 L6.29289322,10.7071068 L7.70710678,9.29289322 L11,12.5857864 L11,2 L13,2 L13,12.5857864 Z"></path>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
#floatingMenu{position: fixed; right: 20px; bottom: 20px;
.menuArea{
.btnMenuList{width: 56px; height: 56px; border-radius: 50px; box-shadow: 0px 0px 8px 4px rgba($color: #000000, $alpha: 0.25);
color: #fff; background-color: #333;
svg{width: 26px; height: 26px; fill: currentColor;}
&:hover ul.menuList li{visibility: visible; transform: translateY(0) scale(1);}
}
ul.menuList{position: absolute; top: -211px; display: flex; flex-direction: column;
li{visibility: hidden; transform: translateY(0) scale(0); transition: .5s; transition-delay: 0.03s; margin: 0 auto;
width: 56px; height: 56px; border-radius: 50px; box-shadow: 0px 0px 8px 4px rgba($color: #000000, $alpha: 0.25); background-color: $c333;
a{display: flex; align-items: center; justify-content: center; width: inherit; height: inherit; color: #fff;
svg{fill: currentColor;
&.github{width: 38px; height: 38px;}
&.bookmark{width: 34px; height: 34px;}
&.download{width: 32px; height: 32px;}
}
}
+li{margin-top: 15px;}
}
}
}
}
#floatingMenu {
position: fixed;
right: 20px;
bottom: 20px;
}
#floatingMenu .menuArea .btnMenuList {
width: 56px;
height: 56px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25);
color: #fff;
background: #333 url("../../images/ico/ico-plus-w.png") no-repeat center;
}
#floatingMenu .menuArea .btnMenuList svg{
width: 26px;
height: 26px;
fill: currentColor;
}
#floatingMenu .menuArea .btnMenuList:hover ul.menuList li {
visibility: visible;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
#floatingMenu .menuArea ul.menuList {
position: absolute;
top: -211px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#floatingMenu .menuArea ul.menuList li {
visibility: hidden;
-webkit-transform: translateY(0) scale(0);
transform: translateY(0) scale(0);
-webkit-transition: .5s;
transition: .5s;
-webkit-transition-delay: 0.03s;
transition-delay: 0.03s;
margin: 0 auto;
width: 56px;
height: 56px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25);
background-color: #333;
}
#floatingMenu .menuArea ul.menuList li a {
display: flex;
align-items: center;
justify-content: center;
width: inherit;
height: inherit;
color: #fff;
}
#floatingMenu .menuArea ul.menuList li a svg {
fill: currentColor;
}
#floatingMenu .menuArea ul.menuList li a svg.github {
width: 38px;
height: 38px;
}
#floatingMenu .menuArea ul.menuList li a svg.bookmark {
width: 34px;
height: 34px;
}
#floatingMenu .menuArea ul.menuList li a svg.download {
width: 32px;
height: 32px;
}
#floatingMenu .menuArea ul.menuList li + li {
margin-top: 15px;
}
Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.
아래 주소를 복사하여 다른 곳에 붙여넣으세요.
결과를 보기 전에 잠깐!
모바일 환경에서는 코드 결과가 gif로 표시됩니다.
그래도 결과를 볼까요?
(제대로 된 결과를 보려면 노트북 또는 데스크탑에서 실행해주세요.)