CSS expanding menus works but then overloads at 3 items
Posted: Sun Jul 09, 2006 8:03 pm
feyd | Please use
Help is much appreciated.
[/url]
feyd | Please use
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Hi,
I am setting up a WYSWIG editor of sorts for a site. I have a button which is in the menu and then I have a dynamic amount of collapsing menu buttons off from that. This works great when I have two items to be shown in the collapsing part of the menu. But when I have 3, IE shows the <td> tag where i have the menu buttons to be much more in height than I want ( i use height and z-index to try to control this. And Mozilla 6 really shows the buttons out of whack -- that is not under each other, but next to each other and out of sorts. the site is seen here: [url]http://www.greenmts.com/home.php[/url]
Here is the pertinent code:
MENU BAR:Code: Select all
<td onMouseOver="showMenus('btn1');" id="td_menu1" onMouseOut="hideMenus('btn1');" class="td1_side_closed" valign="top" width="33%">
<button id="btn1" onClick="showMenus('btn1');" class="btn_1">PROPERTIES</button>
<? // because of the td td1_side_closed class, anything put next to the PROPERTIES BUTTON is displayed with a carriage return
$result_props = mysql_query("select * from load_Index order by ipageID ASC");
if(mysql_num_rows($result_props) > 0)
{
for($a=0; $a<mysql_num_rows($result_props); $a++)
{
echo("<button id='btn".($a+2)."' class='btn_".($a + 2)."_hide' onClick='btn_to_displayPhotos(\"".mysql_result($result_props,$a,"ipageID")."\");'>".mysql_result($result_props,($a),"name")."</button>");
}
}else echo("<button id='btn2' class='btn_2_hide'>No Properties Stored</button>");Code: Select all
.td1_side_closed{display: block; height:15px; width:85px; z-index:1; border-top: 2px solid #336699;
text-align:center; position:absolute; left:46.3%;}
.td1_side_expanded{height:15px; width:85px; border-style:none; z-index:3; text-align:center; }
.show{display:block;}
.btn_1 { position: relative; top: 0px; left: 0px; background:#cccce1; color:#336699; font-weight: bold; border-style: grove; border-color:#ccccdd; width:110px; height:21px; margin:0;}
.btn_2_view { visibility: visible; position: relative; top:0px; left: 23px; background:#cccce1; color:#336699; border-style: outset; border-color:#ccccdd; width:110px;}
.btn_3_view { visibility:visible; position: relative; top: 0px; left: 23px; background:#cccce1; color:#336699; border-style: outset; border-color:#ccccdd;width:110px;}
.btn_4_view { visibility:visible; position: relative; top: 0px; left: 23px;background:#cccce1; color:#336699; border-style: outset; border-color:#ccccdd;width:110px; }
.btn_2_hide { visibility: hidden; position: relative; top: -10px; left: 0px; z-index:-3;}
.btn_3_hide { visibility: hidden; position: relative; top: -10px; left: 0px; z-index:-3;}
.btn_4_hide{ visibility: hidden; position: relative; top: -10px; left: 0px; z-index:-3;}Code: Select all
function showMenus(btn_Activated)
{
//UwNyb7Uj
if (btn_Activated = "btn1")
{
btn2.className="btn_2_view";
btn3.className="btn_3_view";
btn4.className="btn_4_view";
td_menu1.className="td1_side_expanded";
return true;
}
}
function hideMenus(btn_Activated)
{
if (btn_Activated = "btn1")
{
btn2.className="btn_2_hide";
btn3.className="btn_3_hide";
btn4.className="btn_4_hide";
td_menu1.className="td1_side_closed";
return true;
}
[/url]
feyd | Please use
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]