Cred App Like Tab Bar Interaction

cred-app-like-tab-bar-interaction.markdown

Cred App Like Tab Bar Interaction

A tab bar interaction.

A Pen by Vashon Gonzales on CodePen.

License.

index.pug

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

script.coffeescript

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

style.less

@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;
}

styles

<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" />