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

Thread: 

Need simple CSS menu bar?

Ads
maxout Offline referral

Posts: 162
Joined: Mar 2014
Reputation: 1

#1
Member
Can anybody help me to create a simply CSS menu bar I will use it to create buttons that will open or direct users to my other web pages?
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

#2
Support Team
How about this css menu bar!

Paste this code into notepad and Save as index.html then open it with web browser of your choice.

PHP 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>My CSS Menu Bar</title>
<
style type="text/css">
#menu-bar {
  
width95%;
  
margin0px 0px 0px 0px;
  
padding6px 6px 4px 6px;
  
height40px;
  
line-height100%;
  
border-radius3px;
  -
webkit-border-radius3px;
  -
moz-border-radius3px;
  
box-shadow2px 2px 3px #666666;
  
-webkit-box-shadow2px 2px 3px #666666;
  
-moz-box-shadow2px 2px 3px #666666;
  
background#1A5E8B;
  
bordersolid 1px #256D6D;
  
position:relative;
  
z-index:999;
}
#menu-bar li {
  
margin0px 0px 6px 0px;
  
padding0px 6px 0px 6px;
  
floatleft;
  
positionrelative;
  list-
stylenone;
}
#menu-bar a {
  
font-weightbold;
  
font-familyarial;
  
font-stylenormal;
  
font-size12px;
  
color#E7E5E5;
  
text-decorationnone;
  
displayblock;
  
padding6px 20px 6px 20px;
  
margin0;
  
margin-bottom6px;
  
border-radius3px;
  -
webkit-border-radius3px;
  -
moz-border-radius3px;
  
text-shadow2px 2px 3px #000000;
}
#menu-bar li ul li a {
  
margin0;
}
#menu-bar .active a, #menu-bar li:hover > a {
  
background#F0F0F0;
  
color#000000;
  
-webkit-box-shadow0 1px 1px rgba(000.2);
  -
moz-box-shadow0 1px 1px rgba(000.2);
  
box-shadow0 1px 1px rgba(000.2);
  
text-shadow2px 2px 1px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  
backgroundnone;
  
bordernone;
  
color#666;
  
-box-shadownone;
  -
webkit-box-shadownone;
  -
moz-box-shadownone;
}
#menu-bar ul a:hover {
  
background#1A5E8B !important;
  
color#FFFFFF !important;
  
border-radius0;
  -
webkit-border-radius0;
  -
moz-border-radius0;
  
text-shadow2px 2px 1px #1A5E8B;
}
#menu-bar ul {
  
background#FFFFFF;
  
displaynone;
  
margin0;
  
padding0;
  
width185px;
  
positionabsolute;
  
top40px;
  
left0;
  
bordersolid 1px #B4B4B4;
  
border-radius10px;
  -
webkit-border-radius10px;
  -
moz-border-radius10px;
  -
webkit-box-shadow2px 2px 2px #222222;
  
-moz-box-shadow2px 2px 2px #222222;
  
box-shadow2px 2px 2px #222222;
}
#menu-bar li:hover > ul {
  
displayblock;
}
#menu-bar ul li {
  
floatnone;
  
margin0;
  
padding0;
}
#menu-bar ul a {
  
padding:10px 0px 10px 15px;
  
color:#424242 !important;
  
font-size:12px;
  
font-style:normal;
  
font-family:arial;
  
font-weightnormal;
  
text-shadow2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  
border-top-left-radius10px;
  -
webkit-border-top-left-radius10px;
  -
moz-border-radius-topleft10px;
  
border-top-right-radius10px;
  -
webkit-border-top-right-radius10px;
  -
moz-border-radius-topright10px;
}
#menu-bar ul li:last-child > a {
  
border-bottom-left-radius10px;
  -
webkit-border-bottom-left-radius10px;
  -
moz-border-radius-bottomleft10px;
  
border-bottom-right-radius10px;
  -
webkit-border-bottom-right-radius10px;
  -
moz-border-radius-bottomright10px;
}
#menu-bar:after {
  
content".";
  
displayblock;
  
clearboth;
  
visibilityhidden;
  
line-height0;
  
height0;
}
#menu-bar {
  
displayinline-block;
}
  
html[xmlns#menu-bar {
  
displayblock;
}
html #menu-bar {
  
height1%;
}
</
style>
</
head>
<
body>
<
ul id="menu-bar">
 <
li class="active"><a href="#">Home</a></li>
 <
li><a href="#">Products</a>
  <
ul>
   <
li><a href="#">Products Sub Menu 1</a></li>
   <
li><a href="#">Products Sub Menu 2</a></li>
   <
li><a href="#">Products Sub Menu 3</a></li>
   <
li><a href="#">Products Sub Menu 4</a></li>
  </
ul>
 </
li>
 <
li><a href="#">Services</a>
  <
ul>
   <
li><a href="#">Services Sub Menu 1</a></li>
   <
li><a href="#">Services Sub Menu 2</a></li>
   <
li><a href="#">Services Sub Menu 3</a></li>
   <
li><a href="#">Services Sub Menu 4</a></li>
  </
ul>
 </
li>
 <
li><a href="#">About</a></li>
 <
li><a href="#">Contact Us</a></li>
</
ul>
</
body>
</
html
victor Offline referral

Posts: 638
Joined: Jun 2013
Reputation: 33

#3
Senior Member
You can just use one of many css menu builder/maker/generator. Just Google for it!





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