Hello guys, from this post we are going to create an interesting scroll-X navigation bar using HTML, CSS, and JavaScript. Let's create an awesome one.
This navbar is helpful for you for creating a website in the future. And also you want to understand this post because we will use this navigation bar for creating a blogger template. The blogger template development course is coming soon after the web development series.
For this project, we only use HTML and CSS only.
Basic HTML
Let's start with a basic HTML syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation scroll-X</title>
<!-- css linking -->
</head>
<body>
<!-- body content -->
</body>
</html>
Here I gives title as Navigation scroll-X.
External CSS linking
If you are going to use an external CSS linking method then paste this code in the <head> tag.
<link rel="stylesheet" href="style.css">
HTML Code contains nav links
This is the main HTML code for scrolling navigation.
<!-- body content -->
<div class="scrollNav">
<a href="#">link</a>
< a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
CSS code
.scrollNav {
background-color: rgb(32, 32, 32);
overflow: auto;
white-space: nowrap;
}
.scrollNav a {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
padding: 14px;
text-decoration: none;
transition: 0.8s;
}
.scrollNav a:hover {
background-color: white;
color: black;
}
Custom scroll bar
Now we are going to create a custom scroll bar.
.scrollNav::-webkit-scrollbar {
height: 3px;
}
.scrollNav::-webkit-scrollbar-track {
background: #d1d1d1;
}
.scrollNav::-webkit-scrollbar-thumb {
background: rgb(248, 0, 0);
border-radius: 10px;
}
.png)
Post a Comment