welcome to tutorialfamily

html navigation – free source code

Html navigation

html navigation is use for redirect one page to another page. navigation has two type horizontal navigation and vertical navigation.

html


         		
<!-- ========== Start Navigation1 ========== -->
    <h1>Navigation 1</h1>
	<div class="navigation-one">
		<ul>
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#" class="nav-drop">Service <i class="fa fa-angle-down" aria-hidden="true"></i></a>
				<div class="nav-dropdown">
					<ul class="nav-submenu">
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> Mobile App</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> Web Application</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> Testing</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> Seo</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> Web Design</a></li>
					</ul>
				</div>
			</li>
			<li><a href="#">Career</a></li>
			<li><a href="#">Privacy</a></li>
			<li><a href="#" class="nav-drop">Vision <i class="fa fa-angle-down" aria-hidden="true"></i></a>
				<div class="nav-dropdown">
					<ul class="nav-submenu">
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> Vision & Mission</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> On Time</a></li>
					</ul>
				</div>
			</li>
			<li><a href="#">Contact</a></li>
			<li class="blog"><a href="#" class="nav-drop">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
				<div class="nav-dropdown">
					<ul class="nav-submenu">
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> List 1</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> List 2</a></li>
						<li><a href="#" class="nav-submenu-list"><i class="fa fa-angle-right" aria-hidden="true"></i> List 3</a></li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
<!-- ========== End Navigation1 ========== -->								


css


         
/* Start Navigation-one */
body a {
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
a:hover {
    text-decoration: none;
}
.navigation-one{
    font-size: 12px;
    background-color: #9f0c29;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    padding: 0 20px;
	margin: 4px 0 170px 0;  
    display: block;
	width: 930px;
    float: left;
}
.navigation-one ul {
    list-style: none;
	margin: 0;
    padding: 0;
    border: 0
}
.navigation-one li {
    float: left;
    position: relative;
    text-align: center;
    -webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s;
}
.navigation-one li a {
    display: block;
    padding: 16px 20px;
    color: #d0d0d0;
	font-weight: 700;
    text-transform: uppercase;
    -webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s;
}
.navigation-one li:hover,.navigation-one li.active {
    background-color: #fff;
}
.navigation-one li:hover a,.navigation-one li.active a{
    color: #000;
}
.navigation-one li:hover .nav-submenu a{
    color: #666;
    -webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s;
}
.navigation-one .nav-dropdown {
    text-align: left;
    background-color: #fff;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    position: absolute;
    left: 0px;
    display: none;
    z-index: 100;
	-webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s;
}
.navigation-one li:hover .nav-dropdown {
    left: 0;
    display: block;
}
.navigation-one .nav-submenu {
    margin: 5px 0;
	float:left;
}
.navigation-one .nav-submenu li {
    white-space: nowrap;
    -webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s;
	width: 100%;
    text-align: left;
}
.navigation-one .nav-submenu li:hover {
    background: #9f0c29;
}
.navigation-one .nav-submenu-list {
    display: block;
    padding: 6px 20px;
    line-height: 1;
    color: #666;
    -webkit-transition: all ease-in 0.1s;
    -moz-transition: all ease-in 0.1s;
    -ms-transition: all ease-in 0.1s;
    -o-transition: all ease-in 0.1s;
    transition: all ease-in 0.1s;
	font-weight: 700;
    text-transform: uppercase;
}
.navigation-one .nav-submenu li:hover .nav-submenu-list {
    color: #fff;
}
.navigation-one li.blog{
	float:right;
}
/* End Navigation-one */										


output

Our Content