A tab bar interaction.
A Pen by Vashon Gonzales on CodePen.
A tab bar interaction.
A Pen by Vashon Gonzales on CodePen.
nav#slideMenu | |
a(href='#') | |
i.fas.fa-home | |
b home | |
a(href='#') | |
i.far.fa-credit-card | |
b offers | |
a(href='#') | |
i.fas.fa-award | |
b stats | |
span |
slideMenu = document.getElementById('slideMenu') | |
# Add event listener for mouse movement | |
document.addEventListener 'mousemove', (event) -> | |
# Get the vertical position of the mouse | |
mouseY = event.clientY | |
# Get the height of the viewport | |
viewportHeight = window.innerHeight | |
# Define a threshold (e.g., 50 pixels) from the bottom center of the screen | |
threshold = 250 | |
# If the mouse is within the threshold from the bottom center, show the menu | |
if mouseY >= viewportHeight - threshold | |
slideMenu.classList.add 'show' | |
else | |
slideMenu.classList.remove 'show' | |
return |
@color_1: #53588b; | |
@color_2: #fff; | |
@font_family_1: Verdana, Geneva, Tahoma, sans-serif; | |
@font_family_2: Arial; | |
@background_color_1: #f6f9ff; | |
@background_color_2: #e5eeff; | |
@background_color_3: #53588b; | |
body { | |
height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin: 0; | |
} | |
nav { | |
position: fixed; | |
bottom: -90px; | |
left: 43%; | |
transform: translateX(-50%); | |
display: block; | |
background-color: @background_color_1; | |
padding: 10px; | |
border-radius: 40px; | |
transform: scale(1.8); | |
overflow: hidden; | |
transition: bottom 0.5s ease; | |
z-index: 100; | |
a { | |
position: relative; | |
text-decoration: none; | |
color: @color_1; | |
font-family: @font_family_1; | |
font-size: 12px; | |
line-height: 1; | |
text-align: center; | |
display: inline-block; | |
width: 100px; | |
padding: 10px; | |
box-sizing: border-box; | |
z-index: 2; | |
b { | |
position: relative; | |
top: 40px; | |
transition: 0.3s ease top; | |
} | |
i { | |
position: relative; | |
left: 25%; | |
transition: 0.3s ease left; | |
} | |
&:hover { | |
b { | |
top: 0; | |
} | |
i { | |
left: 0; | |
} | |
} | |
&:nth-child(1) { | |
&:hover { | |
&~span { | |
left: 10px; | |
} | |
} | |
} | |
&:nth-child(2) { | |
&:hover { | |
&~span { | |
left: 114px; | |
} | |
} | |
} | |
&:nth-child(3) { | |
&:hover { | |
&~span { | |
left: 218px; | |
} | |
} | |
} | |
} | |
span { | |
position: absolute; | |
width: 100px; | |
background-color: @background_color_2; | |
top: 10px; | |
bottom: 10px; | |
left: 10px; | |
border-radius: 50px; | |
z-index: 1; | |
transition: 0.3s ease left; | |
} | |
} | |
nav.show { | |
bottom: 73px; | |
} | |
#ytd-url { | |
display: block; | |
position: fixed; | |
right: 0; | |
bottom: 0; | |
padding: 10px 14px; | |
margin: 20px; | |
color: @color_2; | |
font-family: @font_family_2; | |
font-size: 14px; | |
text-decoration: none; | |
background-color: @background_color_3; | |
border-radius: 4px; | |
box-shadow: 0 10px 20px -5px rgba(83, 88, 139, 0.3); | |
z-index: 125; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" /> |