Change staticmenu style when in submenu (dynamicmenu)

ginobili · August 28, 2010, 12:17am

Hi All,

I want to make my menu something like this page: http://www.registrar.uwo.ca/

As you can see, when you hover over the staticMenu, the dynamicMenu will popout and the hovering over the dynamic menu will keep the staticmenu also selected.

However, I can’t seem to keep the staticMenu “selected”. I’m using asp.net Menu with a SiteMap. Heres my code:


<div id="navigation">
        <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" runat="server"/>
        <asp:Menu ID="menu" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" 
            DataSourceID="SiteMapDataSource1" runat="server">
            <StaticMenuItemStyle ItemSpacing="0" />
            <StaticSelectedStyle CssClass="staticSelectedStyle" />
            <StaticHoverStyle CssClass="staticHoverStyle" />
            <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
            <DynamicMenuStyle CssClass="dynamicMenuStyle" />
            <DynamicMenuItemStyle CSSClass="dynamicMenuItemStyle" />
            <DynamicHoverStyle CssClass="dynamicHoverStyle" />
              
        </asp:Menu>

MenuStyleSheet.css:

.menu
{
    background-color:#000000;
}

.staticMenuItemStyle 
{
    background-color:#000000;
    color: White;
    padding: 10px 40px 10px 40px;
    text-align: center;
    vertical-align: middle;
    width:200px;
}

.staticSelectedStyle
{
    background-color: Gray;
}

.staticHoverStyle
{
    background-color: Gray;
    color: White;
}

.dynamicMenuStyle 
{
}

.dynamicMenuItemStyle
{
    color:White;
    background-color:Gray;
    padding: 8px 5px 8px 5px;
    text-align:center;
    vertical-align:middle;
    width:200px;
}

.dynamicHoverStyle
{
    background-color: Black;
}

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  
  <siteMapNode title="Home" url="~/Home.aspx" description="Home">
    
    <siteMapNode title="MES" url="~/Default.aspx" description="System">
      <siteMapNode title="Counts" url="~/TestPages/Counts.aspx"   description="Counts" />
      <siteMapNode title="Points" url="~/TestPages/Counts.aspx" description="Points" />
    </siteMapNode>

    <siteMapNode title="Audit" url="~/Audit.aspx" description="Audit">
      <siteMapNode url="~/TestPages/Counts.aspx" title="Counts"  description="Counts" />
    </siteMapNode>

    <siteMapNode title="Admin" url="~/Admin.aspx" description="Admin">
      <siteMapNode url="~/TestPages/Counts.aspx" title="PayPoints"  description="Points" />
    </siteMapNode>

    
  </siteMapNode>

</siteMap>

PaulOB · August 28, 2010, 8:54am

Hi, Welcome to Sitepoint

Unfortunately asp means nothing to me and you need to post the css and html that the browser sees. Run the page in your browser and then just copy the html from “view source” and then we can tell you what styles you need to apply to make it work.

You should follow the suckerfish tutorial to see how these menus are actually designed though to get a good idea of what needs to be done.

Basically you have a nested list inside a parent and when you hover the parent you reveal the submenu. e.g.

li ul {left:-999em}/* initially hide sub menu /
li:hover ul{left:0}/ bring menu into view after being hidden off screen*/

Because the nested list is contained within the parent it will stay open as long as the parent or the child is hovered.

It’s basically as simple as that but you must ensure that parent and child are in contact with each because if there is a gap between them then you lose the hover effect and the menu disappears.

Hope that helps:)

ginobili · August 28, 2010, 1:25pm

Paul_O_B:

Hi, Welcome to Sitepoint

Unfortunately asp means nothing to me and you need to post the css and html that the browser sees. Run the page in your browser and then just copy the html from “view source” and then we can tell you what styles you need to apply to make it work.

You should follow the suckerfish tutorial to see how these menus are actually designed though to get a good idea of what needs to be done.

