SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Change staticmenu style when in submenu (dynamicmenu)

    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:
    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>
    Last edited by Paul O'B; Aug 29, 2010 at 02:34. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 ?

    Code:
    <!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> &gt; </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>
    Last edited by Paul O'B; Aug 29, 2010 at 02:34. Reason: code tags added

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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&#37; 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.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Holy

    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.

  6. #6
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Holy

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

  7. #7
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ginobili View Post
    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..
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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).

  10. #10
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you dynamically update the links to the pages, if the pages are on different folders ? I'm using the suckerfish menu now.

  11. #11
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind.. stupid question.. figured it out..

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ginobili View Post
    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/
    I build mine in a similar manner, but instead of the suckerfish script I use PeterNed's "Whatever:hover" for the IE6- support.

    http://www.xs4all.nl/~peterned/csshover.html
    (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.

    Quote Originally Posted by ginobili View Post
    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..
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •