CSS menu bar
Moderator: General Moderators
CSS menu bar
Im triyng to find a good CSS menu bar to use. I cant find 1. can some one be able to help me out
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: CSS menu bar
What should this menu do? Drop down, simple single links? Not too much information to go oneebgames56 wrote:Im triyng to find a good CSS menu bar to use. I cant find 1. can some one be able to help me out
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: CSS menu bar
Code: Select all
<html>
<title>
Creating Simple and Easy Css Menu Bar
</title>
<head>
</head>
<body>
</body >
</html>“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: CSS menu bar
Creating Simple CSS Menu Bar
Easy Way To Create A Simple And Easy Css Menubar
Easy Step 1:open note pad or dream weaver or any editorial you have
if you are using editorials then copy and past this code in to ur header part if not just open note pad and place this code
______________________________________________________________
Code For Note Pad
______________________________________________________________
< html>
<title>
Creating Simple And Easy Css Menu Bar
</title>
<head>
</head>
<body>
</body >
</html>
______________________________________________________________
END OF THE CODE
______________________________________________________________
Below Code Should Be Placed In Between Head Tags
—————————————————————————————–
Code Begins Place This Code In Head Part
—————————————————————————————–
<style type=”text/css”>
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #e1e1e1; /* You Can Change this color */
border: 2px solid #e1e1e1; /*You can change this color*/
}
.hovermenu ul li a:hover{
background-color: #e5e5e5; /*You Can Change This Color*/
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
—————————————————————————————–
END OF THE CODE
—————————————————————————————–
Easy Step 2: Copy And Paste This Code In Your Body Tag
______________________________________________________________
Code Begins
______________________________________________________________
<div class=”hovermenu”>
<ul>
<li><a href=”http://webdesigninfo.wordpress.com”>Home</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/about/”>About Me</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/web-templates/”>Web Templates</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/contact-me/”>Contact Us</a></li>
<li><a href=”http://webdesigninfo.wordpress.com”>Downloads</a></li>
</ul>
</div>
______________________________________________________________
END OF THE CODE
______________
Easy Way To Create A Simple And Easy Css Menubar
Easy Step 1:open note pad or dream weaver or any editorial you have
if you are using editorials then copy and past this code in to ur header part if not just open note pad and place this code
______________________________________________________________
Code For Note Pad
______________________________________________________________
< html>
<title>
Creating Simple And Easy Css Menu Bar
</title>
<head>
</head>
<body>
</body >
</html>
______________________________________________________________
END OF THE CODE
______________________________________________________________
Below Code Should Be Placed In Between Head Tags
—————————————————————————————–
Code Begins Place This Code In Head Part
—————————————————————————————–
<style type=”text/css”>
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #e1e1e1; /* You Can Change this color */
border: 2px solid #e1e1e1; /*You can change this color*/
}
.hovermenu ul li a:hover{
background-color: #e5e5e5; /*You Can Change This Color*/
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
—————————————————————————————–
END OF THE CODE
—————————————————————————————–
Easy Step 2: Copy And Paste This Code In Your Body Tag
______________________________________________________________
Code Begins
______________________________________________________________
<div class=”hovermenu”>
<ul>
<li><a href=”http://webdesigninfo.wordpress.com”>Home</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/about/”>About Me</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/web-templates/”>Web Templates</a></li>
<li><a href=”http://webdesigninfo.wordpress.com/contact-me/”>Contact Us</a></li>
<li><a href=”http://webdesigninfo.wordpress.com”>Downloads</a></li>
</ul>
</div>
______________________________________________________________
END OF THE CODE
______________