CSS menu bar

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

CSS menu bar

Post by ebgames56 »

Im triyng to find a good CSS menu bar to use. I cant find 1. can some one be able to help me out
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: CSS menu bar

Post by social_experiment »

ebgames56 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
What should this menu do? Drop down, simple single links? Not too much information to go one :) Try using google, it might sound like a brush-off but articles about CSS Menus are plentiful
“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
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: CSS menu bar

Post by social_experiment »

Code: Select all

<html>
<title>
Creating Simple and Easy Css Menu Bar
</title>
<head>
</head>
<body>
</body >
</html>
This code will leave you scratching your head during the project as IE has the habit of ignoring certain style settings if you don't have a valid DOC Type in your header. Also, the title should be inside the head tag :)
“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
qeemat
Forum Newbie
Posts: 10
Joined: Sat Feb 18, 2012 1:12 am

Re: CSS menu bar

Post by qeemat »

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

______________
Post Reply