This is very simple sidebar menu with menu header using html and css, This is very easy to create just follow this below code.
Lot of websites contain the vertical navigation bar, This type of navigation is very useful for the clients to visit the related links for the particular page
Below I given the codes download code and execute it yourself , I also given the demo page here check it out...
This is very simple but useful one.
index.html
I hope this post is helpful to you......
Lot of websites contain the vertical navigation bar, This type of navigation is very useful for the clients to visit the related links for the particular page
Below I given the codes download code and execute it yourself , I also given the demo page here check it out...
This is very simple but useful one.
index.html
<html>
<head>
<title>sidebar-with-header</title>
<style>
.avoid a{ text-decoration: none;
}
.avoid ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
background-color: #e05543 !important;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-weight: 600;
color: #fff;
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li a:hover
{
background-color:#000000;
color:#fff;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
</style>
</head>
<body>
<div id="wrapper" class="avoid">
<ul class="menu">
<li class="item1"><a href="#">Sports </a>
<ul>
<li class="subitem1"><a href="#">Membership Option</a></li>
<li class="subitem2"><a href="#">Member Benefits</a></li>
<li class="subitem3"><a href="#">Our Instructors</a></li>
<li class="subitem4"><a href="#">Class Shedule</a></li>
<li class="subitem5"><a href="#">Gallery</a></li>
<li class="subitem6"><a href="#">Videos</a></li>
</ul>
</li>
</ul>
<br><br>
<ul class="menu">
<li class="item1"><a href="#">Quick Links</a>
<ul>
<li class="subitem1"><a href="#">Membership Request Form</a></li>
<li class="subitem2"><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
change the colours and all according to your site.<head>
<title>sidebar-with-header</title>
<style>
.avoid a{ text-decoration: none;
}
.avoid ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
background-color: #e05543 !important;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-weight: 600;
color: #fff;
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li a:hover
{
background-color:#000000;
color:#fff;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
</style>
</head>
<body>
<div id="wrapper" class="avoid">
<ul class="menu">
<li class="item1"><a href="#">Sports </a>
<ul>
<li class="subitem1"><a href="#">Membership Option</a></li>
<li class="subitem2"><a href="#">Member Benefits</a></li>
<li class="subitem3"><a href="#">Our Instructors</a></li>
<li class="subitem4"><a href="#">Class Shedule</a></li>
<li class="subitem5"><a href="#">Gallery</a></li>
<li class="subitem6"><a href="#">Videos</a></li>
</ul>
</li>
</ul>
<br><br>
<ul class="menu">
<li class="item1"><a href="#">Quick Links</a>
<ul>
<li class="subitem1"><a href="#">Membership Request Form</a></li>
<li class="subitem2"><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I hope this post is helpful to you......
0 Comments