Think of navigation in HTML5
 |
| Compass || Source: Pexels.com Creative Commons Lic |
Whether you plan to create an ebook, an app or a website one feature you may have to think about is a navigation. Known also as Menu, it a feature that help you to organize some important hyperlinks in appropriate arrangement for easy use.
Navigation in modern design performs extra function in terms of beautification. It adds quality to your project enhancing user interface. Mobile friendliness of any website also depend on the looks of its navigation.
You can create a very simple navigation in HTML5 with Cascading Style Sheet (CSS) and a little bit of Javascript.
You will need a simple text editor and a web browser to follow this tutorial. You can download Notepad++ for windows and google chrome if you don't have them already.
Vertical and Horizontal Navigation Bar
When links are listed vertically it said to be a vertical menu or navbar or navigation, otherwise horizontal.
Since, items in a navigation are listed, we will need the lists elements <ul> and <li> to construct.
1. Open your notepad++ editor and copy the following codes into a blank file. Save it "Navbar.html"
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="about-me.html">About Me</a></li>
</ul>
2. Run the codes in Chrome: You should be having the below figure in your browser;
This is menu or navigation with pure html. In order to remove bulletin and underline we must add another additional elements and attributes to aid us
3. Copy and paste the following codes above the <ul> tag in your text editor. Run the code to remove the bulletin and set background color gray.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;}
li a {
display: block;
background-color: gray;
}
</style>
4. Replace all the codes in the <style> element with the following codes;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
background-color: #f1f1f1;}
li a {
display: block;
color: #000;
padding: 6px 14px;
text-decoration: none;}
li a:hover {
background-color: #555;
color: white;}
.active {
background-color: red;
color: white;}
This will set the navbar as a vertical navbar with hover functionality and a red active background color.
5. Replace ul and all its attributes with;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 30%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto; }
to set full height for the navigation and replace the first line of codes in the <ul> element with this
<li class="active"><a href="index.html">Home</a></li>
to set a red background for the first item in our list.
A proper implementation should result in the following;
Now we have successfully created a simple vertical navigation bar.
Run the following codes in a separete file and save it navbar2.html for Horizontal Navbar.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: gray;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 12px 15px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: cyan;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact-me">Contact me</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>
</body>
</html>
This codes will give us a horizontal navbar like this;
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="about-me.html">About Me</a></li>
</ul>
2. Run the codes in Chrome: You should be having the below figure in your browser;
3. Copy and paste the following codes above the <ul> tag in your text editor. Run the code to remove the bulletin and set background color gray.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;}
li a {
display: block;
background-color: gray;
}
</style>
4. Replace all the codes in the <style> element with the following codes;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
background-color: #f1f1f1;}
li a {
display: block;
color: #000;
padding: 6px 14px;
text-decoration: none;}
li a:hover {
background-color: #555;
color: white;}
.active {
background-color: red;
color: white;}
This will set the navbar as a vertical navbar with hover functionality and a red active background color.
5. Replace ul and all its attributes with;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 30%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto; }
to set full height for the navigation and replace the first line of codes in the <ul> element with this
<li class="active"><a href="index.html">Home</a></li>
to set a red background for the first item in our list.
A proper implementation should result in the following;
Now we have successfully created a simple vertical navigation bar.
Run the following codes in a separete file and save it navbar2.html for Horizontal Navbar.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: gray;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 12px 15px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: cyan;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact-me">Contact me</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>
</body>
</html>
This codes will give us a horizontal navbar like this;
Now what are some of the difference between the two? Comment your feedback.
A navigation may be a fixed bar or sticky.
A navigation may be a fixed bar or sticky.
Post a Comment