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

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)

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,

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

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

Yes, but can the adapter code be changed?

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?

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

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

Rafal

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

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

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?

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 {
position:relative;
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{
position:absolute;
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;
position:absolute;
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.

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>

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:

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

Here is the updated CSS:

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

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