Basically you have a nested list inside a parent and when you hover the parent you reveal the submenu. e.g.

li ul {left:-999em}/* initially hide sub menu /
li:hover ul{left:0}/ bring menu into view after being hidden off screen*/

Because the nested list is contained within the parent it will stay open as long as the parent or the child is hovered.

It’s basically as simple as that but you must ensure that parent and child are in contact with each because if there is a gap between them then you lose the hover effect and the menu disappears.

Hope that helps:)

Thanks Paul…

Ok… Heres the source… I didn’t know asp:menu was translated into html tables… but here it is…

Is it better to create the list myself instead of using asp.net menu controls… I mean… what is the norm ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
    Manufacturing Execution System
</title><link href="MasterStyleSheet.css" rel="stylesheet" type="text/css" /><link href="MenuStyleSheet.css" rel="stylesheet" type="text/css" /><style type="text/css"> 
    .ctl00_menu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .ctl00_menu_1 { text-decoration:none; }
    .ctl00_menu_2 {  }
    .ctl00_menu_3 { border-style:none; }
    .ctl00_menu_4 {  }
    .ctl00_menu_5 { border-style:none; }
    .ctl00_menu_6 {  }
    .ctl00_menu_7 {  }
    .ctl00_menu_8 { border-style:none; }
    .ctl00_menu_9 {  }
    .ctl00_menu_10 { border-style:none; }
    .ctl00_menu_11 {  }
    .ctl00_menu_12 { border-style:none; }
    .ctl00_menu_13 {  }
 
</style></head>
<body>
    <form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MQ9kFgJmD2QWAgIDD2QWAgILDzwrAA0CAA8WAh4LXyFEYXRhQm91bmRnZAwUKwAEBQswOjAsMDoxLDA6MhQrAAIWEh4FVmFsdWUFA01FUx4JRGF0YUJvdW5kZx4IU2VsZWN0ZWRnHgRUZXh0BQNNRVMeC05hdmlnYXRlVXJsBRgvUHJvZENvdW50cy9EZWZhdWx0LmFzcHgeB0VuYWJsZWRnHgpTZWxlY3RhYmxlZx4HVG9vbFRpcAUeTWFudWZhY3R1cmluZyBFeGVjdXRpb24gU3lzdGVtHghEYXRhUGF0aAUYL3Byb2Rjb3VudHMvZGVmYXVsdC5hc3B4FCsAAwUHMDowLDA6MRQrAAIWEB8EBRFQcm9kdWN0aW9uIENvdW50cx8BBRFQcm9kdWN0aW9uIENvdW50cx8FBTEvUHJvZENvdW50cy9UZXN0UGFnZXMvY2FtaUFzc2VtYmx5UHJvZENvdW50cy5hc3B4HwgFEVByb2R1Y3Rpb24gQ291bnRzHwZnHwdnHwkFMS9wcm9kY291bnRzL3Rlc3RwYWdlcy9jYW1pYXNzZW1ibHlwcm9kY291bnRzLmFzcHgfAmdkFCsAAhYQHwQFCVBheVBvaW50cx8BBQlQYXlQb2ludHMfBQUrL1Byb2RDb3VudHMvVGVzdFBhZ2VzL2NhbWlCRVByb2RDb3VudHMuYXNweB8IBQlQYXlQb2ludHMfBmcfB2cfCQUrL3Byb2Rjb3VudHMvdGVzdHBhZ2VzL2NhbWliZXByb2Rjb3VudHMuYXNweB8CZ2QUKwACFhAfBAUFQXVkaXQfAQUFQXVkaXQfBQUWL1Byb2RDb3VudHMvQXVkaXQuYXNweB8IBQVBdWRpdB8GZx8HZx8JBRYvcHJvZGNvdW50cy9hdWRpdC5hc3B4HwJnZBQrAAIWEB8EBQVBZG1pbh8BBQVBZG1pbh8FBRYvUHJvZENvdW50cy9BZG1pbi5hc3B4HwgFBUFkbWluHwZnHwdnHwkFFi9wcm9kY291bnRzL2FkbWluLmFzcHgfAmcUKwACBQMwOjAUKwACFhAfBAUGUGxhbnRzHwEFBlBsYW50cx8FBSovUHJvZENvdW50cy9BZG1pblBhZ2VzL01haW50YWluUGxhbnRzLmFzcHgfCAUGUGxhbnRzHwZnHwdnHwkFKi9wcm9kY291bnRzL2FkbWlucGFnZXMvbWFpbnRhaW5wbGFudHMuYXNweB8CZ2RkGAEFCmN0bDAwJG1lbnUPD2QFA01FU2TED1gGu2xo6Kl0XrKL+aG/PIWKCA==" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/ProdCounts/WebResource.axd?d=DcRIdlxeW0wveV97LP5Ckg2&amp;t=633634729337345437" type="text/javascript"></script>
 
 
