Jump to content

css Horizontal menu full code (incl) need help with submenus

grantp22

By grantp22
in CSS Help

Recommended Posts

grantp22 Member

grantp22

Posted
Posted

The code that follows produces the following menu:

menu2.gif

 

The menu works great but I cannot figure out how to add dropdown/submenus as shown in the next graphic where I have added in submenus using a graphics editor:

menu1.gif

 

Could somebody please help me to modify the css and html to allow submenus as shown in he second graphic! Any help will be much appreciated and I am sure others will find this menu useful

 

Thanks in advance

 

Here is the HTML I'm using:

 

<html>
<head>
  <link href="template/css/menu_style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="menu metallic horizontal grey"> 
<ul>
  <li><span><a><span></a></span></span></li>
  <li><span class="menu_a"><a href="index.php" target="_self"><span class="menu_a"><font color="#C5C5C5">HOME</font></span></a></span></li>
  <li><span class="menu_a"><a href="userinfo.php?user=Grant"><span class="menu_a">MY ACCOUNT</span></a></span></li>
  <li><span class="menu_a"><a href="useredit.php"><span class="menu_a">EDIT ACCOUNT</span></a></span></li>
  <li><span class="menu_a"><a href="admin.php"><span class="menu_a">ADMIN</span></a></span></li>
  <li><span class="menu_a"><a href="process.php"><span class="menu_a">LOGOUT</span></a></span></li>
  <li><span class="menu_a"><a href="register.php"><span class="menu_a">REGISTER</span></a></span><br/ ></li>
</ul>
</div>

</body>
</html>

 

Here is the CSS code for the menu - menu_style.css:

 

.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

/* METALLIC HORIZONTAL MENU */

.metallic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: transparent url(images/menubar.gif) top left repeat-x;
}

.metallic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}

.metallic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
}

.metallic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 12px;
float: left;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFFFFF;
background: transparent url() top right no-repeat;
text-decoration: none;
outline:none;
}

.metallic.horizontal ul li a span.menu_a {
display: block;
float: left;
height: 22px;
padding-top: 7px;
padding-right: 12px;
background: transparent url() top right no-repeat;
cursor: pointer;
}

/* END METALLIC HORIZONTAL MENU */

/* GREY HOVER */
.metallic.grey ul li a:hover,
.metallic.grey ul li.highlight a {
background: transparent url(images/menubarover.gif) top left no-repeat;
color: #58B0D4;
}

.metallic.grey ul li a:hover span.menu_a,
.metallic.grey ul li.highlight a span.menu_a {
background: transparent url(images/menubarover.gif) top right no-repeat;
color: #FB6900;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Tazerenix Member

Tazerenix

Posted
Posted 

<html>
<head>
  <link href="template/css/menu_style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="menu metallic horizontal grey"> 
<ul>
  <li><span><a><span></a></span></span></li>
  <li><span class="menu_a"><a href="index.php" target="_self"><span class="menu_a"><font color="#C5C5C5">HOME</font></span></a></span></li>
  <li><span class="menu_a"><a href="userinfo.php?user=Grant"><span class="menu_a">MY ACCOUNT</span></a></span>
  <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
  </ul>
</li>
  <li><span class="menu_a"><a href="useredit.php"><span class="menu_a">EDIT ACCOUNT</span></a></span></li>
  <li><span class="menu_a"><a href="admin.php"><span class="menu_a">ADMIN</span></a></span></li>
  <li><span class="menu_a"><a href="process.php"><span class="menu_a">LOGOUT</span></a></span></li>
  <li><span class="menu_a"><a href="register.php"><span class="menu_a">REGISTER</span></a></span><br/ ></li>
</ul>
</div>

</body>
</html>

 

.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

/* METALLIC HORIZONTAL MENU */

.metallic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: transparent url(images/menubar.gif) top left repeat-x;
}

.metallic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}

.metallic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
}

.metallic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 12px;
float: left;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFFFFF;
background: transparent url() top right no-repeat;
text-decoration: none;
outline:none;
}

.metallic.horizontal ul li a span.menu_a {
display: block;
float: left;
height: 22px;
padding-top: 7px;
padding-right: 12px;
background: transparent url() top right no-repeat;
cursor: pointer;
}

.metalic.horizontal ul li ul {
display:none;
position:absolute;
margin-top:27px;
}

.metalic.horizontal ul li ul li a {
display:block;
background:url('your image');
height:27px;
width:auto;
line-height:27px;
text-align:center;
}

.metalic.horizontal ul li:hover ul {
display:block;
}


/* END METALLIC HORIZONTAL MENU */

/* GREY HOVER */
.metallic.grey ul li a:hover,
.metallic.grey ul li.highlight a {
background: transparent url(images/menubarover.gif) top left no-repeat;
color: #58B0D4;
}

.metallic.grey ul li a:hover span.menu_a,
.metallic.grey ul li.highlight a span.menu_a {
background: transparent url(images/menubarover.gif) top right no-repeat;
color: #FB6900;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

 

That SHOULD work (with a bit of editing to padding and such), but i havent tested it. Please post back if it didnt

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.