Daily Video Blog with Anik || Active Horizontal Bar in CSS
In this video,I explained the Active Horizontal Bar in CSS . Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -
HTML Files -
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" class="active"> Home </a> </li>
<li> <a href="about.html"> About Us </a> </li>
<li> <a href="contact.html"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
</ul>
<p> This is my HOME Page </p>
</body>
</html>
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" class="active"> About Us </a> </li>
<li> <a href="contact.html"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
</ul>
<p> This is my ABOUT US page </p>
</body>
</html>
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" > About Us </a> </li>
<li> <a href="contact.html" class="active"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
</ul>
<p> This is my CONTACT US page </p>
</body>
</html>
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" > About Us </a> </li>
<li> <a href="contact.html" > Contact Us </a> </li>
<li> <a href="queries.html" class="active"> Any Queries </a> </li>
</ul>
<p> This is my QUERIES page </p>
</body>
</html>
CSS File -
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 20px;
}
li a:hover {
color: red;
background-color: lightgreen;
text-decoration: underline;
}
.active {
background-color: red;
}
p {
font-size: 30px;
text-align: center;
}
HTML Files -
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" class="active"> Home </a> </li>
<li> <a href="about.html"> About Us </a> </li>
<li> <a href="contact.html"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
</ul>
<p> This is my HOME Page </p>
</body>
</html>
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" class="active"> About Us </a> </li>
<li> <a href="contact.html"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
</ul>
<p> This is my ABOUT US page </p>
</body>
</html>
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" > About Us </a> </li>
<li> <a href="contact.html" class="active"> Contact Us </a> </li>
<li> <a href="queries.html"> Any Queries </a> </li>
</ul>
<p> This is my CONTACT US page </p>
</body>
</html>
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="exercises12.css">
</head>
<body>
<ul>
<li> <a href="home.html" > Home </a> </li>
<li> <a href="about.html" > About Us </a> </li>
<li> <a href="contact.html" > Contact Us </a> </li>
<li> <a href="queries.html" class="active"> Any Queries </a> </li>
</ul>
<p> This is my QUERIES page </p>
</body>
</html>
CSS File -
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 20px;
}
li a:hover {
color: red;
background-color: lightgreen;
text-decoration: underline;
}
.active {
background-color: red;
}
p {
font-size: 30px;
text-align: center;
}
Comments
Post a Comment