New Thread
Advanced Reply
All websites have on top a menu that users use to access different parts of the site but how to create one?
Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.
Thread:
How to create website menu?
Similar Topics:
What is a responsive website design?
What methods would you apply for decreasing the loading time of a website?
How can i make a website without any IT knowledge
Is wordpress safe platform to build eCommerce Website?
How to create a website
How to create a fixed background image on a web page?
How to Create a Forum For My Website?
How to create an invisible link - Tutorial
How to create website in 7 days
website
0
16
You need to use some good "CSS menu builder" just Google for it!
In mean time you can use this one simply save this code and menu.html
In mean time you can use this one simply save this code and menu.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
#cssmenu {
border: 1px solid;
border-radius: 5px;
display: block;
height: 37px;
margin: 0;
}
#cssmenu > ul {
list-style: inside none none;
margin: 0;
padding: 0;
}
#cssmenu > ul > li {
display: block;
float: left;
list-style: inside none none;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul > li > a {
display: block;
font: bold 13px/100% Arial,Helvetica,sans-serif;
outline: medium none;
padding: 12px 20px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li > a:after {
border-right: 1px solid;
bottom: -1px;
content: "";
position: absolute;
right: -2px;
top: -1px;
z-index: 99;
}
#cssmenu ul li.has-sub:hover > a:after {
bottom: 0;
top: 0;
}
#cssmenu > ul > li.has-sub > a:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #fff transparent transparent;
border-image: none;
border-right: 5px solid transparent;
border-style: solid;
border-width: 5px;
content: "";
position: absolute;
right: 6px;
top: 18px;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 19px;
}
#cssmenu ul li.has-sub:hover > a {
background: none repeat scroll 0 0 #3f3f3f;
border-color: #3f3f3f;
padding-bottom: 13px;
padding-top: 13px;
top: -1px;
z-index: 999;
}
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
background: none repeat scroll 0 0 #3f3f3f;
border-color: #3f3f3f;
}
#cssmenu ul li > ul, #cssmenu ul li > div {
background: none repeat scroll 0 0 #3f3f3f;
border-radius: 0 0 5px 5px;
display: none;
padding: 10px 0;
position: absolute;
top: 38px;
width: auto;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none none;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu ul li > ul li a {
color: #fff;
display: block;
font: 10pt Arial,Helvetica,sans-serif;
margin: 0;
outline: medium none;
padding: 8px 20px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#cssmenu, #cssmenu > ul > li > ul > li a:hover {
background: -moz-linear-gradient(center top , #333333 0%, #222222 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
#cssmenu {
border-color: #000;
}
#cssmenu > ul > li > a {
border-right: 1px solid #000;
color: #fff;
}
#cssmenu > ul > li > a:after {
border-color: #444;
}
#cssmenu > ul > li > a:hover {
background: none repeat scroll 0 0 #111;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li><a href=""><span>Replace me</span></a></li>
<li><a href=""><span>Replace me</span></a></li>
<li class="has-sub"><a href="#"><span>Replace me</span></a>
<ul>
<li><a href=""><span>Replace me</span></a></li>
<li class="last"><a href=""><span>Replace me</span></a></li>
</ul>
</li>
<li><a href=""><span>Replace me</span></a></li>
<li><a href=""><span>Replace me</span></a></li>
<li><a href=""><span>Replace me</span></a></li>
<li class="has-sub"><a href="#"><span>Replace me</span></a>
<ul>
<li><a href=""><span>Replace me</span></a></li>
<li class="last"><a href="Replace me"><span>Replace me</span></a></li>
</ul>
</li>
<li><a href=""><span></span>Replace me</a></li>
<li class="has-sub last"><a href="#"><span>Replace me</span></a>
<ul>
<li><a href="l"><span>Replace me</span></a></li>
<li class="last"><a href=""><span>Replace me</span></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
0
To make our HTML code, we'll be utilizing the <nav> component with a progression of stay wrapped <div> components inside. Since the <nav> tag is new in HTML5, you'll need to have <!DOCTYPE html> at the highest point of your record.
Find xamarin Developers | Car Rental System | Xamarin Cross Platform Application Development| | custom software development houston
User(s) browsing this thread: 1 Guest(s)
