PDA

View Full Version : Tableless + Blm Multi-level Effect menu



Jesdisciple
12-25-2007, 04:48 PM
1) Script Title:
Blm Multi-level Effect menu

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

3) Describe problem:
Demonstrations:
http://www.auto-chat.net/ccarter/tableless/index.html
http://www.auto-chat.net/ccarter/tableless/with_menu/index.html

I built a tableless page (the first demonstration) but wanted the menu (to the left) to function as menus are (due to intuition and convention) expected to work. The above script fills that bill so I applied it to my page (the second demonstration), but it causes problems with the navigation menu's width. The makeshift border is reduced in width, the links must break the line because the "nav" DIV overlaps with the "content" one, and the extra space doesn't click.

I managed to convert the CSS from css.css to the PHP-generated CSS in css.css.php to ease adjustment of the links' widths. But I've fallen short of my original goal for this, which was to replace the pixel values with more adaptable percentages. This seems impossible because the margin values need to be exactly equal to the widths. JavaScript could correct this, but I would much rather fix a style problem with CSS. The PHP from css.css.php follows.


<?php
$vertical_width = 200;
$horizontal_width = 125;
?>
/*this is the css for the vertical version*/
.vertical ul{
list-style-type: none;
padding: 0px;
// border-top: 1px solid;
width: <?php echo $vertical_width + 4; ?>px;
}
.vertical li a{
display: block;
width: <?php echo $vertical_width; ?>px;
text-decoration: none;
height: 1em;
padding: .1em 1px;
// border: 1px solid;
// border-top: 0px;
}
.vertical li{
/*Needed for IE. Don't ask me why, It was a lucky guess.*/
display: inline;
}
.vertical li ul{
position: absolute;
margin-top: -1.3em;
margin-left: <?php echo $vertical_width; ?>px;
}
/*this is the css for the horizontal version*/
.horizontal ul{
list-style-type: none;
padding: 0px;
border-left: 1px solid;
display: block;
height: 1.4em;
}
.horizontal li{
float: left;
display: inline;
}
.horizontal li a{
text-decoration: none;
height: 1.2em;
float: left;
display: block;
width: <?php echo $horizontal_width; ?>px;
padding: .1em 1px;
border: 1px solid;
border-left: none;
}
.horizontal li li a{
border-top: none;
border-left: 1px solid;
}
.horizontal li ul{
position: absolute;
margin-top: 1.3em;
margin-left: -1px;
width: <?php echo $horizontal_width + 4; ?>px;
border: none;
display: block;
height: auto;
border-top: 1px solid;
}
.horizontal li li ul{
position: absolute;
margin-top: .1em;
margin-left: <?php echo $horizontal_width; ?>px;
}
.horizontal li ul li a{
width: <?php echo $horizontal_width; ?>px;
}
/*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*/
.navy-red li a{
background-color: navy;
color: red;
}
.navy-red li a:hover{
background-color: red;
color: navy;
}
/*.blackwhite li a{
background-color: white;
color: black;
border-color: black;
}
.blackwhite li a:hover{
background-color: black;
color: white;
border-color: black;
}
.blackwhite ul{
border-color: black;
}
.bluewhite li a{
background-color: white;
color: #000033;
border-color: #000033;
}
.bluewhite li a:hover{
background-color: #000033;
color: white;
border-color: #000033;
}
.bluewhite ul{
border-color: #000033;
}*/

How can I make the tableless page accept the menu? Thanks!