Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chic Navbar Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="menu">
<input type="radio" name="nav-item" id="home" checked><label for="home">Home</label>
<input type="radio" name="nav-item" id="search"><label for="search">Search</label>
<input type="radio" name="nav-item" id="notification"><label for="notification">Notification</label>
<input type="radio" name="nav-item" id="favorites"><label for="favorites">Favorites</label>
<input type="radio" name="nav-item" id="profile"><label for="profile">Profile</label>
<div class="selector"></div>
</nav>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
}
body {
display: flex;
height: 100vh;
width: 100%;
background-color: #efdecd;
justify-content: center;
align-items: center;
overflow: hidden;
}
nav.menu {
position: relative;
display: flex;
width: 600px;
height: 150px;
background: transparent;
justify-content: space-between;
align-items: flex-end;
padding: 0 29px 10px;
}
nav.menu::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 150px;
width: 100%;
background: #65000b;
border-radius: 20px;
box-shadow: 1px 1px 2px 0 #ffffff;
z-index: -1;
}
input {
display: none;
}
label {
position: relative;
display: inline-grid;
height: 100px;
color: #b0bfd8;
align-items: end;
font-family: sans-serif;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
min-width: 100px;
margin: 10px 10px 20px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label:hover {
color: #ffffff;
text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff;
}
input:checked+label {
height: 130px;
color: #cddeef;
text-shadow: 0 0 5px #cddeef, 0 0 10px #cddeef;
}
.selector {
position: absolute;
left: 0;
bottom: 47px;
height: 95px;
width: 95px;
background: radial-gradient(circle at 50% 50%, #fff8 30px, transparent 45px, #ffffff 50px, transparent 50px 100%),
radial-gradient(circle at 50% 50%, #2196f3 0 45px, transparent 50px 100%),
radial-gradient(circle at 50% 75px, #65000b 0 70px, transparent 71px 100%);
border: 19px solid #65000b;
border-radius: 50%;
z-index: -1;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
#home:checked~.selector {
left: 23px;
}
#search:checked~.selector {
left: 143px;
}
#notification:checked~.selector {
left: 263px;
}
#favorites:checked~.selector {
left: 383px;
}
#profile:checked~.selector {
left: 502px;
}
.selector::after {
content: "";
position: absolute;
left: calc(50% - 40px);
bottom: -80px;
height: 10px;
width: 80px;
background: #65000b;
border-radius: 5px 5px 15px 15px;
}
input:checked~.selector::after {
box-shadow: 0 -17px 35px 8px #2196f3;
}
label::before, label::after {
content: "";
position: absolute;
box-sizing: border-box;
transition: all 0.5s ease 0s;
}
label:hover::before, label:hover::after {
filter: brightness(1.5) drop-shadow(0 0 4px #ffffff);
transition: all 0.5s ease 0s;
}
input:checked+label::before, input:checked+label::after {
filter: brightness(1.5) drop-shadow(0 0 2px #cddeef);
transition: all 0.5s ease 0s;
}
label[for="home"]::before {
top: 30px;
left: 30px;
height: 40px;
width: 40px;
background: conic-gradient(from 90deg at 65% 60%, #b0bfd8 0 25%, transparent 0 100%),
conic-gradient(from 180deg at 35% 60%, #b0bfd8 0 25%, transparent 0 100%),
conic-gradient(from 135deg at 50% 0%, #b0bfd8 0 25%, transparent 0 100%);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%, 100% 27px;
border-radius: 2px;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="home"]::after {
top: 24px;
left: 30px;
height: 40px;
width: 40px;
transform: rotate(45deg);
border: 6px solid #b0bfd8;
border-right-width: 0;
border-bottom-width: 0;
border-radius: 5px;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="search"]::before {
top: 17px;
left: 20px;
height: 40px;
width: 40px;
border: 6px solid #b0bfd8;
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="search"]::after {
top: 50px;
left: 60px;
height: 9px;
width: 22px;
background: #b0bfd8;
border-radius: 0 10px 10px 0;
transform: rotate(45deg);
transform-origin: left top;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="notification"]::before {
top: 20px;
left: 25px;
height: 42px;
width: 50px;
background: linear-gradient(90deg, transparent 0 6px, #b0bfd8 0 calc(100% - 6px), transparent calc(100% - 6px) 100%),
conic-gradient(from 135deg at 50% 33%, #b0bfd8 0 25%, transparent 0 100%);
border-radius: 30px 30px 0 0;
z-index: 1;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="notification"]::after {
top: 14px;
left: 45px;
height: 57px;
width: 10px;
background: radial-gradient(circle at 50% 6px, #b0bfd8 3px, transparent 4px 100%), transparent;
border-bottom: 6px solid #b0bfd8;
border-radius: 5px;
transform-origin: left top;
z-index: 0;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="favorites"]::before {
top: -9px;
left: 18px;
height: 50px;
width: 50px;
background: radial-gradient(circle at 16px 16px, #b0bfd8 0 16px, transparent calc(16px + 1px) 100%),
radial-gradient(circle at 34px 34px, #b0bfd8 0 16px, transparent calc(16px + 1px) 100%),
linear-gradient(45deg, #b0bfd8 0 37px, transparent 38px 100%);
transform: rotate(-45deg);
transform-origin: center right;
border-radius: 17px 22px 17px 4px;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
label[for="profile"]::before {
top: 16px;
left: 25px;
height: 54px;
width: 50px;
background: radial-gradient(circle at 50% 15px, #b0bfd8 0 12px, transparent 13px 100%),
radial-gradient(circle at 50% 100%, #b0bfd8 0 22px, transparent 23px 100%);
border-radius: 8px;
}
input:checked+label[for="favorites"] {
height: 125px;
}Thanks for visiting