New Thread
Advanced Reply
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?
Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.
SEO Forum
›
Money Making / Business Marketing
›
Search Engine Optimization 
Need simple CSS menu bar?
Need simple CSS menu bar?
1
109
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.
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 {
width: 95%;
margin: 0px 0px 0px 0px;
padding: 6px 6px 4px 6px;
height: 40px;
line-height: 100%;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #1A5E8B;
border: solid 1px #256D6D;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 6px 0px;
padding: 0px 6px 0px 6px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 6px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #F0F0F0;
color: #000000;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 1px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #1A5E8B !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 1px #1A5E8B;
}
#menu-bar ul {
background: #FFFFFF;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 2px #222222;
-moz-box-shadow: 2px 2px 2px #222222;
box-shadow: 2px 2px 2px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
</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>
34
You can just use one of many css menu builder/maker/generator. Just Google for it!
Similar Topics:
- How to set the pahrase menu in ppc?
- 7 Simple Tips On Seo To Improve The Ranking Of Your 'Blog' In The Search Engines
- What is the simple difference between the Crawling and Indexing?
- How to create website menu?
- Count Badge in Menu Android
- I need simple PHP email sender script.
- Simple Captchas with PHP?
- need seo friendly on hover dropdown menu?
- Drop-down menu SEO?
- Simple pagerank script
User(s) browsing this thread: 1 Guest(s)
