PDA

View Full Version : BLM Multi-level Effect Menu Display



dmwhipp
02-13-2009, 05:41 AM
1) Script Title: BLM Multi-level Effect Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/blmmenu/index.htm

3) Describe problem: Centering text vertically and styling submenu items.

My client's site is a non-profit with resources aimed at a lower income audience, so we need a menu that will be cross browser compatible that will display well on older browsers and this seems like it will fit the bill.

I've used CSS to try to achieve the exact look we're after, but have two questions:

1. We would like the text centered vertically. I've used CSS with small font class and break to achieve this, but would like to know if there is a better way.

2. I'm using a CSS bottom border which looks great on the top level items, but would like to remove it for the submenu items and, if possible, would like the green border on all four sides of the submenu items.

Here is the site's test page with the menu: http://www.flimpact.org/testmenu.html

Here is the CSS I have so far:

/*this is the css for the vertical version*/
.vertical ul{
list-style-type: none;
padding: 0px;
border-top: 0px;
width:170px;
margin-left:0px;
margin-top:0px;
}
.vertical li a{
display: block;
width:170px;
text-decoration: none;
height: 1em;
padding: .0em 0px;
border: 0px;
border-top: 0px;
margin-left:0px;
}
.vertical li{
/*Needed for IE. Don't ask me why, It was a lucky guess.*/
display: inline;
margin-left:0px;
}
.vertical li ul{
position: absolute;
margin-top: -3.8em;
margin-left: 170px;
border: 1px solid #747e30;
}


/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
/*Not sure if I recommend this or not*/
.inaccesible li ul{
display: none;
}
/*Arrow code - looks like <a class="haschild" href="#">Text <span>Arrow</span></a> can be turned on/off with arrow class*/
.arrow a span{
padding-left: 1em;
font-size: 85%;
}
.arrow a:hover span{
padding-left: 2em;
}
.arrow a span.noshow{
visibility: hidden;
}
/*Plus code*/
.plus a span{
padding-left: .5em;
}


/*colors for menu*/

.menuback li a{
background-image:url(/graphicsnew/menufade.png);
background-repeat: repeat-x;
border-bottom:8px solid #e1e1b2;
height:40px;
text-align:center;
}
.menuback li a:hover{
background-image:url(/graphicsnew/menufade.png);
background-repeat: repeat-x;
border-bottom:8px solid #e1e1b2;
height:40px;
text-align:center;
}
.menuback ul{
border: 0px;
}



a.menu { font-family:verdana,arial,sans-serif; color:#5c4e1a; font-size:12px; font-weight:normal; text-decoration:none; }
a.menu:visited { color: #5c4e1a; text-decoration:none; }
a.menu:active { color: #f0efd4; text-decoration:none; }
a.menu:hover { color: #f0efd4; text-decoration:none; }

.space { font-family:verdana,arial,sans-serif; color:#452e22; font-size:10px; font-weight:normal; margin-top:0px; margin-bottom:0px; }
.space2 { font-family:verdana,arial,sans-serif; color:#452e22; font-size:3px; font-weight:normal; margin-top:0px; margin-bottom:0px; }


Thanks in advance,
Deborah