<script src="/ProdCounts/ScriptResource.axd?d=CqYtKhBaZ2RM6JEUFCv6TI9K3tCwSvPXyrMB6QCiTusHq2oga4h-4x0b9JC45Sla0&amp;t=ffffffffd7497f55" type="text/javascript"></script>
<script src="/ProdCounts/ScriptResource.axd?d=FoDQ_sqinyHwcmn3Wt4ml9HoiYpsiXnHJRi9sfUnqPbQepGb2vb_gshi3wClbh4aW_zwFsTU8IotiDA_9Uw9613cQqyoYxDzltw2yeRKqds1&amp;t=5d0e31f6" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
 
<script src="/ProdCounts/ScriptResource.axd?d=FoDQ_sqinyHwcmn3Wt4ml9HoiYpsiXnHJRi9sfUnqPbQepGb2vb_gshi3wClbh4aWfJ4dOSUbehsNHlroc5ZRrcXWZDTrul0DuC5eldBa_l6VFGr7HvOzQUuASCAL6610&amp;t=5d0e31f6" type="text/javascript"></script>
    <div class="breadCrumb">
        <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
 
        <span>
            <span id="ctl00_SiteMapPath1"><a href="#ctl00_SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/ProdCounts/WebResource.axd?d=99o8GSRe9OSMtQUcjcc1Zw2&amp;t=633634729337345437" style="border-width:0px;" /></a><span><a title="Home" href="/ProdCounts/Home.aspx">Home</a></span><span> > </span><span>MES</span><a id="ctl00_SiteMapPath1_SkipLink"></a></span>
            
        </span>
    </div>
    <hr />
    <div style="font-size:0;height:5px;"></div>
    <div id="header" class="title">
        <img src="images/HP.gif" align="middle" style="height:64px;width:64px;border-width:0px;" />
        <span>Manufacturing Execution System</span>
    </div>
    <div style="font-size:0;height:5px;"></div>
     <div style="background-color:Black; height:100&#37;; width:100%;" id="navigation">
        
        <a href="#ctl00_menu_SkipLink"><img alt="Skip Navigation Links" src="/ProdCounts/WebResource.axd?d=99o8GSRe9OSMtQUcjcc1Zw2&amp;t=633634729337345437" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_menu" class="ctl00_menu_2" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Manufacturing Execution System" id="ctl00_menun0"><table class="staticMenuItemStyle ctl00_menu_4 staticSelectedStyle ctl00_menu_9" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="white-space:nowrap;"><a class="ctl00_menu_1 staticMenuItemStyle ctl00_menu_3 staticSelectedStyle ctl00_menu_8" href="/ProdCounts/Default.aspx" style="border-style:none;font-size:1em;">MES</a></td>
            </tr>
        </table></td><td style="width:0px;"></td><td style="width:0px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Audit" id="ctl00_menun1"><table class="staticMenuItemStyle ctl00_menu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="white-space:nowrap;"><a class="ctl00_menu_1 staticMenuItemStyle ctl00_menu_3" href="/ProdCounts/Audit.aspx" style="border-style:none;font-size:1em;">Audit</a></td>
            </tr>
        </table></td><td style="width:0px;"></td><td style="width:0px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Admin" id="ctl00_menun2"><table class="staticMenuItemStyle ctl00_menu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="white-space:nowrap;"><a class="ctl00_menu_1 staticMenuItemStyle ctl00_menu_3" href="/ProdCounts/Admin.aspx" style="border-style:none;font-size:1em;">Admin</a></td>
            </tr>
        </table></td><td style="width:0px;"></td>
    </tr>
