Pop-out vertical menu help!!!

shop deals on amazon
Advertise with us
Shop deals on ebay
Mantidforum

Help Support Mantidforum:

This site may earn a commission from merchant affiliate links, including eBay, Amazon, and others.
A

asdsdf

Coolest Member
Joined
Aug 15, 2007
Messages
758
Reaction score
0
Location
US, California
Hi,

For my website, I'm trying to make it so that the sub-menus pop-out, instead of just taking up room. However, html I'm okay, but with CSS, I'm totally lost. If someone knows how to do so, please explain in nub(Which I am) terms. The current html for my menu is :

<div id="leftside">

<h2 class="hide">Menu:</h2>

<ul class="avmenu">

<li><a class="current" href="http://www.mantishaven.com/">Home</a></li>

<li><a href="http://mantishaven.com/store/index.html">Store</a></li>

<ul>

<li><a href="http://mantishaven.com/store/mantises.html">Mantises</a></li>

<li><a href="http://mantishaven.com/store/ootheca.html">Ootheca</a></li>

<li><a href="http://mantishaven.com/store/supplies.html">Supplies</a></li>

</ul>

</li>

<li><a href="http://shopsite.startlogic.com/ss8.3/sc/order.cgi?storeid=*22b877cacc5e3256d178000574b7842d4e4cfb&function=show">Shopping Cart</a></li>

<li><a href="caresheets.html">Caresheets</a></li>

<li><a href="logs.html">Mantis Logs</a></li>

<ul>

<li><a href="polog.html">Pseudocreobotra ocellata</a></li>

<li><a href="dllog.html">Deroplatys lobata</a></li>

<li><a href="bmlog.html">Blepharopsis mendica </a></li>

</ul>

</li>

<li><a href="shipping.html">Shipping Terms/Conditions</a></li>

<li><a href="mailto:[email protected]?subject=Inquiry">

Contact Us</a></li>

</ul>

How can I change it so that it pop-outs instead? ( I highlighted the places in red.) What changes do I have to make? CSS files? Thanks a lot!

(700th post...Not much compared to some of you guys, but it's a lot for me! Look, I even became the coolest member!!!)

 
Last edited by a moderator:
Considering you're now officially so cool Jasper, try this:


Code: 
<style type="text/css">

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
    
.suckerdiv ul li{
position: relative;
}
    
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

    
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">



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

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
        else //else if this is a sub level submenu (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.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
        for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}

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

</script>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Home</a></li>
<li><a href="#">Store</a>
  <ul>
  <li><a href="#">Mantids</a></li>
  <li><a href="#">Ootheca</a></li>
  <li><a href="#">Supplies</a></li>
  </ul>
</li>
<li><a href="#">Shopping cart</a></li>
<li><a href="#">Caresheets</a></li>
<li><a href="#">Mantis logs</a>
  <ul>
  <li><a href="#">Pseudocreobotra ocellata</a></li>
  <li><a href="#">Deroplatys lobata</a></li>
    <li><a href="#">Blepharopsis mendica </a></li>
</ul>
</li>
<li><a href="#">Shipping/terms and conditions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Obviously change the style sheet to match your current styles, and change the div ID's to match what the javascript function is calling for in each instance.

 
Wow, thanks a lot for the code. Problem is, how DO I change the style sheet to match your current styles, and change the div ID's to match what the javascript function is calling for in each instance. I pasted the code you gave into the /***** Main menu *****/ part of the orignal css file, and replaced my html(menu part) with:


Code: 
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Home</a></li>
<li><a href="#">Store</a>
  <ul>
  <li><a href="#">Mantids</a></li>
  <li><a href="#">Ootheca</a></li>
  <li><a href="#">Supplies</a></li>
  </ul>
</li>
<li><a href="#">Shopping cart</a></li>
<li><a href="#">Caresheets</a></li>
<li><a href="#">Mantis logs</a>
  <ul>
  <li><a href="#">Pseudocreobotra ocellata</a></li>
  <li><a href="#">Deroplatys lobata</a></li>
    <li><a href="#">Blepharopsis mendica </a></li>
</ul>
</li>
<li><a href="#">Shipping/terms and conditions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
With this, it SHOULD work, and it does....in a way. When I put my mouse over it, it becomes yellow, as the code says it would. However, there is no pop-out menu. my html code for the menu is now:


