CSS Simple Menu Navigation Bar
In this article, we introduce a very simple example to create menu navigation bar, by using HTML and CSS. A quick and simple menu navigation is very important for us, so that we can easily embedded in our website.
For this, we have created two files 'index.html' and 'style.css'. On 'index.html' page, we have used the unordered list of HTML to display Menu Navigation. On 'style.css' page, we have provided styles on the menu navigation with the help of CSS.
To implement this, simply create two files 'index.html' and 'style.css' and copy paste these codes and access 'index.html' on the browser to see the result.
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Simple menu navigation bar</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<ul class="menu-nav">
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</body>
</html>
style.css
ul.menu-nav {
list-style-type: none !important;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #7FD4FF;
padding: 10px;
width: 325px;
}
ul.menu-nav li {
display: inline;
text-align: center;
list-style-type: none !important;
}
ul.menu-nav li + li::before {
content: " | ";
padding-left: 10px;
padding-right: 10px;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: red;
}
◀ Previous Article
Simple Show Hide Menu Navigation
Simple Show Hide Menu Navigation
Next Article ▶
jQuery loop over JSON result after AJAX Success
jQuery loop over JSON result after AJAX Success