</table><div id="ctl00_menun0Items" class="ctl00_menu_0 dynamicMenuStyle ctl00_menu_7">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Production Counts" id="ctl00_menun3">
            <td><table class="dynamicMenuItemStyle ctl00_menu_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_menu_1 dynamicMenuItemStyle ctl00_menu_5" href="/ProdCounts/TestPages/camiAssemblyProdCounts.aspx" style="border-style:none;font-size:1em;">Production Counts</a></td>
                </tr>
            </table></td>
        </tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="PayPoints" id="ctl00_menun4">
            <td><table class="dynamicMenuItemStyle ctl00_menu_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_menu_1 dynamicMenuItemStyle ctl00_menu_5" href="/ProdCounts/TestPages/camiBEProdCounts.aspx" style="border-style:none;font-size:1em;">PayPoints</a></td>
                </tr>
            </table></td>
        </tr>
    </table><div class="dynamicMenuItemStyle ctl00_menu_6 ctl00_menu_0" id="ctl00_menun0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
        <img src="/ProdCounts/WebResource.axd?d=GXp2Fw1hGtogfAqKp-8_c8ggB6TSysIuNfN7jf39bhY1&amp;t=633634729337345437" alt="Scroll up" />
    </div><div class="dynamicMenuItemStyle ctl00_menu_6 ctl00_menu_0" id="ctl00_menun0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
        <img src="/ProdCounts/WebResource.axd?d=ZxCnUS4D9UL-dKjB8rcNnuF3pXgVqA3xxiu3xLCcBzQ1&amp;t=633634729337345437" alt="Scroll down" />
    </div>
</div><div id="ctl00_menun2Items" class="ctl00_menu_0 dynamicMenuStyle ctl00_menu_7">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Plants" id="ctl00_menun5">
            <td><table class="dynamicMenuItemStyle ctl00_menu_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;width:100%;"><a class="ctl00_menu_1 dynamicMenuItemStyle ctl00_menu_5" href="/ProdCounts/AdminPages/MaintainPlants.aspx" style="border-style:none;font-size:1em;">Plants</a></td>
                </tr>
            </table></td>
        </tr>
    </table><div class="dynamicMenuItemStyle ctl00_menu_6 ctl00_menu_0" id="ctl00_menun2ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
        <img src="/ProdCounts/WebResource.axd?d=GXp2Fw1hGtogfAqKp-8_c8ggB6TSysIuNfN7jf39bhY1&amp;t=633634729337345437" alt="Scroll up" />
    </div><div class="dynamicMenuItemStyle ctl00_menu_6 ctl00_menu_0" id="ctl00_menun2ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
        <img src="/ProdCounts/WebResource.axd?d=ZxCnUS4D9UL-dKjB8rcNnuF3pXgVqA3xxiu3xLCcBzQ1&amp;t=633634729337345437" alt="Scroll down" />
    </div>
</div><a id="ctl00_menu_SkipLink"></a>
     </div>
    <div style="font-size:0;height:5px;"></div>
    
    
    
 
