Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.

Thread: 

How to create website menu?

Ads
yava Offline referral

Posts: 72
Joined: Jun 2014
Reputation: 0

#1
Member
All websites have on top a menu that users use to access different parts of the site but how to create one?
surenot Offline referral

Posts: 500
Joined: Jan 2014
Reputation: 16

#2
Senior Member
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

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>





User(s) browsing this thread: 1 Guest(s)