help with Inverted Modern Bricks Menu

[Rolda Hayes]

Hi there,

Ive been using the Inverted Modern Bricks Menu for a site and its great!

But now the client wants 3 extra links to drop down off of one of the main tabs

Ive tried to modify it but am getting nowhere fast!

The links just appear at the top of the page!!

Example is here

Please help!

[Medyman]

A better idea would be to use the SuckerTree Horiztonal Menu and incorporate the CSS of the Modern Brick Menu.

Post back if you're not able to make it work.

[Geezer D]

A better idea would be to use the SuckerTree Horiztonal Menu and incorporate the CSS of the Modern Brick Menu.

Post back if you're not able to make it work.

And post the code if you DO make it work!

[Rolda Hayes]

fantastic advise! never thought of doing it that way round!
heres the code i used (not perfect but works)

css

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
	position: relative;
	display: inline;
	float: left;
	background-color: #000000; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
	display: block;
	width: 90px; /*Width of top level menu link items*/
	padding: 3px 8px 3px;
	border-left-width: 0;
	text-decoration: none;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
	display: block;
	width: 150px; /*width of sub menu levels*/
	color: #FFFFFF;
	text-decoration: none;
	padding: 5px 5px 5px 5px;
	border: 1px solid #BC9B6A;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	background-color: #BC9B6A;
}

.suckertreemenu #current a{ /*currently selected tab*/
background-color: #BC9B6A; /*Brown color theme*/ 
color: white;
border-color: #BC9B6A; /*Brown color theme*/ 
}


.suckertreemenu ul li a:hover{
	background-color: #BC9B6A;
	color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
	background-color: #000000;
	background-image: url(images/arrow-down.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #BC9B6A;
	background-image: url(images/arrow-right.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li {
	float: left;
	height: 1%;
	background-color: #BC9B6A;
}
* html .suckertreemenu ul li a { height: 1%; }
/* End */


/*hetjksth sdjkh fkjhfsjdh fkjsdh fkjsdh fkj */

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 4px solid #BC9B6A; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0;
margin-left: 0px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
	float: left;
	display: block;
	font: bold 11px Arial;
	color: white;
	text-decoration: none;
	margin: 0 0px 0 0; /*Margin between each menu item*/
	padding: 5px 10px;
	background-color: #BC9B6A; /*Brown color theme*/
	border-top: 1px gray;
}

#modernbricksmenu2 a:hover{
background-color: #BC9B6A; /*Brown color theme*/ 
color: white;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #BC9B6A; /*Brown color theme*/ 
color: white;
border-color: #BC9B6A; /*Brown color theme*/ 
}

HTML

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style></head>

<body>
<div class="suckertreemenu">
  <ul id="treemenu1">
    <li id="current"><a href="#" style="border-left: 1px solid black">INTRODUCTION</a></li>
  <li><a href="#">ABOUT US</a></li>
    <li><a href="#">SERVICES</a><ul>
          <li><a href="#">ONGOING SERVICES</a></li>
        <li><a href="#">ENGAGE OUR SERVICES</a></li>
                 </ul></li>
    <li><a href="#">OUR PROCESS</a></li>
    <li><a href="#">TESTIMONIALS</a> </li>
    <li><a href="#">CASE STUDIES</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
  <p>&nbsp;</p>
  <p><br style="clear: left;" />
    </p>
</div>
</body>
</html>

The only thing bugging me is the last link of the dropdown is a bit twitchy when you try and click on it - any ideas?

[Medyman]

Hmm...not sure what you mean by the flicker. I can see it fine in all the browsers I test with (Fx, IE6, IE7, Opera, Safari). There is some non-consitent behavior in various browsers though.

Probably because you have some repeats in your CSS.

This might be a little more cross-browser reliable for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>&hearts;</title>
<style type="text/css">

.suckertreemenu ul{
border-top:5px solid #BC9B6A;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #000; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
border: 1px solid `;
border-left-width: 0;
text-decoration: none;
color: white;
font: bold 11px Arial;
text-transform:uppercase;
padding: 5px 10px;
text-align:center;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color:#fff;
text-align:left;
text-decoration: none;
font: bold 11px Arial;
text-transform:uppercase;
padding: 5px 10px;
background:#BC9B6A;
}

.suckertreemenu ul li a:hover{
background-color: #BC9B6A;
color: white;
}

.suckertreemenu ul li ul li a:hover {
	color:black;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

#current{
	background:#BC9B6A;
}

</style>

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.visibility="visible"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

</head>
<body style="background:black;">


<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" >Introduction</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#" id="current">Services</a>
  <ul>
  <li><a href="#">Ongoing Services</a></li>
  <li><a href="#">Engage Our Services</a></li>
  </ul>
</li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact</a></li>
</ul>
<br style="clear: left;" />
</div>




</body>
</html>

[Rolda Hayes]

Thanks, what I ment was the last link, "engage our services" it a bit hard to click on. you have to almost "jump to it" or the menu disapears?