locked
two level tab menu RRS feed

  • Question

  • User-1329334484 posted

    I have noticed thsi forum, I post in some other before...

    How can I create tab menu with two bars, similar to the one on Auctiva.com using menu control and cSS adapters?

    First bar: Tabs

     

    Second bar Links (second level, children of the item first selected in the tab above). The ain tab should be highlighted

    Seems like it is a cool new trend to have this kind of menu, suprised i could not find any solutuions to this...

    Thursday, October 19, 2006 10:35 PM

Answers

  • User-1329334484 posted

    This is the CSS I got so far, it is the CSS for the simple menu included in the toolkit. I have modified aspx page to have only this one included, I will seperate it later into two files (base functionality and look).

    And of course it looks like crap now, much different than http://www.cssplay.co.uk/menus/drop_line.html. Wonder if somebody can help sort it out, I am struggling with CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

     

    .AspNet-Menu a, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(drop/lefta.gif);

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a b, .AspNet-Menu :visited b {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(drop/mida.gif);

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(drop/righta.gif);

    border-bottom:1px solid #777;

    }

    .AspNet-Menu ul ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

    .AspNet-Menu a b, .AspNet-Menu :visited b {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif);

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu :hover {

    white-space:normal;

    }

    .AspNet-Menu a:hover b {

    color:#000;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a b

    {

    color:#000;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu ul li:hover ul,

    .AspNet-Menu ul a:hover ul{

    display:block;

    visibility:visible;

    top:2em;

    margin-top:1px;

    }

    .AspNet-Menu ul :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    .AspNet-Menu ul :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:#444;

    padding:0 10px;}

    .AspNet-Menu ul :hover ul li a:hover {

    color:#c00;

    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 28, 2006 11:10 PM

All replies

  • User-1329334484 posted

    I have downloaded the CSS Adapter sample kit, I thought that by commenting some lines of code in the adapter, it would make the second level menu to apear horizonla as opposed to vertical, but it does not work for some reason. This is the lines I have commented out (no change in behaviour)

    //if (((item.Depth < menu.StaticDisplayLevels) && (menu.StaticItemTemplate != null)) ||

    // ((item.Depth >= menu.StaticDisplayLevels) && (menu.DynamicItemTemplate != null)))

    //{

    // writer.WriteBeginTag("div");

    // writer.WriteAttribute("class", GetItemClass(menu, item));

    // writer.Write(HtmlTextWriter.TagRightChar);

    // writer.Indent++;

    // writer.WriteLine();

    // MenuItemTemplateContainer container = new MenuItemTemplateContainer(menu.Items.IndexOf(item), item);

    // if ((item.Depth < menu.StaticDisplayLevels) && (menu.StaticItemTemplate != null))

    // {

    // menu.StaticItemTemplate.InstantiateIn(container);

    // }

    // else

    // {

    // menu.DynamicItemTemplate.InstantiateIn(container);

    // }

    // container.DataBind();

    // container.RenderControl(writer);

    // writer.Indent--;

    // writer.WriteLine();

    // writer.WriteEndTag("div");

    //}

    //else

    Thursday, October 19, 2006 11:41 PM
  • User-1329334484 posted

    Just for clarification.

    The first bar is just buttons, the second bar of the menu is links only. They both work together. It is like the first bar is the first level of menu display, th second bar is the secon level, instead of popup menu...

    I have a feeling this should be possible to do using CSS adapters. I think I would need to change the menu adapter code somehow to output second level menu as links of bar below the first level of tabs. Than CSS would need to be modified as well.

    I am not sure what exactly I will need to change and if my idea is correct. Can somebody give me a hint? I rellay appreaciate it. thanks,

     

     

    Friday, October 20, 2006 7:57 AM
  • User-1329334484 posted

    I found CSs for the type of menu I want, here: http://www.cssplay.co.uk/menus/drop_line.html

     I am not clear if I need to change any code of the menu adapter, I was thinking I may need to remove the div wrapping, but not sure.

    Also the CSS in the example above dos not make the secon bar to stay once I click on the first bar. It only shows once the mouse is over theitem in the first bar...

     

    Friday, October 20, 2006 5:14 PM
  • User-1329334484 posted

    The problem I see doing this by using CSS adapters is that the second levl menu (bar underneath of the first menu). The problem is that CSS will only show the second menu when you hover over it. I want to show second bar when you click on the first menu.

    Is it possible to do it at all using CSS adapters?

     Please see www.auctiva.com for example of two bar menu

    Sunday, October 22, 2006 4:38 PM
  • User-534056067 posted
    Sorry, the adapters only support StaticDisplayLevels=1.
    Tuesday, October 24, 2006 8:01 PM
  • User-1329334484 posted

    Yes, but can the adapter code be changed?

     

    Tuesday, October 24, 2006 10:27 PM
  • User-534056067 posted

    Potentially, yes.  :) 

    I know you suggested some code mods earlier.  I'd prefer to put that aside for a moment and revisit the question of whether or not it might be possible to accomplish a multi-level static menu changing just the CSS.

    Fundamentally, you need to always make the CSS "display" property be "block" not "none" on second tier unordered lists (ul tags).

    ul ul
    {
    display:block !important;
    }

    Of course, you probably need to qualify that rule by saying that it only applies with some div with an id like foo.

    #foo ul ul
    {
    display:block !important;
    }

    Given this information, can you help me brainstorm on where we would go next?

    Tuesday, October 24, 2006 11:52 PM
  • User-1329334484 posted

    I will try to play with this CSS, I am new to  CSS... I guess I need to find out whatCSS classes to change exactly in the menu.css, which comes with CSS adapters... I would think that the second level menu could display horizontally as links, however will it stay there once I move the mouse from it?

    Please see some websites for example: www.auctiva.com, www.buysellcommunity. www.half.com

    They all have first menu as tabs, second level as links. Please take a look and you will know what I mean. I feel I may need to modify the code for that functinality, yet I have to figure out what I need to change...

    Wednesday, October 25, 2006 12:07 AM
  • User-1329334484 posted

    Oh by the way, how did you get your website name to display below user name in your posts? Thanks,

    Rafal

    Wednesday, October 25, 2006 12:10 AM
  • User-1329334484 posted

    I have tried that CSS and put it into Sampe Menu:

    .SimpleEntertainmentMenu ul.AspNet-Menu ul

    {

    width: 130px;

    left: 3px;

    top: 1.7em;

    display:block;

    }

     

    This is not even close to what is on Auctiva.com. I think it should be possible to do with a combination of CSS and code change...

    Two bars:

    1) Regular menu at the top

    2) links as submenu items, displayed horizontal way

    3) All done as menu control + CSS adapters

    Friday, October 27, 2006 11:34 PM
  • User-1329334484 posted

    This menu: http://www.cssplay.co.uk/menus/drop_line.html#nogo is very close to what I want to achieve. The only difference is that I want the submenu o stay all the time, unless other main menu item cliked of course...

    Can this be done with CSS adapters? Waht changes do I need to do to the sample menu included in the toolkit?

    Friday, October 27, 2006 11:56 PM
  • User-1329334484 posted

    After doing some reading (whitepaper etc) I came to conclusion that I need to modify menu.css in the Simple Menu example, which comes with the toolkit.

    I think that is the way to go, I am new to CSS, but hopefully can figure it out. As a first step I will transform the existing menu.css intousing this sample CSS:

    .menu {
    ;
    width:750px;
    height:2em;
    background:#b7c6ac;
    border-top:10px solid #b7c6ac;
    padding-bottom:1px;
    background:#b7c6ac url(drop/line.gif) bottom left repeat-x;
    margin-bottom:5em;
    }

    * html .menu {padding-bottom:0;}

    .menu ul{
    list-style-type:none;
    padding:0;
    margin:0 0 0 20px;
    width:730px;
    height:100%;
    }

    .menu li{
    float:left;
    }

    .menu table{
    ;
    border-collapse:collapse;
    left:0;
    top:0;
    }

    .menu a, .menu :visited {
    color:#fff;
    text-decoration:none;
    }
    .menu a em.lft, .menu :visited em.lft {
    display:block;
    float:left;
    width:5px;
    height:2em;
    background: transparent url(drop/lefta.gif);
    border-bottom:1px solid #777;
    }
    .menu a b, .menu :visited b {
    display:block;
    font-weight:normal;
    float:left;
    padding:0 10px;
    height:2em;line-height:1.9em;
    background: transparent url(drop/mida.gif);
    cursor:pointer;
    border-bottom:1px solid #777;
    }
    .menu a em.rgt, .menu :visited em.rgt {
    display:block;
    float:left;
    width:5px;
    height:2em;
    background: transparent url(drop/righta.gif);
    border-bottom:1px solid #777;
    }

    .menu ul ul {
    visibility:hidden;
    ;
    height:2em;
    top:2em;
    left:-20px;
    width:749px;
    border-bottom:1px solid #777;
    border-right:1px solid #777;
    background:#ccc;
    }

    .menu :hover {
    white-space:normal;
    }

    .menu a:hover b {
    color:#000;
    background: transparent url(drop/midb.gif);
    border-bottom-color:#ccc;
    }
    .menu a:hover em.lft {
    background: transparent url(drop/leftb.gif);
    border-bottom-color:#ccc;
    }
    .menu a:hover em.rgt {
    background: transparent url(drop/rightb.gif);
    border-bottom-color:#ccc;
    }

    .menu li:hover > a b
    {
    color:#000;
    background: transparent url(drop/midb.gif);
    border-bottom-color:#ccc;
    }
    .menu li:hover > a em.lft {
    background: transparent url(drop/leftb.gif);
    border-bottom-color:#ccc;
    }
    .menu li:hover > a em.rgt {
    background: transparent url(drop/rightb.gif);
    border-bottom-color:#ccc;
    }
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    display:block;
    visibility:visible;
    top:2em;
    margin-top:1px;
    }

    .menu ul :hover ul li {
    display:block;
    border-left:1px solid #777;
    background:#ccc;
    height:2em;
    }
    .menu ul :hover ul li a {
    display:block;
    font-size:0.8em;
    height:2em;
    line-height:2.5em;
    width:auto;
    float:left;
    color:#444;
    padding:0 10px;}
    .menu ul :hover ul li a:hover {
    color:#c00;
    }
    </style>

    I am not sure yet of all the syntax nuances, but will dig into that. Also my other concern is how to make the menu to stay once I hover over the main menu (first ul li). I am not sure if I can achieve this with pore CSS or do I need to use java script for that. Any recommendation will be apprecaited. Please let me know if I am heading in the right direction.

     

    Will keep you updated.

    Saturday, October 28, 2006 9:11 PM
  • User-1329334484 posted

    I forgot to provide html, it is little bit different than the one created by menu adapter...

    <ul id="sub_menu">


    <li class="home"><a href="../index.html"  accesskey="H" title="Home Page">Home</a></li>

    <li class="first"><a href="index.html" accesskey="F" title="First - Section List">First</a></li><li class="previous"><a href="dd_valid_2.html" accesskey="P" title="Previous">Previous</a></li><li class="next"><a href="basic_dd.html" accesskey="N" title="Next">Next</a></li><li class="last"><a href="vertical_slide.html" accesskey="L" title="Last">Last</a></li>
    <li class="comments"><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=CSS%20drop-line%202"  accesskey="C" title="Comments for this page">COMMENTS</a></li>

    <li class="tutorial_off">&nbsp;</li></ul>

    </div> <!-- end of page_head -->
    <div id="info">

    <h2>A drop-line cascading menu v2</h2>
    <h3>11th October 2006</h3>

    <div class="menu">
    <ul>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="John Constable"><em class="lft"></em><b>John Constable</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Hay Wain">The Hay Wain</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Brighton Beach">Brighton Beach</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Malvern Hall">Malvern Hall</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Salisbury Cathedral">Salisbury Cathedral</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Weymouth Bay">Weymouth Bay</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="William Turner"><em class="lft"></em><b>William Turner</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Fishermen at Sea">Fishermen at Sea</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Shipwreck">The Shipwreck</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Crossing the Brook">Crossing the Brook</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Henri Matisse"><em class="lft"></em><b>Henri Matisse</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Dream">The Dream</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Woman in Blue">Woman in Blue</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Yellow Dress">The Yellow Dress</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Paul Cezanne"><em class="lft"></em><b>Paul Cezanne</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="The Large Bathers">The Large Bathers</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Onions and Bottles">Onions and Bottles</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Mardi Gras">Mardi Gras</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Still Life">Still Life</a></li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1444780#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>

    Saturday, October 28, 2006 10:05 PM
  • User-1329334484 posted

    This is the CSS I got so far, it is the CSS for the simple menu included in the toolkit. I have modified aspx page to have only this one included, I will seperate it later into two files (base functionality and look).

    And of course it looks like crap now, much different than http://www.cssplay.co.uk/menus/drop_line.html. Wonder if somebody can help sort it out, I am struggling with CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

     

    .AspNet-Menu a, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(drop/lefta.gif);

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a b, .AspNet-Menu :visited b {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(drop/mida.gif);

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(drop/righta.gif);

    border-bottom:1px solid #777;

    }

    .AspNet-Menu ul ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

    .AspNet-Menu a b, .AspNet-Menu :visited b {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif);

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu :hover {

    white-space:normal;

    }

    .AspNet-Menu a:hover b {

    color:#000;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a b

    {

    color:#000;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu ul li:hover ul,

    .AspNet-Menu ul a:hover ul{

    display:block;

    visibility:visible;

    top:2em;

    margin-top:1px;

    }

    .AspNet-Menu ul :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    .AspNet-Menu ul :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:#444;

    padding:0 10px;}

    .AspNet-Menu ul :hover ul li a:hover {

    color:#c00;

    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 28, 2006 11:10 PM
  • User-1329334484 posted

    OK, I have clean up the aspx page. It looks better, but still not close to : http://www.cssplay.co.uk/menus/drop_line.html#nogo is

    <head runat="server">

    <%-- <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />

    --%> <link runat="server" rel="stylesheet" href="~/CSS/Menu.css" type="text/css" id="AdaptersInvariantImportCSS" />

    <%--<!--[if lt IE 7]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />

    <![endif]-->

    <!--[if gt IE 6]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu7.css" type="text/css" id="IEMenu7CSS" />

    <![endif]--> --%>

    </head>

    Here is the updated CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

     

    .AspNet-Menu a, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/lefta.gif);

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a b, .AspNet-Menu :visited b {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif);

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/righta.gif);

    border-bottom:1px solid #777;

    }

    .AspNet-Menu ul ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    .AspNet-Menu a:hover b {

    color:#000;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a b

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(menu/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(menu/rightb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu ul li:hover ul,

    .AspNet-Menu ul a:hover ul{

    display:block;

    visibility:visible;

    top:2em;

    margin-top:1px;

    }

    .AspNet-Menu ul :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    .AspNet-Menu ul :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:#444;

    padding:0 10px;}

    .AspNet-Menu ul :hover ul li a:hover {

    color:#c00;

    }

    Saturday, October 28, 2006 11:38 PM
  • User-1329334484 posted

    OK, after I figured out what each class is responsible for, I got everything mapped!!! Here is a working sample: http://www.dnndirect.com/CssAdaptersTutorial/WalkThru/Simplemenu.aspx

     Seems like I almost got the menu from http://www.cssplay.co.uk/menus/drop_line.html#nogo, which works with sample walkthrough menu example from CSS adapters toolkit. The remaining pieces of work are:

    1) Make graphics preattier (experiment with different styles)

    2) Split CSS into functional and presentational part (hope somebody can help). I am unclear how to do that split...

    3) Create elm.lft and elm.rght. I think each main menu "a" element has to be wrapped with those tags... In order to do it I think I will need to modify CSS adapter' source code... Please let me know what you think

    4) That is the most important! Make the second level menu to stay, I am not sure how to acomplish this, I guess this deserves a seperate thread... Right now it disapears once I move the mouse out. Not sure if I can acomplish this with CSS only or do i need to write somw java script...

     

    Here is the final CSS (please feel free to use it):

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/lefta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif);

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/righta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(menu/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(menu/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

     

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul{

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    ul.AspNet-Menu :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    /* hover over the main menu, sets properties of a link in the second line of menu */

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

    Sunday, October 29, 2006 4:21 PM
  • User917612778 posted
    hey rfurdzik, did you ever figure out how to do this?
    Tuesday, December 5, 2006 2:25 PM
  • User-1329334484 posted
    No, I gave up... :(
    Tuesday, December 5, 2006 4:37 PM
  • User-534056067 posted

    Hi.  I haven't been paying enough attention to this thread.  It sounds like there's a lot of frustration mounting here.  If you don't mind, I'd like to brainstorm with you a little with the hopes of getting you past this difficulty.

    I took a look at some pages that were mentioned in the beginning of this thread.  I sort of get what you are hoping to do.  To make it easier, though, it would be great if we could develop a simple ASPX page's markup and post it here so we can all work from the same exact example in a way that we can control.

    It seems like you want to show two tiers simultaneously.  It also sounds like you want the second tier to correspond to the current page, rather than being something that changes as you hover over the top tier menu items.  Is that correct?

    If so, then you need to start looking at a couple of things.  You need to handle both tiers essentially the same as a top-tier horizontal menu in the sample menus.  And, you need to carefully make sure that the right top tier menu item is marked as "selected" so it corresponds with the current page.  If the menu posts back you will get that selection marking for free.  I suspect, though that your menu is not posting back when it navigates.  It is just usin some urls that you set up in your sitemap.  Those don't post back when you navigate.  They do simple HTTP GET request/response.  Anyway, you'll probably need set up your Selected menu item in your OnMenuItemDataBinding event in the menu.  Something like this:

        <asp:Menu ID="products" runat="server" CssSelectorClass="prodmenu" DataSourceID="prodlistDS" OnMenuItemDataBound="OnProductsMenuItemDataBound">


        protected void OnProductsMenuItemDataBound(object sender, MenuEventArgs e)
        {
            if (e.Item != null)
            {
                if (Request.Url.PathAndQuery == e.Item.NavigateUrl)
                {
                   e.Item.Selected = true;
                }
            }
        }

    That should set you up to be able to use the adapter's AspNet-Menu-ParentSelected class.  You'll find that when you select a top-tier menu item it marks its child menus with AspNet-Menu-ParentSelected.  So, you can take advantage of that to add some "important" rules to your CSS to force the second tier LI marked with AspNet-Menu-ParentSelected to be always display:block and visibility:visible (effectively overriding what is going on in CSS\Menu.css by using extra rules that are marked with !important so they always take precedence).

    OK, that should get you started.  Write back and I'll try to work with you on "next steps" to deal with whatever problems you run into.  Good luck and best regards.  Sorry that I've sort of ignored this problem for a while.  I'll try to be more helpful (though I hope you understand that no one pays for me to do this... it's on my dime, so to speak... same as everyone else on this forum).

    Tuesday, December 5, 2006 5:13 PM
  • User-1329334484 posted

    Russ,

    Thank you very much for your post. I undrstand you were busy, no problem, we all are. Seems you are very knowledgable about CSS Adapters... I have to read it again tomorrow morning as I have hedeache now - catched some flu...

    For now simple question:

    Are there two many controls or only one? What do you think about the CSS I have created, will it be usefull in our example? I just took the sample simple menu page from CSS Adapters tookling and modified CSS only... Seems like your idea is more comprehensive,I will analyse it tomorrow. Thanks,

    Rafal

     

    Tuesday, December 5, 2006 6:26 PM
  • User-534056067 posted

    Gosh, I'm sorry you are feeling poorly, Rafal.  Get some rest and drink soup!

    I'm suggesting that there should be just one asp:Menu.  Sorry, I've not yet digested your proposed CSS.  I'll have to get to that later.  :) 

     Feel better soon. Regards,

    Tuesday, December 5, 2006 10:13 PM
  • User917612778 posted
    before I start working heavy into this, I was wondering if anyone has a tutorial on how to convert a regular vs 2005 atlast web project into a css friendly project? I looked around for this but couldn't find it.  Since my project has already started I was wondering if it was even possible. 
    Wednesday, December 6, 2006 10:56 AM
  • User-1329334484 posted

    Hi,

    I think it should be not very difficult.

    1) Compare web.config files. Makerequired changes to yur web.config

    2) Copy folders from CSS adapters to your project

    I think it should work. I done something similar earlier

    Wednesday, December 6, 2006 11:01 AM
  • User917612778 posted
    one quesiton, is there even a possible way where we can assign a specific id or class to a selected tab? so for instance, everything has <li class="menu_notselected"> except for the one tab that's open <li class="menu_selected">
    Wednesday, December 6, 2006 11:30 AM
  • User-534056067 posted
    KBGhost, this functionality already exists.  Please read http://www.asp.net/CSSAdapters/WalkThru/WalkThrough.aspx#SimpleTreeView and look for the description of the selection classes that the adapters produce.  Note my posting earlier in this thread that discusses setting the selected node in situations where the page navigates without using postback.
    Wednesday, December 6, 2006 12:11 PM
  • User-1329334484 posted

    OK, before proceedings with changes let's summarize what I have here.

    The current "working" version can be seen here:  http://www.dnndirect.com/CssAdaptersTutorial/WalkThru/Simplemenu.aspx

    This is all acomplishe with CSS only, no changes to the code at all!  How did I get there (for people just joining):

    1) I have installed CSS adapters toolik,

    2) Created Tutorial website

    3) Modified the file in \CSS\menu.css. Now the next step would be to move some of this to the  /WalkThru/Menu/simplemenu.css. this way we will seperate what is constant from what is changable... I hope somebody can help with this part...

    Here is the CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/lefta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif) ;

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/righta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(menu/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(menu/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

     

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul{

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    ul.AspNet-Menu :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    /* hover over the main menu, sets properties of a link in the second line of menu */

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

    The simplemenu.aspx is just from the kit (no changes). Added here for reference:

     

    Wednesday, December 6, 2006 12:29 PM
  • User917612778 posted

    i talked it over extensively with my coworker and boss and I think we're going to skip this way all together.  It just doesn't seem workable and looks like it's going to cause more issues then it's worth.  What we're going to do is this, we're going to take each tab as its own separate masterpage.  From there, we'll have a more programmatic control over each submenu and assume control over this in the same way.  It is not object oriented, but unfortunately, coupled with a time constraint, it looks liek there is no easy solution to this. 

     Unless someone sees a way to output the html into this format or remotely close, I think I'm just going to look into hardcoding it.

    <div id="menu">
    <ul>
    <li id="selected"><a href="http://forums.asp.net/AddPost.aspx?PostID=1488421#">hello</li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1488421#">bye</li>
    </ul>
    </div>
    <div id="submenu">
    <ul>
    <li id="selected"><a href="http://forums.asp.net/AddPost.aspx?PostID=1488421#">hello</li>
    <li><a href="http://forums.asp.net/AddPost.aspx?PostID=1488421#">bye</li>
    </ul>
    </div>

     

    Wednesday, December 6, 2006 1:40 PM
  • User917612778 posted
    you know what, I really refuse to believe this is the easiest way to do it.  I think I have a better way to do it, I'll get back to you tomorrow, I'm going to work on this on my spare time and see if I can hash out something.
    Wednesday, December 6, 2006 1:55 PM
  • User-1329334484 posted

    Hi, I have tried your suggestion, but it does not work, I guess there is something wrong with CSS, because the code works (I did debug). I have checked HTML and <a> element has the class "AspNet-Menu-Selected" assigned. I feel I am very close to get this working, please help.

    1) Here is my Menu.CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/lefta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif) ;

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/righta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(menu/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(menu/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    /*

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul{

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    */

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    /*

    ul.AspNet-Menu :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    */

    /* hover over the main menu, sets properties of a link in the second line of menu */

    /*

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    */

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    /*

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

    */

     

    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

     

    }

     

    2) My aspx page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RFmenu.aspx.cs" Inherits="WalkThru_RFmenu" %>

     

    <script runat="server">

    void OnClick(Object sender, MenuEventArgs e)

    {

    MessageLabel.Text = "You selected " + e.Item.Text + ".";

    e.Item.Selected = true;

    }

    </script>

    <!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 id="Head1" runat="server">

    <%-- <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />

    --%> <link runat="server" rel="stylesheet" href="~/CSS/Menu.css" type="text/css" id="AdaptersInvariantImportCSS" />

    <%--<!--[if lt IE 7]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />

    <![endif]-->

    <!--[if gt IE 6]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu7.css" type="text/css" id="IEMenu7CSS" />

    <![endif]--> --%>

    </head>

    <body>

    <form id="form1" runat="server">

     

    <asp:SiteMapDataSource id="SiteMap" Runat="Server"

    ShowStartingNode="False"/>

     

    <asp:Menu ID="EntertainmentMenu" runat="server" DataSourceID="SiteMap" Orientation="Horizontal" onmenuitemclick="OnClick" StaticDisplayLevels=2 OnMenuItemDataBound="OnProductsMenuItemDataBound">

    <%-- <Items>

    <asp:MenuItem Text="Music">

    <asp:MenuItem Text="Classical" />

    <asp:MenuItem Text="Rock">

    </asp:MenuItem>

    <asp:MenuItem Text="Jazz" />

    </asp:MenuItem>

    <asp:MenuItem Text="Movies" Selectable="false">

    <asp:MenuItem Text="Action" />

    <asp:MenuItem Text="Drama" />

    <asp:MenuItem Text="Musical" />

    </asp:MenuItem>

    </Items>--%>

    </asp:Menu>

     

    <div id="EntertainmentMessage">

    <asp:Label id="MessageLabel" runat="server" />

    </div>

    </form>

    </body>

    </html>

    3) My CS class file:

    using System;

    using System.Data;

    using System.Configuration;

    using System.Collections;

    using System.Web;

    using System.Web.Security;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Web.UI.WebControls.WebParts;

    using System.Web.UI.HtmlControls;

    public partial class WalkThru_RFmenu : System.Web.UI.Page

    {

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void OnProductsMenuItemDataBound(object sender, MenuEventArgs e)

    {

    if (e.Item != null)

    {

    if (Request.Url.PathAndQuery == e.Item.NavigateUrl)

    {

    e.Item.Selected = true;

    }

    }

    }

     

    }

    Wednesday, December 6, 2006 6:53 PM
  • User-288480790 posted

    Check this link:

     

    http://www.tjkdesign.com/articles/dropdown/demo.asp

     

    It's pure CSS, so it's not an exact answer. Perhaps it will make a good target to drive toward.

    Thursday, December 7, 2006 10:40 AM
  • User-1329334484 posted

    Robert, How is the selection of current tab (first row) done? I think I still would need to convert it to CSS adapters CSS file, since I am using .NET menu control, so why not to get my code working?

    I feel I am very close. I Think I have some problem with CSS... Can somebody look into my CSS?Why is the last part not working? It should show the second bar always:

    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

    }

     

    This is the final HTML output (seems OK):

    <div class="AspNet-Menu-Horizontal">
      <ul class="AspNet-Menu">
       <li class="AspNet-Menu-Leaf">
        <a href="/CssAdaptersTutorial1/WalkThru/RFMenu.aspx?test=1" class="AspNet-Menu-Link" title="A">
         A
        </a>
       </li>
       <li class="AspNet-Menu-WithChildren">
        <a href="/CssAdaptersTutorial1/WalkThru/RFMenu.aspx" class="AspNet-Menu-Link AspNet-Menu-Selected" title="B">
         B
        </a>
        <ul>
         <li class="AspNet-Menu-Leaf">
          <a href="/CssAdaptersTutorial1/secure/B1.aspx" class="AspNet-Menu-Link AspNet-Menu-ParentSelected" title="B1">
           B1
          </a>
         </li>
         <li class="AspNet-Menu-Leaf">
          <a href="/CssAdaptersTutorial1/secure/B2.aspx" class="AspNet-Menu-Link AspNet-Menu-ParentSelected" title="B2">
           B2
          </a>
         </li>
         <li class="AspNet-Menu-Leaf">
          <a href="/CssAdaptersTutorial1/secure/import.aspx" class="AspNet-Menu-Link AspNet-Menu-ParentSelected" title="B3">
           B3
          </a>
         </li>
        </ul>
       </li>
       <li class="AspNet-Menu-Leaf">
        <a href="/CssAdaptersTutorial1/secure/myaccount.aspx" class="AspNet-Menu-Link" title="My Account">
         My Account
        </a>
       </li>
       <li class="AspNet-Menu-Leaf">
        <a href="/CssAdaptersTutorial1/community.aspx" class="AspNet-Menu-Link" title="Community">
         Community
        </a>
       </li>
      </ul>

    </div>

     

    Thursday, December 7, 2006 12:40 PM
  • User917612778 posted

    your html output actually is pretty close to what i need to get. But your example is only for the top level right? it doesnt' delve into the submenu yet and I think that's where it's going to get messy.  I am currently tyring to customize the control to see if we can do it that way, I'll try and see if I can figureo ut how to do all this over the weekend.

    Thursday, December 7, 2006 5:52 PM
  • User-1329334484 posted

    What do you mean by "Example is for top level"? It has total 2 levels, there is UL within UL... I guess you could add more levels... It is based on Site.Map. The only problem I have is that that second level does not show up... The class is setup correctly, so it must be something with CSS...

    I hope Russ can help...

    Thursday, December 7, 2006 6:09 PM
  • User-534056067 posted
    OK, I've built myself a local test and dev environment and I'm starting to mess around with the css and such.  Give me a little while (24 hours) and I'll post my progress again here.
    Thursday, December 7, 2006 7:17 PM
  • User-1329334484 posted

    Oh, great! You are a great resource on this one! All the files are in this forum: CSS and ASPX.

    Posting here again just to make sure you have it. Too bad I can not attach the files to the post...

    RFMenu.aspx (placed in Walkthru directory of CSSAdaptersTutorial website):

    <%@ Page Language="C#" %>

    <script runat="server">

    void OnClick(Object sender, MenuEventArgs e)

    {

    MessageLabel.Text = "You selected " + e.Item.Text + ".";

    e.Item.Selected = true;

    }

    </script>

    <!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 runat="server">

    <%-- <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />

    --%> <link runat="server" rel="stylesheet" href="~/CSS/Menu.css" type="text/css" id="AdaptersInvariantImportCSS" />

    <%--<!--[if lt IE 7]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />

    <![endif]-->

    <!--[if gt IE 6]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu7.css" type="text/css" id="IEMenu7CSS" />

    <![endif]--> --%>

    </head>

    <body>

    <form id="form1" runat="server">

    <asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" StaticDisplayLevels=2>

    <Items>

    <asp:MenuItem Text="Music">

    <asp:MenuItem Text="Classical" />

    <asp:MenuItem Text="Rock">

    </asp:MenuItem>

    <asp:MenuItem Text="Jazz" />

    </asp:MenuItem>

    <asp:MenuItem Text="Movies" Selectable="false">

    <asp:MenuItem Text="Action" />

    <asp:MenuItem Text="Drama" />

    <asp:MenuItem Text="Musical" />

    </asp:MenuItem>

    </Items>

    </asp:Menu>

     

    <div id="EntertainmentMessage">

    <asp:Label id="MessageLabel" runat="server" />

    </div>

    </form>

    </body>

    </html>

     

    RFFMenu.aspx.cs

    using System;

    using System.Data;

    using System.Configuration;

    using System.Collections;

    using System.Web;

    using System.Web.Security;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Web.UI.WebControls.WebParts;

    using System.Web.UI.HtmlControls;

    public partial class WalkThru_RFmenu : System.Web.UI.Page

    {

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void OnProductsMenuItemDataBound(object sender, MenuEventArgs e)

    {

    if (e.Item != null)

    {

    if (Request.Url.PathAndQuery == e.Item.NavigateUrl)

    {

    e.Item.Selected = true;

    }

    }

    }

     

    }

     

    CSS/Menu.css:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/lefta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif) ;

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/righta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(menu/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(menu/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    /*

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul{

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    */

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    /*

    ul.AspNet-Menu :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    */

    /* hover over the main menu, sets properties of a link in the second line of menu */

    /*

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    */

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    /*

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

    */

     

    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

     

    }

     

     

    Thursday, December 7, 2006 8:13 PM
  • User-534056067 posted
    Have you been looking at this post, http://forums.asp.net/thread/1490323.aspx, too?  I wonder if it is a quick way for you to get what you need.  I have not followed that one yet to its conclusion but it looks relevant.
    Thursday, December 7, 2006 8:47 PM
  • User-1329334484 posted

    Thanks for the link, I really feel we are very close with the solution. Your recommendation makes sense. It is just something in the CSS,I think that last part. I am not very strong in CSS, I have a feeling there is something wrong with the definition of the section. In HTML it is :

      <ul class="AspNet-Menu">
       <li class="AspNet-Menu-Leaf">
        <a href="/CssAdaptersTutorial1/WalkThru/RFMenu.aspx?test=1" class="AspNet-Menu-Link" title="A">
         A
        </a>
       </li>
       <li class="AspNet-Menu-WithChildren">
        <a href="/CssAdaptersTutorial1/WalkThru/RFMenu.aspx" class="AspNet-Menu-Link AspNet-Menu-Selected" title="B">
         B
        </a>
        <ul>
         <li class="AspNet-Menu-Leaf">
          <a href="/CssAdaptersTutorial1/secure/B1.aspx" class="AspNet-Menu-Link AspNet-Menu-ParentSelected" title="B1">
           B1
          </a>
         </li>
         <li class="AspNet-Menu-Leaf">
          <a href="/CssAdaptersTutorial1/secure/B2.aspx" class="AspNet-Menu-Link AspNet-Menu-ParentSelected" title="B2">
           B2
          </a>
         </li>

    ...

    IN CSS there is:

    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

     

    }

    Is this the correct syntax? (.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected). I wonder maybe this part is incorrect...

    Thursday, December 7, 2006 10:39 PM
  • User-1329334484 posted

    I think maybe that CSS syntax is wrong, because we do not want to specify properties for <a> element, but for the parent <ul> element, which has <li> and <a> with the class .AspNet-Menu-ParentSelected

    So we need to set property for that parent UL element? Do I think correct? As I said, I am not strong in CSS...

    Thursday, December 7, 2006 10:48 PM
  • User-534056067 posted

    I can report having made some progress.  The remind readers, the goal is to create a two tier menu system where both tiers show all the time but the second tier always corresponds to the current page.  The following code can be run from the walkthru folder of a C# version of the kit.  Simply place the ASPX and CSS file (shown below) in that folder and run the page in a browser through VS.  Note that the menu posts back.  If you have a menu that does simply HTTP GET navigation then you need to set the selected node in your menu item binding event as I noted earlier in this thread (and I gave code for that).

    This sample does have a problem insofar as the second tier for the Movies top menu item is offset too far to the right.  I can try to solve that.  Meanwhile, though, I wanted to show what progress I have made thus far.  Bear in mind, this required no changes to the menu adapter at all.  It is done entirely with CSS.  I recommend that you "diff" the CSS here with what you find in the kit's walkthru\simplemenu.css.  You'll be able to easily spot what I did that way.

    *** TwoTierMenu.aspx ***

    <%@ Page Language="C#" %>

    <script runat="server">
        void OnClick(Object sender, MenuEventArgs e)
        {
            MessageLabel.Text = "You selected " + e.Item.Text + ".";
            e.Item.Selected = true;
        }
    </script>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <link rel="stylesheet" href="TwoTierMenu.css" type="text/css" />
        <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
    <!--[if lt IE 7]>
        <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />
    <![endif]-->
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">
                <Items>
                    <asp:MenuItem Text="Music" Selected="true">
                        <asp:MenuItem Text="Classical" />
                        <asp:MenuItem Text="Rock">
                            <asp:MenuItem Text="Electric" />
                            <asp:MenuItem Text="Acoustical" />
                        </asp:MenuItem>
                        <asp:MenuItem Text="Jazz" />
                    </asp:MenuItem>
                    <asp:MenuItem Text="Movies">
                        <asp:MenuItem Text="Action" />
                        <asp:MenuItem Text="Drama" />
                        <asp:MenuItem Text="Musical" />
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
           
            <div id="EntertainmentMessage">
                <asp:Label id="MessageLabel" runat="server" />
            </div>
        </form>
    </body>
    </html>
     

    *** TwoTierMenu.css ***

    .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
    {
        width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
    }

    .SimpleEntertainmentMenu ul.AspNet-Menu li
    {
    }

    .SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
    {
        width: 30em;
        top: 100%;
        left: 0;
    }

    .SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
    {
        width: 6em;
        top: 100%;
        left: 0;
    }

    .SimpleEntertainmentMenu li /* all list items */
    {
        width: 6em;
        background: #eeeeee;
    }

    .SimpleEntertainmentMenu li:hover, /* list items being hovered over */
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover
    {
        background: Black;
    }

    .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
    .SimpleEntertainmentMenu span
    {
        color: Black;
        padding: 4px 2px 4px 8px;
        border:1px solid #cccccc;
    }

    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
    {
        background-image: none !important;
    }

    .SimpleEntertainmentMenu li:hover a, /* hovered text */
    .SimpleEntertainmentMenu li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
    {
        color: White;
    }

    .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
    .SimpleEntertainmentMenu li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
    .SimpleEntertainmentMenu li:hover li:hover li a,
    .SimpleEntertainmentMenu li:hover li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
    {
        color: Black;
    }


    .SimpleEntertainmentMenu li.AspNet-Menu-Selected,
    .SimpleEntertainmentMenu li.AspNet-Menu-ChildSelected,
    .SimpleEntertainmentMenu li.AspNet-Menu-ChildSelected li,
    .SimpleEntertainmentMenu li li.AspNet-Menu-ParentSelected
    {
        background: #cccccc;
    }

    .SimpleEntertainmentMenu li.AspNet-Menu-ChildSelected,
    .SimpleEntertainmentMenu li.AspNet-Menu-ChildSelected li,
    .SimpleEntertainmentMenu li li.AspNet-Menu-ParentSelected
    {
        display: block !important;
        visibility: visible !important;
    }

    .SimpleEntertainmentMenu li li li.AspNet-Menu-ParentSelected,
    .SimpleEntertainmentMenu li.AspNet-Menu-ChildSelected li li
    {
        display: inherit !important;
        visibility: inherit !important;
    }

    .SimpleEntertainmentMenu ul.AspNet-Menu li:hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul
    {
        visibility: hidden;
    }

    .SimpleEntertainmentMenu ul.AspNet-Menu li li:hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li li:hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    .SimpleEntertainmentMenu ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible;
    }

    #EntertainmentMessage
    {
        padding-top: 2em;
        clear: both;
    }

    Friday, December 8, 2006 7:50 PM
  • User917612778 posted

    hey rfurdzik,

    I figured out a way to do it.  My recommendation is to ditch the CSS Friendly and just go with creating your own custom control.  I did that and I got it to work with the CSS format our designer created.  If you need help on how to do this, I'll walk you through it so that you can get yours working as well.

     

    Friday, December 8, 2006 8:03 PM
  • User-534056067 posted
    If you decide to stick with the adapters, please try out the nearly complete sample solution I posted just above. Even if you ditch the adapters, I'd appreciate whatever feedback you can give me on that sample.  Is it close to what you were looking for?  Ignore the problem with the second tier of the Movies being too far to the right.  I think I know how that could be fixed but I need more time to develop that.
    Saturday, December 9, 2006 9:00 AM
  • User-1329334484 posted

    Russ, I have tried. It does not work. I git just first level menu and it is vertical... No second tier..

    Did you look at my CSS? The last part, is it correct?

    Saturday, December 9, 2006 10:51 PM
  • User-1329334484 posted

    OK, I have created new CSS Tutorial project and paste your code, but it still does not work. No second tier is visible... Wonder if you could help me with mu CSS... I think this part is not referencing <ul> element correctly, because <a> has the class AspNet-Menu-ParentSelected

    SimpleEntertainmentMenu.AspNet-Menu-ParentSelected

    {

     

    border: solid 1px #0000ff !important;

     

    display:block !important;

     

    visibility:visible !important;

    }

    Saturday, December 9, 2006 11:07 PM
  • User-1329334484 posted

    I think the problem is that the <a> element has a class called "AspNet-Menu-ParentSelected". We make visibility:visible for <a> element, but <ul> element, which proceeds this <a> element is not visible. I think that is the problem. How do we make that <ul> element visible???

    .AspNet-Menu .AspNet-Menu-ParentSelected

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

     

    }

    Sunday, December 10, 2006 12:37 AM
  • User-1329334484 posted

    Actually <UL> element is before <a> element... How do we refer that <UL> element, which has child <a> element with a class AspNet-Menu-ParentSelected". ?

    Sunday, December 10, 2006 12:39 AM
  • User-1329334484 posted
    I honestly think this is a bag in CSS adapters, beause it tags <a> element of the menu as  AspNet-Menu-ParentSelected, instead of parent's <ul> element. Now there is no way to say "Make <ul> element visibility:visible, whose child is <a> with class AspNet-parentSelected"...
    Sunday, December 10, 2006 12:47 AM
  • User-1329334484 posted
    Russ, I have downloaded the new version of CSS adapters and your example works! Wow! Still, if you could fix that problem with the second menu moved to the right would be great!
    Sunday, December 10, 2006 12:54 AM
  • User-1329334484 posted
    Also I wanted the second level to be just links, not the blosck like the first menu, I guess that should be easy with CSS..
    Sunday, December 10, 2006 12:56 AM
  • User-1329334484 posted

    And guys guess what, now after the tag classes has been fixed in this new release, my code workswll too. GREAT!!!

    This is the change I needed to do:

    ul.AspNet-Menu li.AspNet-Menu-Selected ul

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

     

    }

    Posting the whole code again, for you to try:

    Menu.CSS (in /CSS folder)

    ---------------------------------------------

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    background:#b7c6ac;

    border-top:10px solid #b7c6ac;

    padding-bottom:1px;

    background:#b7c6ac url(menu/line.gif) bottom left repeat-x;

    margin-bottom:5em;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

    .AspNet-Menu a em.lft, .AspNet-Menu :visited em.lft {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/lefta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    background: transparent url(menu/mida.gif) ;

    cursor:pointer;

    border-bottom:1px solid #777;

    }

    .AspNet-Menu a em.rgt, .AspNet-Menu :visited em.rgt {

    display:block;

    float:left;

    width:5px;

    height:2em;

    background: transparent url(menu/righta.gif);

    border-bottom:1px solid #777;

    }

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background:#ccc;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu li:hover > a em.lft {

    background: transparent url(menu/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu li:hover > a em.rgt {

    background: transparent url(menu/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    /*

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul{

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    */

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    /*

    ul.AspNet-Menu :hover ul li {

    display:block;

    border-left:1px solid #777;

    background:#ccc;

    height:2em;

    }

    */

    /* hover over the main menu, sets properties of a link in the second line of menu */

    /*

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    */

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    /*

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

    */

    /*

    SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a

    Some element assigned a class name of: SimpleEntertainmentMenu

    That contains a ul element assigned a class name of: AspNet-Menu

    that contains a li element assigned a class name of: AspNet-Menu-Leaf

    that contains an anchor

    */

    ul.AspNet-Menu li.AspNet-Menu-Selected ul

    {

    border: solid 1px #0000ff !important;

    display:block !important;

    visibility:visible !important;

     

    }

    ----------------------------------------------

    Rfmenu.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RFmenu.aspx.cs" Inherits="WalkThru_RFmenu" %>

     

    <script runat="server">

    void OnClick(Object sender, MenuEventArgs e)

    {

    MessageLabel.Text = "You selected " + e.Item.Text + ".";

    e.Item.Selected = true;

    }

    </script>

    <!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 id="Head1" runat="server">

    <%-- <link rel="stylesheet" href="SimpleMenu.css" type="text/css" />

    --%> <link runat="server" rel="stylesheet" href="~/CSS/Menu.css" type="text/css" id="AdaptersInvariantImportCSS" />

    <%--<!--[if lt IE 7]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />

    <![endif]-->

    <!--[if gt IE 6]>

    <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu7.css" type="text/css" id="IEMenu7CSS" />

    <![endif]--> --%>

    </head>

    <body>

    <form id="form1" runat="server">

     

    <asp:SiteMapDataSource id="SiteMap" Runat="Server"

    ShowStartingNode="False"/>

     

    <asp:Menu ID="EntertainmentMenu" runat="server" DataSourceID="SiteMap" Orientation="Horizontal" onmenuitemclick="OnClick" StaticDisplayLevels=2 OnMenuItemDataBound="OnProductsMenuItemDataBound">

    <%-- <Items>

    <asp:MenuItem Text="Music">

    <asp:MenuItem Text="Classical" />

    <asp:MenuItem Text="Rock">

    </asp:MenuItem>

    <asp:MenuItem Text="Jazz" />

    </asp:MenuItem>

    <asp:MenuItem Text="Movies" Selectable="false">

    <asp:MenuItem Text="Action" />

    <asp:MenuItem Text="Drama" />

    <asp:MenuItem Text="Musical" />

    </asp:MenuItem>

    </Items>--%>

    </asp:Menu>

     

    <div id="EntertainmentMessage">

    <asp:Label id="MessageLabel" runat="server" />

    </div>

    </form>

    </body>

    </html>

    ------------------------------------------------------------

    RfMenu.aspx.cs

    using System;

    using System.Data;

    using System.Configuration;

    using System.Collections;

    using System.Web;

    using System.Web.Security;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Web.UI.WebControls.WebParts;

    using System.Web.UI.HtmlControls;

    public partial class WalkThru_RFmenu : System.Web.UI.Page

    {

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void OnProductsMenuItemDataBound(object sender, MenuEventArgs e)

    {

    if (e.Item != null)

    {

    if (Request.Url.PathAndQuery == e.Item.NavigateUrl)

    {

    e.Item.Selected = true;

    }

    }

    }

     

    }

    Sunday, December 10, 2006 1:06 AM
  • User-1329334484 posted

    Ok, so I got the menu working, however now I would like to add border below the selected tab on the first tier, also how do I make space between tabs in the first tier, so it actually looks like tabs? Here is my updated CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    /*background:#b7c6ac;*/

    /*border-top:10px solid #b7c6ac;*/

    margin-top:1em;

    padding-bottom:1px;

    /*background:#b7c6ac url(menu/line.gif) bottom left repeat-x;*/

    margin-bottom:5em;

    text-align: center;

    font-size: 13px;

    font-weight:bold;

    font-style: normal;

    font-family: sans-serif;

     

    color: White;

    border-bottom:1px solid #777;

    background-color:#154B8C;

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

     

     

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    /*background: transparent url(menu/mida.gif) ; */

    cursor:pointer;

    /*border-bottom:1px solid #777;*/

    }

     

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background: #d6deec;/*#E6E6E6 ;#ccc;*/

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

     

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul{

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    ul.AspNet-Menu :hover ul li {

    display:block;

    border-left:1px solid #777;

    border-right:1px solid #777;

    /*background:#ccc;*/

    height:2em;

    }

    /* hover over the main menu, sets properties of a link in the second line of menu */

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

     

    /*

    SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a

    Some element assigned a class name of: SimpleEntertainmentMenu

    That contains a ul element assigned a class name of: AspNet-Menu

    that contains a li element assigned a class name of: AspNet-Menu-Leaf

    that contains an anchor

    */

    ul.AspNet-Menu li.AspNet-Menu-Selected ul

    {

    /*border: solid 1px #0000ff !important; */

    display:block !important;

    visibility:visible !important;

    top: 2em;

    margin-top : 1px;

     

    /*border-left:1px solid #777 !important;

    background:#ccc !important;

    height:2em !important;

    top: 2em !important;

    margin-top: 1px !important;

    */

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected

    {

    text-align: center;

    font-size: 13px;

    font-weight: bold;

     

    background-color: #1D64BF; /*#d6deec; #1D64BF;*/

     

     

     

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected a

    {

    color:white; /* #White; */

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li {

    display:block;

    /*border-left:1px solid #777;*/

    /*background:#ccc;*/

    height:2em;

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    Monday, December 11, 2006 12:57 PM
  • User-1329334484 posted

    I guess in order to have it looked like tabs, I would need to add some class to the <a> element. I am not sure what I need to change in the adapter code. But this is the CSS I think I may need:


    .menu a:hover b {
    color:#000;
    background: transparent url(drop/midb.gif);
    border-bottom-color:#ccc;
    }
    .menu a:hover em.lft {
    background: transparent url(drop/leftb.gif);
    border-bottom-color:#ccc;
    }
    .menu a:hover em.rgt {
    background: transparent url(drop/rightb.gif);
    border-bottom-color:#ccc;
    }

    Monday, December 11, 2006 1:46 PM
  • User-288480790 posted

    Sorry, I haven't really analyzed the code that closely. My point in posting it was to illustrate that perhaps the menu control isn't the best way for you to go. If there is an all-CSS or all-CSS/js solution that fits your need, then all that remains is to make it dynamic.  After all, the menu control (and the adapter) really doesn't do ANYTHING much except "protect" you from the implementation.

    Simply put, and with all due respect to Russ and his fine efforts to close the gap between how MS sees things and how the purists do: If your solution reaches too far outside the MS-enforced parameters, as a complicated solution like yours does, perhaps the answer is to not use the control. 

    The all-CSS/js solution I linked could probably be teaked to handle your situation in a fraction of the effort you've expended here.  In trying to use the menu control, whose primary purpose is to abstract the dirty details, you've found yourself deep into the details anyway.

     

    Just my $.02

     

     

    Thursday, December 14, 2006 12:22 PM
  • User-1329334484 posted

    Robert,

    Thanks, I think yo have some point here. However all needs to be done here is the change of CSS file, that was the intention of the developers of CSS Adapters I think. I got this working, the reason I had problems was that I was using the old version of adapters (beta), it had problem. It did not generate classe names in final HTML... It all works now. You can use the CSS I have posted here and see that it works.

    What I like about this solution is that now it will work with sitemap and it will dymaicly change while I change XML file. I can give the CSS to the designer later and he/she can tweak it... I think the CSS adapters seemed complex at first, but it is not that much. There was no point in my view to look at another solution and start from 0, while 98% was done already. Now I got 100% working. And all I need is to place menu control on the form...

    I also have additional question here for Russ:

    How can I make only two levels to show? I do not want anymore levels to show...

    Thursday, December 14, 2006 12:34 PM
  • User-534056067 posted
    Set the MaximumDynamicDisplayLevels="1" in your <asp:Menu>. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.maximumdynamicdisplaylevels.aspx
    Thursday, December 14, 2006 1:57 PM
  • User-1329334484 posted

    THanks, I have few more:

    1) How do I make the widths of the first tier and second to be the same?

    2) If the Child (on second tier) is selected, hover over the first tier does not show the second tier menu for other main menu elements. Seems like that rule overwriteshover rule... How do I make other submenus to apear in that case?

    3) How to make spac between buttons on the first menu?

    4) How do I make a bar under the first menu for the selected item? So it looks like tabs...

    Here is the updated Menu.CSS, menu.aspx stays the same:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    /*background:#b7c6ac;*/

    /*border-top:10px solid #b7c6ac;*/

    margin-top:1em;

    padding-bottom:1px;

    /*background:#b7c6ac url(menu/line.gif) bottom left repeat-x;*/

    margin-bottom:5em;

    text-align: center;

    font-size: 13px;

    font-weight:bold;

    font-style: normal;

    font-family: "Cursive";

     

    color: White;

    border-bottom:1px solid #777;

    background-color:#154B8C;

    position:relative;

     

     

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

     

     

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    /*background: transparent url(menu/mida.gif) ; */

    cursor:pointer;

    /*border-bottom:1px solid #777;*/

    }

     

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background: #d6deec;/*#E6E6E6 ;#ccc;*/

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

     

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul

    {

    display: block;

    visibility: visible;

    top: 2em;

    margin-top: 1px;

    }

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    ul.AspNet-Menu :hover ul li{

    display:block;

    border-left:1px solid #777;

    border-right:1px solid #777;

    /*background:#ccc;*/

    height:2em;

    }

    /* hover over the main menu, sets properties of a link in the second line of menu */

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

     

    /*

    SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a

    Some element assigned a class name of: SimpleEntertainmentMenu

    That contains a ul element assigned a class name of: AspNet-Menu

    that contains a li element assigned a class name of: AspNet-Menu-Leaf

    that contains an anchor

    */

    ul.AspNet-Menu li.AspNet-Menu-Selected ul, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul

    {

    /*border: solid 1px #0000ff !important; */

    display:block !important;

    visibility:visible !important;

    top: 2em;

    margin-top : 1px;

     

    /*border-left:1px solid #777 !important;

    background:#ccc !important;

    height:2em !important;

    top: 2em !important;

    margin-top: 1px !important;

    */

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected, ul.AspNet-Menu li.AspNet-Menu-ChildSelected

    {

    text-align: center;

    font-size: 13px;

    font-weight: bold;

     

    background-color: #1D64BF; /*#d6deec; #1D64BF;*/

     

     

     

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected a, ul.AspNet-Menu li.AspNet-Menu-ChildSelected a

    {

    color:white; /* #White; */

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li

    {

    display:block;

    /*border-left:1px solid #777;*/

    /*background:#ccc;*/

    height:2em;

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li a, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li a

    {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    /*

    .AspNet-Menu

    {

    border-top: solid 1px #E7E7E7; border-right: solid 1px #D2D2D2; border-bottom: solid 1px #D2D2D2; border-left: solid 1px #E7E7E7; padding: 0px 1px 0px 0px;

     

    text-align: center;

    font-size: 13px;

    font-weight: bold;

    background-color: #154B8C;

    color: White;

    }

    */

     

    Saturday, December 16, 2006 1:21 AM
  • User-1329334484 posted

    So now the main problem is as follows:

    1) The second tier is displayd fine

    2) When The second menu item is selected in the first tier and I hover over the first item in the first tier, the second tier does not show. I have put "!important", but it did not change anything. When hover over the third item in the first tier, the second tier shows fine.

    Any idea? Here is updated CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    /*background:#b7c6ac;*/

    /*border-top:10px solid #b7c6ac;*/

    margin-top:1em;

    padding-bottom:1px;

    /*background:#b7c6ac url(menu/line.gif) bottom left repeat-x;*/

    margin-bottom:5em;

    text-align: center;

    font-size: 13px;

    font-weight:bold;

    font-style: normal;

    font-family: "Cursive";

     

    color: White;

    border-bottom:1px solid #777;

    position:relative;

    background-color: #154B8C; /*#1D64BF; /*#d6deec; #1D64BF;*/

     

     

    }

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

     

     

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    /*background: transparent url(menu/mida.gif) ; */

    cursor:pointer;

    /*border-bottom:1px solid #777;*/

    /*background-color:#154B8C;*/

    background: transparent url(menu/midb.gif);

     

    }

     

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background: #d6deec;/*#E6E6E6 ;#ccc;*/

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul

    {

    /*border: solid 1px #0000ff !important; */

    display:block ;

    visibility:visible;

    top: 2em;

    margin-top : 1px;

     

    /*border-left:1px solid #777 !important;

    background:#ccc !important;

    height:2em !important;

    top: 2em !important;

    margin-top: 1px !important;

    */

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected, ul.AspNet-Menu li.AspNet-Menu-ChildSelected

    {

    text-align: center;

    font-size: 13px;

    font-weight: bold;

     

    background-color: #1D64BF; /*#d6deec; #1D64BF;*/

     

     

     

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected > a, ul.AspNet-Menu li.AspNet-Menu-ChildSelected > a

    {

    color:white; /* #White; */

    background-color: #1D64BF; /*#d6deec; #1D64BF;*/

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li

    {

    display:block;

    /*border-left:1px solid #777;*/

    /*background:#ccc;*/

    height:2em;

    border-left:1px solid #777;

    /*border-right:1px solid #777; */

    }

    ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li.AspNet-Menu-Selected

    {

    border-left:1px solid #black;

    border-right:1px solid #black;

    border-top:1px solid #black;

    border-bottom:1px solid #black;

    background: #D9D6EC ;/*#487EBF; /*#E4D6EC; /*#D9D6EC /*transparent url(menu/midb.gif); */

    }

    ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li.AspNet-Menu-Selected a

    {

    background: transparent url(menu/midb.gif);

    font-weight:bold;

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li a, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li a

    {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal !important;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    /*

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    */

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

    ul.AspNet-Menu li:hover

    {

    color:#000;

    background: transparent url(menu/midb.gif);

    border-bottom-color:#000;

    }

     

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul

    {

    display: block !important;

    visibility: visible !important;

    top: 2em !important;

    margin-top: 1px !important;

    }

    /* hover over the main menu, sets properties of a each item in the second line of menu */

    ul.AspNet-Menu :hover ul li{

    display:block !important;

    border-left:1px solid #777 !important;

    border-right:1px solid #777 !important;

    /*background:#ccc;*/

    height:2em !important;

    }

    /* hover over the main menu, sets properties of a link in the second line of menu */

    ul.AspNet-Menu :hover ul li a {

    display:block !important;

    font-size:0.8em !important;

    height:2em !important;

    line-height:2.5em !important;

    width:auto !important;

    float:left !important;

    color:black !important;

    padding:0 10px !important;}

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

     

    /*

    SimpleEntertainmentMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a

    Some element assigned a class name of: SimpleEntertainmentMenu

    That contains a ul element assigned a class name of: AspNet-Menu

    that contains a li element assigned a class name of: AspNet-Menu-Leaf

    that contains an anchor

    */

     

     

     

    /*

    .AspNet-Menu

    {

    border-top: solid 1px #E7E7E7; border-right: solid 1px #D2D2D2; border-bottom: solid 1px #D2D2D2; border-left: solid 1px #E7E7E7; padding: 0px 1px 0px 0px;

     

    text-align: center;

    font-size: 13px;

    font-weight: bold;

    background-color: #154B8C;

    color: White;

    }

    */

    Saturday, December 16, 2006 3:08 PM
  • User-1329334484 posted

    I also would like to change the look of menu little bit. I would like to:

    1) Have first row to show tabs (similar to the web configuration utility, with nice blue, no bar anymore)

    2) Have second row to show just plain links with underscore

    What changes do I need to make to my CSS?

     

    Saturday, December 16, 2006 9:22 PM
  • User-1329334484 posted

    I have customized the CSS menu control.This is the way my menu looks now:

    This is what I would like the menu to look like:

    Here is the working version: http://menu.dnndirect.com/

    Can somebody help me customize my CSS to achieve that look? Also I want the second bar always visible. I think that is something in CSS as well...

     Here is my current CSS:

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */

    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */

    /* See WhitePaper.aspx for details. */

    .AspNet-Menu

    {

    position: relative;

    width:750px;

    height:2em;

    /*background:#b7c6ac;*/

    /*border-top:10px solid #b7c6ac;*/

    margin-top:1em;

    padding-bottom:1px;

    /*background:#b7c6ac url(menu/line.gif) bottom left repeat-x;*/

    margin-bottom:3em;

    text-align: center;

    font-size: 13px;

    font-weight:bold;

    font-style: normal;font-family: "Cursive";

     

    color: White;

    border-bottom:1px solid #777;

    position:relative;

    background-color: #154B8C; /*#1D64BF; /*#d6deec; #1D64BF;*/

     

     

    }

     

    /* when hover over the menu cell in the first line of menu, sets properties of menu cell*/

     

     

    ul.AspNet-Menu > li:hover, ul.AspNet-Menu > li > a:hover

    {

    color:#000;

    background: #487EBF; /*transparent url(menu/midb.gif); */

    border-bottom-color:#000;

    }

     

    /* controls how the second line of menu is displayed once hover over menu item in the first line of menu */

    ul.AspNet-Menu li:hover ul,

    ul.AspNet-Menu a:hover ul

    {

    display: block !important;

    visibility: visible !important;

    top: 2em !important;

    margin-top: 1px !important;

    }

    ul.AspNet-Menu :hover ul li{

    display:block !important;

    border-left:1px solid #777 !important;

    border-right:1px solid #777 !important;

    /*background:#ccc;*/

    height:2em !important;

    }

    /* hover over the main menu, sets properties of a link in the second line of menu */

    ul.AspNet-Menu :hover ul li a {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;}

    /* hover over the main menu and hover over the link in the second line of menu, sets color of link */

    ul.AspNet-Menu :hover ul li a:hover {

    color:red;

    }

     

    * html .AspNet-Menu {padding-bottom:0;}

    .AspNet-Menu ul{

    list-style-type:none;

    padding:0;

    margin:0 0 0 20px;

    width:730px;

    height:100%;

    }

    .AspNet-Menu li{

    float:left;

    }

    .AspNet-Menu table{

    position:absolute;

    border-collapse:collapse;

    left:0;

    top:0;

    }

     

    /* properties of the text in the cell of the first line of the menu */

    ul.AspNet-Menu li a, ul.AspNet-Menu li span, .AspNet-Menu :visited {

    color:#fff;

    text-decoration:none;

    }

     

     

    ul.AspNet-Menu li, .AspNet-Menu :visited {

    display:block;

    font-weight:normal;

    float:left;

    padding:0 10px;

    height:2em;line-height:1.9em;

    /*background: transparent url(menu/mida.gif) ; */

    cursor:pointer;

    /*border-bottom:1px solid #777;*/

    /*background-color:#154B8C;*/

    background: transparent url(menu/midb.gif);

     

    }

     

    ul.AspNet-Menu ul

    {

    visibility:hidden;

    position:absolute;

    height:2em;

    top:2em;

    left:-20px;

    width:749px;

    border-bottom:1px solid #777;

    border-right:1px solid #777;

    background: #d6deec;/*#E6E6E6 ;#ccc;*/

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul

    {

    /*border: solid 1px #0000ff !important; */

    display:block ;

    visibility:visible;

    top: 2em;

    margin-top : 1px;

     

    /*border-left:1px solid #777 !important;

    background:#ccc !important;

    height:2em !important;

    top: 2em !important;

    margin-top: 1px !important;

    */

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected, ul.AspNet-Menu li.AspNet-Menu-ChildSelected

    {

    text-align: center;

    font-size: 13px;

    font-weight: bold;

     

    background-color: #1D64BF; /*#d6deec; #1D64BF;*/

     

     

     

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected > a, ul.AspNet-Menu li.AspNet-Menu-ChildSelected > a

    {

    color:white; /* #White; */

    background-color: #1D64BF; /*#d6deec; #1D64BF;*/

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li

    {

    display:block;

    /*border-left:1px solid #777;*/

    /*background:#ccc;*/

    height:2em;

    border-left:1px solid #777;

    /*border-right:1px solid #777; */

    }

    ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li.AspNet-Menu-Selected

    {

    border-left:1px solid #black;

    border-right:1px solid #black;

    border-top:1px solid #black;

    border-bottom:1px solid #black;

    background: #D9D6EC ;/*#487EBF; /*#E4D6EC; /*#D9D6EC /*transparent url(menu/midb.gif); */

    }

    ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li.AspNet-Menu-Selected a

    {

    background: transparent url(menu/midb.gif);

    font-weight:bold;

    }

    ul.AspNet-Menu li.AspNet-Menu-Selected ul li a, ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul li a

    {

    display:block;

    font-size:0.8em;

    height:2em;

    line-height:2.5em;

    width:auto;

    float:left;

    color:black;

    padding:0 10px;

    }

     

     

    .AspNet-Menu :hover {

    white-space:normal !important;

    }

    /* when hover over the text in the first line of menu, sets properties of menu item text*/

    /*TO DO embed em.lft and em.rgt tags in the adapter code, wrap each top level tag in it... */

    /*

    ul.AspNet-Menu a:hover, ul.AspNet-Menu span:hover{

    color:red;

    background: transparent url(drop/midb.gif);

    border-bottom-color:#000;

    }

    .AspNet-Menu a:hover em.lft {

    background: transparent url(drop/leftb.gif);

    border-bottom-color:#ccc;

    }

    .AspNet-Menu a:hover em.rgt {

    background: transparent url(drop/rightb.gif);

    border-bottom-color:#ccc;

    }

    */

     

    /*

    .AspNet-Menu

    {

    border-top: solid 1px #E7E7E7; border-right: solid 1px #D2D2D2; border-bottom: solid 1px #D2D2D2; border-left: solid 1px #E7E7E7; padding: 0px 1px 0px 0px;

     

    text-align: center;

    font-size: 13px;

    font-weight: bold;

    background-color: #154B8C;

    color: White;

    }

    */

     

    Saturday, July 14, 2007 8:35 PM
  • User-1329334484 posted

     

    I think we got very close to the target menu. take a look: http://newmenu.dnndirect.com/sell.aspx -

    All done using CSS Adapters using standard ASP.NET menu control!  If you look at the source you will see it is a list!

     

    Saturday, July 21, 2007 2:09 AM
  • User-1329334484 posted

    Saturday, July 21, 2007 2:14 AM
  • User-2051459559 posted

    Did you have any success with this? I'm struggling with the same problem. I can create the 2-level menu OK, but the top level loses its selection as soon as the user clicks on a sub-menu. One get-around is to use a MultiView panel, so that each sub-page is actually just a part of the selected page, but that won't do it for me as I want to track page-viewing stats.

    Wednesday, August 15, 2007 5:36 AM
  • User-2051459559 posted

    I don't know if you're still struggling with this, but I recently came across this post, which has solved the problem for me.

    Thursday, August 16, 2007 6:15 AM
  • User1694267286 posted

    Hey rfurdzik

    I was looking for exactly this through CSSAdapters and fortunate to have his this post.

    Do you have the latest CSS of the code that you have for the 2 tier menu? I just got the post got ended abrubtly or may be with long code posted, I miss the recent one?

    Pl post the recent one

    Monday, April 28, 2008 3:47 AM
  • User-1329334484 posted

    I have developed the code and have it on my site http://www.zikbay.com. It is pure CSS ASP.NET menu with asp menu control.... I use it for commercial application but we could discuss if you are interested to use it. It reads web.sitemap file... Please contact me.

    Wednesday, July 23, 2008 10:16 PM
  • User376241057 posted

    This is what I am looking for, can you provide the sample code? Thanks in Advance

    Wednesday, August 6, 2008 2:01 PM