<script type="text/javascript"> 
//<![CDATA[
var ctl00_menu_Data = new Object();
ctl00_menu_Data.disappearAfter = 500;
ctl00_menu_Data.horizontalOffset = 0;
ctl00_menu_Data.verticalOffset = 0;
ctl00_menu_Data.hoverClass = 'ctl00_menu_13 dynamicHoverStyle';
ctl00_menu_Data.hoverHyperLinkClass = 'ctl00_menu_12 dynamicHoverStyle';
ctl00_menu_Data.staticHoverClass = 'ctl00_menu_11 staticHoverStyle';
ctl00_menu_Data.staticHoverHyperLinkClass = 'ctl00_menu_10 staticHoverStyle';
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>

system · August 28, 2010, 4:40pm

Endless nested tables for nothing, tons of unneccessary div’s and classes… much less javascript doing CSS’ job… Pitch it and start over.

Problems are further compounded by all the meaningless ct100_ classnames that don’t tell us what’s going on, and the endless inlined presentational styling isn’t helping one bit either.

I’d have to see what it is you are trying to do in a live copy and/or picture since I can’t even make sense of that mess; and it’s obviously not rendering what you want… though I am 100% certain EVERY one of your tables goes in the trash – as you’ve got 10k of markup for 132 bytes of content and four IMG… a sure sign something is truly amiss. (my normal ballpark figure for such a page would be less than 4k). At least 50% (and more like 70%) of what you have for markup should be pitched. It’s non-semantic, it’s ten times more complicated than it needs to be, etc, etc, etc.

Stevie_D · August 28, 2010, 7:19pm

Holy :x

If any “professional” editing software has produced that code, the author needs to be summarily shot.

There is no practical way to debug or even understand such a horrendous mess of code - DeathShadow is right, if you aren’t happy with what your editor has produced, your only sensible strategy is to ditch the editor, find a new one that does a proper job, and start from scratch.

ginobili · August 28, 2010, 9:03pm

Does anyone want to guess what the “professional” IDE is ?? … Microsoft Visual Studio 2008!

Ok… I’m going to ditch asp.net menu control and build my own menu using nested lists…

ginobili · August 28, 2010, 9:11pm

Actually… I have another question for you guys… Since I’m a novice web developer, I’d like to know if all you guys hardcode the menu’s like shown in this example :http://www.htmldog.com/articles/suckerfish/dropdowns/

Or do you guys build it from a sitemap (like I posted first) ? This was the main reason why I went for using asp.net menu control. I wasn’t happy about it, but I did it cause it was easier. Now I’d like to know, if there is a good replacement for it…

Stevie_D · August 29, 2010, 9:22am

I normally use a “server-side include” to get the menu on each page. This means that I just create a single file, which is then included on every page, and if I want to change anything, I only have one file to change.

PaulOB · August 29, 2010, 9:44am

As an aside the first link you posted is actually using the suckerfish menu that I linked to.

The table code you have shown above is virtually impossible to debug and as others have stated is not worth the effort of fixing as you can build the basic dropdown in a few minutes anyway (once you know what you are doing).

ginobili · August 30, 2010, 2:03pm

How do you dynamically update the links to the pages, if the pages are on different folders ? I’m using the suckerfish menu now.

ginobili · August 30, 2010, 2:12pm

Nevermind… stupid question… figured it out…

system · September 1, 2010, 2:48am

I build mine in a similar manner, but instead of the suckerfish script I use PeterNed’s “Whatever:hover” for the IE6- support.

(horrible website, great script!)

I do this because I often need hover effects on more than just the menu, and that script takes most of the headaches out of it. Just design for modern, and then throw csshover3.htc at it. (and before anyone *****es about the ‘problems’ with HTC’s, the ONLY problem is mime-type at which point fix your **** server instead of blaming .htc’s)

Though as per others, I include the markup for it (and all the other static elements that are the same on every page) using a SSI… These days that means PHP.

If you’re putting your entire sitemap into the menu, your navigation likely ends up such a convoluted mess it’s unusable. That’s the problem with dropdown menus and why increasingly I’m avoiding using them in the first place and just going for classic drill-down. As a rule of thumb I now NEVER do third-level cascades given what a pain in the ass they are to navigate.