Navigation Bar is a key element in User Interface, this is because it allows users to access other places on the interface
Navigation is usually located at the top of the page where it is visible to the user however sometimes the navigation can be seen
on the side of a page or under a icon depending on screen size that is being used to view the page. Most common icon found is the hamburger icon
Example of Horizontal Navigation bar (Most Common Naviation Bar)
HTML and CSS Code
HTML Code
<![CDATA[
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
]]>
CSS Code
<![CDATA[
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul.nav li {
float: left;
}
ul.nav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-family: 'Open Sans', sans-serif;
}
ul.nav li a:hover {
background-color: #FF9966;
}
]]>
Example of Vertical Navigation bar
HTML and CSS Code
HTML Code
<![CDATA[
<ul class="nav1">
<li><a href="#">Home</a></li>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
]]>
CSS Code
<![CDATA[
ul.nav1 {
list-style-type: none;
margin: 0;
width: 120px;
padding: 0;
background-color: #333333;
}
ul.nav1 li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-family: 'Open Sans', sans-serif;
}
ul.nav1 li a:hover {
background-color: #FF9966;
}
]]>