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>
|