Code: 
[color="#FF0000"]<div id="leftside">
<h2 class="hide">Menu:</h2>[/color]

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Home</a></li>
<li><a href="#">Store</a>
  <ul>
  <li><a href="#">Mantids</a></li>
  <li><a href="#">Ootheca</a></li>
  <li><a href="#">Supplies</a></li>
  </ul>
</li>
<li><a href="#">Shopping cart</a></li>
<li><a href="#">Caresheets</a></li>
<li><a href="#">Mantis logs</a>
  <ul>
  <li><a href="#">Pseudocreobotra ocellata</a></li>
  <li><a href="#">Deroplatys lobata</a></li>
    <li><a href="#">Blepharopsis mendica </a></li>
</ul>
</li>
<li><a href="#">Shipping/terms and conditions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
The


Code: 
<div id="leftside"> <h2 class="hide">Menu:</h2>
(in red) part of the html, is from the


Code: 
/***** Left sidebar *****/

#leftside {
clear:left;
float:left;
width:140px;
margin:0 0 5px;
padding:0;
}

#leftside h2,#leftside h3 {
color:#505050;
background-color:inherit;
font-size:1.3em;
margin:0 0 5px;
padding:0;
}

#leftside div.announce {
clear:left;
margin:10px 0 15px;
padding:7px 5px;
width:126px;
font-size:0.9em;
background-color:#f4f4f4;
color:#505050;
border-left:4px solid #cccccc;
line-height:1.5em;
}

#leftside div.announce p {
margin:10px 0 0;
padding:0;
}
(Part of my original css. It makes the menu stay at the side, etc. I have to keep this, or else the sidebar goes wacko.) Is this affecting it? I have no idea what is wrong...Please help. Thanks.

 
Last edited by a moderator:
Holy moly. Thanks a lot. I do not need to leave it inside of the CSS document right? You deserve to be the "Almost Coolest Member" :D

Stay tuned, jic i have trouble editing it. :D

 
Last edited by a moderator:
Code: 
<style type="text/css">

.suckerdiv ul{
width:140px;
margin:0 0 18px;
padding:0;
list-style:none;
}
    
.suckerdiv ul li{
width:140px;
padding:0;
line-height:1.4em;
display:inline;
}

/*Sub level menu items */    
.suckerdiv ul li ul{
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}

/* Sub level menu links style */
.suckerdiv ul li a:hover,.suckerdiv ul li a.current {
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

.suckerdiv ul ul{
margin:0 0 0 15px;
padding:0 0 5px 0;
font-size:0.9em;
width:125px;
}

.suckerdiv ul ul a{
padding:3px 1px 3px 5px;
font-weight:normal;
width:115px;
}

.suckerdiv ul ul{
width:113px;
}

.suckerdiv ul ul ul a{
width:100px;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #eaeaea;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

    
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">



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

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
        else //else if this is a sub level submenu (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.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
        for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}

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

</script>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Home</a></li>
<li><a href="#">Store</a>
  <ul>
  <li><a href="#">Mantids</a></li>
  <li><a href="#">Ootheca</a></li>
  <li><a href="#">Supplies</a></li>
  </ul>
</li>
<li><a href="#">Shopping cart</a></li>
<li><a href="#">Caresheets</a></li>
<li><a href="#">Mantis logs</a>
  <ul>
  <li><a href="#">Pseudocreobotra ocellata</a></li>
  <li><a href="#">Deroplatys lobata</a></li>
    <li><a href="#">Blepharopsis mendica </a></li>
</ul>
</li>
<li><a href="#">Shipping/terms and conditions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
This is currently the code, and I have been editing around with it. It looks like the original, except when i hover my mouse of it, it pops out. (drops down now o.o) But then I can't click on it, because once I do, the pop-out thing closes. What's wrong with my code? I don't mind it popping out downwards, and it even seems better, but what do I have to do so that it stays without closing when I place my mouse over it? Perhaps I should delay it or something? What would be the code for it? Or what do I have to edit? (for example, like this page! http://www.udm4.com/ after your mouse leaves the submenu area that pops out, the menu stays there for a while.) >.< Thanks a lot...

 
Last edited by a moderator:

Latest posts

Top