HouseOfNuke HouseMenu Horizontal Dynamic Nav
Last Post 07/23/2010 1:37 PM by Kevin. 1 Replies.
Author Messages
Kevin
Nuke Newbie
Nuke Newbie
Posts:7


--
07/23/2010 12:43 PM
    I am developing a site here http://www.alserracolorado.com/dnn/...ault.aspx.

    I am trying to create a horizontal Main menu with a verticle sub menu underneath that is dynamic. Exactly how the menu is on House of Nuke. I have watched the CSS Skinning tutorials, I have watched the How to create a horizontal css menu tutorials and I still cant quite figure it out. Even if I change the skin.xml file to HOUSEMENU to dynamic they still show up statically .... anyone please help!
    Kevin
    Nuke Newbie
    Nuke Newbie
    Posts:7


    --
    07/23/2010 1:37 PM
    What I ended up doing was copying the code below and modifying it to fit my needs and that seems to be working so far so if you are looking for a Horizontal Menu with a verticle drop down that is dynamic this code was found on the House Of Nuke website from their menu. I copied it into my skin.css file and it worked fine.

    /*********************************************************************
    Standard structural CSS that typically should not need to be changed
    *********************************************************************/
    #HouseMenuNav, #HouseMenuNav ul { /* all submenu lists */
    padding: 0;
    margin: 0;
    margin-top: -5px;
    border: 0;
    list-style: none;
    white-space: nowrap;
    z-index: 99999;
    position: relative;
    }

    #HouseMenuNav li { /* all list items */
    position: relative;
    display: inline;
    float: left;
    margin: 0;
    border: 0;
    padding: 0;
    }

    #HouseMenuNav li li { /* all items under the top level */
    z-index: 11113;
    }

    #HouseMenuNav a { /* all links within the menu wrapper */
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    }

    #HouseMenuNav li li a { /* all item links under the top level */
    margin: 0;
    border: 0;
    padding: 0;
    }

    #HouseMenuNav li a:hover {
    margin: 0;
    border: 0;
    padding: 0;
    }

    #HouseMenuNav li li a:hover {
    margin: 0;
    border: 0;
    padding: 0;
    }

    #HouseMenuNav li ul {
    position: absolute;
    margin: 0;
    border: 0;
    padding: 0;
    z-index: 11112;
    }

    #HouseMenuNav li ul ul { /* third-and-above-level lists */
    margin: 0;
    border: 0;
    padding: 0;
    }

    #HouseMenuNav li:hover ul ul,
    #HouseMenuNav li:hover ul ul ul,
    #HouseMenuNav li.sfhover ul ul,
    #HouseMenuNav li.sfhover ul ul ul {
    left: -9999px;
    }

    #HouseMenuNav li:hover ul,
    #HouseMenuNav li li:hover ul,
    #HouseMenuNav li li li:hover ul,
    #HouseMenuNav li.sfhover ul,
    #HouseMenuNav li li.sfhover ul,
    #HouseMenuNav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    z-index: 99999;
    }

    #HouseMenuNav iframe {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    filter: progidXImageTransform.Microsoft.Alpha(style=0,opacity=0);
    display: block;
    }

    .ArrowPointer
    {
    cursor: default;
    }



    /*******************************************************
    Presentation CSS that typically needs to be customized
    *******************************************************/
    #HouseMenuNav, #HouseMenuNav ul { /* all submenu lists */
    border: solid 1px #036;
    width: 100%;
    height: 22px;
    _height: 20px;
    line-height: 12px;
    background-color: #369;
    }

    #HouseMenuNav li { /* all list items */
    width: 144px;
    height: 22px;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    width: auto;
    _width: 1px;
    height: 22px;
    _height: 20px;
    /* end hack */
    }

    #HouseMenuNav li li { /* all items under the top level */
    width: 148px;
    height: auto;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    width: 134px;
    _width: 144px;
    /* end hack */
    }

    #HouseMenuNav a { /* all links within the menu wrapper */
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 9px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: transparent;
    padding: 5px;
    width: auto;
    height: auto;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    _width: 100%;
    height: 12px;
    _height: 20px;
    /* end hack */
    }

    #HouseMenuNav li li a { /* all item links under the top level */
    padding: 5px;
    width: 148px;
    height: 20px;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    width: 134px;
    _width: 144px;
    height: 12px;
    _height: 20px;
    /* end hack */
    }

    #HouseMenuNav li a:hover {
    padding: 5px;
    color: #036;
    background-color: #9cf;
    height: auto;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    height: 12px;
    _height: 20px;
    /* end hack */
    }

    #HouseMenuNav li li a:hover {
    color: #036;
    background-color: #9cf;
    padding: 5px;
    height: auto;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    height: 12px;
    _height: 20px;
    /* end hack */
    }

    #HouseMenuNav li ul { /* second-level lists */
    width: 144px; /* width of submenu, must be set so third-level list can get shifted over properly */
    left: -9999px; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    border: solid 1px #036;
    margin: -2px 0 0 0;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    margin: 0;
    /* end hack */
    line-height: 12px;
    background-color: #69c;
    height: auto;
    }

    #HouseMenuNav li ul ul { /* third-and-above-level lists */
    margin: -22px 0 0 144px;
    border: solid 1px #036;
    line-height: 12px;
    background-color: #69c;
    }

    /* Applied to the parent item, if displayed, in either vertical or horizontal
    orientation. Must follow other styles. */
    #HouseMenuNav #houseMenuParentItem a
    { /* all links under the parent item (li) */
    background-color: transparent;
    text-decoration: none;
    }

    #HouseMenuNav a#houseMenuParentLink
    { /* parent link itself */
    background-color: transparent;
    text-decoration: none;
    }

    #HouseMenuNav a#houseMenuCurrentLink
    { /* current link itself */
    padding: 5px;
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }




    ---