Creating Curved Navigation Using HTML and CSS
Hey folks, today in this blog you’ll learn how to create a Fully Responsive Curved Navigation Bar using only HTML, CSS and Javascript. Let's know the basic terms first,
What Does Navigation Bar Mean?
Navigation Bar's meaning could be a little more obvious. A Navigation bar is a connection to fitting areas/pages in a site that helps perusers in crossing the online report. Thought about a customary strategy for navigation, a navigation bar can be carried out in various manners, in particular, evenly or in an upward direction, or fixed or dynamic. A navigation bar execution is viewed as one of the central issues of Web plan and convenience.
Let's create a curved navigation bar, follow the steps:
1. Creating with HTML
Create a HTML layout with basic tags like <title>, <head> etc. Add the external links & meta tags. Here we are using font awesome icons so we added font-awesome external CSS link & meta tag for browser responsive.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Curved Navigation</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
</html>
2. Create body of HTML
Here, we are making an body / layout of Curved Navigation bar. So let's create with an navigation tag with the class name navigation. This nav tag includes un-ordered list tag UL & LI tag to list the items.
<nav class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
</span>
<span class="title">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-user-o" aria-hidden="true"></i>
</span>
<span class="title">About</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-comments-o" aria-hidden="true"></i>
</span>
<span class="title">Chats</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
<span class="title">Settings</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-question" aria-hidden="true"></i>
</span>
<span class="title">Help</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
<span class="title">Password</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</span>
<span class="title">Sign Out</span>
</a>
</li>
</ul>
</nav>
Here you guys can see in the code. To list the item we used unordered list in the top after nav tag. Then after that list tag. Every item have anchor tag to link one page to another means, if you click on that item that should takes you on specific page or post. You guys have to change the link from "#" to your specific link.
<a href="#(your link here)">
Let's do styling for that items now
3. CSS Styling
Here, we are styling the items and elements with the use of class selector and element selector. You can see in the code below
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
:root {
--animation-speed: 1s;
--body-color: #fff;
--text-color: #fff;
--font: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: relative;
background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);
font-family: var(--font);
transition: all 1s ease;
overflow: hidden;
user-select: none;
display:flex;
justify-content:center;
align-items:center;
margin: 10% ;
font-weight:bold;
}
.navigation {
position: relative;
width: 65px;
height: 55vh;
background-color: #2b343b;
box-shadow: 15px 0 0 #B400FF;
overflow: hidden;
transition: width 0.3s ease-in-out;
border-radius: 0.2rem;
}
.navigation:hover {
width: 300px;
}
.navigation ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 2.5rem 0.5rem;
width: 100%;
}
.navigation ul li {
list-style: none;
width: 100%;
padding: 0.5rem;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
z-index: 100;
height:30px;
}
.navigation ul li.active {
background-color: #B400FF;
}
.navigation ul li.active a::before {
content: "";
position: absolute;
background-color: #2b343b;
width: 15px;
height: 15px;
right: 9.5px;
top: -23.5px;
border-radius: 50%;
box-shadow: 6px 6px 0 #B400FF;
}
.navigation ul li.active a::after {
content: "";
position: absolute;
background-color: #2b343b;
width: 15px;
height: 15px;
right: 9.5px;
bottom: -13.0px;
border-radius: 50%;
box-shadow: 6px -6px 0 #B400FF;
}
.navigation ul li a {
position: relative;
display: flex;
width: 100%;
color: var(--text-color);
text-decoration: none;
align-items: left;
height:40px;
}
.navigation ul li a .icon {
position: relative;
min-width: 50px;
height: 40px;
text-align: center;
margin-left: -1px;
}
.navigation ul li a .icon i {
position: relative;
font-size: 1.35rem;
z-index: 5;
}
Here we are imported an font called Poppins using CSS @import. You can change that as per your wish. You can see the whole styling in the above code. You can customize its. You can remove background color.
4. Add JavaScript for Active animation
Here we are added Javascript for animation hover, if you click on any item after that it reflects to you.
const list = document.querySelectorAll(".list");
function LinkActive() {
list.forEach((item) => {
item.classList.remove("active");
this.classList.add("active");
});
}
list.forEach((item) => {
item.addEventListener("click", LinkActive);
});
Full Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Curved Navigation</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
:root {
--animation-speed: 1s;
--body-color: #fff;
--text-color: #fff;
--font: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: relative;
background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);
font-family: var(--font);
transition: all 1s ease;
overflow: hidden;
user-select: none;
display:flex;
justify-content:center;
align-items:center;
margin: 10% ;
font-weight:bold;
}
.navigation {
position: relative;
width: 65px;
height: 55vh;
background-color: #2b343b;
box-shadow: 15px 0 0 #B400FF;
overflow: hidden;
transition: width 0.3s ease-in-out;
border-radius: 0.2rem;
}
.navigation:hover {
width: 300px;
}
.navigation ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 2.5rem 0.5rem;
width: 100%;
}
.navigation ul li {
list-style: none;
width: 100%;
padding: 0.5rem;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
z-index: 100;
height:30px;
}
.navigation ul li.active {
background-color: #B400FF;
}
.navigation ul li.active a::before {
content: "";
position: absolute;
background-color: #2b343b;
width: 15px;
height: 15px;
right: 9.5px;
top: -23.5px;
border-radius: 50%;
box-shadow: 6px 6px 0 #B400FF;
}
.navigation ul li.active a::after {
content: "";
position: absolute;
background-color: #2b343b;
width: 15px;
height: 15px;
right: 9.5px;
bottom: -13.0px;
border-radius: 50%;
box-shadow: 6px -6px 0 #B400FF;
}
.navigation ul li a {
position: relative;
display: flex;
width: 100%;
color: var(--text-color);
text-decoration: none;
align-items: left;
height:40px;
}
.navigation ul li a .icon {
position: relative;
min-width: 50px;
height: 40px;
text-align: center;
margin-left: -1px;
}
.navigation ul li a .icon i {
position: relative;
font-size: 1.35rem;
z-index: 5;
}
</style>
</head>
<body>
<nav class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
</span>
<span class="title">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-user-o" aria-hidden="true"></i>
</span>
<span class="title">About</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-comments-o" aria-hidden="true"></i>
</span>
<span class="title">Chats</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
<span class="title">Settings</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-question" aria-hidden="true"></i>
</span>
<span class="title">Help</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
<span class="title">Password</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</span>
<span class="title">Sign Out</span>
</a>
</li>
</ul>
</nav>
<script>
const list = document.querySelectorAll(".list");
function LinkActive() {
list.forEach((item) => {
item.classList.remove("active");
this.classList.add("active");
});
}
list.forEach((item) => {
item.addEventListener("click", LinkActive);
});
</script>
</body>
</html>
CodePen Output:
Post a Comment