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>