Register
Login
 

Support House of Nuke

  

 House of Nuke Forums  
Subject: Dynamic Vertical Menu
Prev Next
You are not authorized to post a reply.

Author Messages
Aron HUser is Offline
Novice
Novice
Posts:4

09/30/2008 2:22 PM Alert 

After failed attempts to get the Dynamic Mode working for a vertical HouseMenu, I decided to try and make it dynamic myself. Through some editing of the CSS file and adding some javascript, I was able to get something working, which has a sort of pop-out effect. So, I thought I'd share the code since I seen others were having difficulties as well, especially with the "false" appearing in IE, etc. It's not perfect, but it does the job. I'm not a CSS expert, so if someone would like to expand upon what I've done, please go ahead & share.

You can view a sample of it working here: http://new.evergreenpark-ill.com/

Changes to make

In your main skin.css file, replace your HouseMenuNav stylings with this code:

 

/***** Main menu *****/

#HouseMenuNav {
width:200px;
margin:0 0 10px;
padding:0;
list-style:none;
}

#HouseMenuNav li {
width:200px;
padding:0;
line-height:1.4em;
display:inline;
}

#HouseMenuNav a {
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:190px;
float:left;
margin-bottom:0px;
padding:0px 5px 0px 1px;
border-left:4px solid #cccccc;
text-decoration:none;
font-size:7.5pt;
}

#HouseMenuNav li a:hover
{
text-decoration: underline;
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

#HouseMenuNav li:hover>ul
{
height:auto;
display:list-item;
}

#HouseMenuNav ul
{
display:none;
height:0px;
}

#HouseMenuNavCurrentItem a
{
text-decoration: none;
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

#HouseMenuNavCurrentItem ul
{
display:list-item;
height:auto;
}

#HouseMenuNav ul {
margin:0 0 0 15px;
padding:0 0 0px 0;
font-size:7pt;
width:165px;
}

#HouseMenuNav ul a {
padding:0px 1px 0px 5px;
font-weight:normal;
width:175px;
}

#HouseMenuNav ul ul {
width:165px;
}

#HouseMenuNav ul ul a {
width:165px;
}

And in your main index.ascx file, add this bit of javascript to the bottom of the page. This will ensure submenu items remain visible when you're on that page.

 <script type="text/javascript" language="javascript">
    current = document.getElementById('HouseMenuNavCurrentItem');
    if(current.id != "")
    {
        if (current.parentNode.parentNode.id != "leftside") {
            current.parentNode.parentNode.id="HouseMenuNavCurrentItem";
            current.style.fontStyle="italic";
        }
    }
</script>

 

You are not authorized to post a reply.
Forums > House Modules > HouseMenu 1.x > Dynamic Vertical Menu



ActiveForums 3.6
  

Terms Of Use  |  Privacy Statement
Copyright © 2006-2008 by Avastone Technologies. All rights reserved.