Full-width dropdown showing ALL submenu's - Can it be done?

[CodeALot]

Hi guys,

Using Show_Menu2 I would like to have a drop-down menu (or "panel") that shows if you hover the main level items, and in that panel I want to show ALL the submenu's.
 
I have the dropdown menu, but that only shows the submenu of the pages below the main level item that I'm hovering. Now I want a div that's 100% width that shows every submenu in the menu.
 
Is that even possible using show_menu2?

Example of what I want (NOT my site, not even a WebsiteBaker site but the menu does what I want)
http://www.hsb-bouw.nl/

[nibz]

Hi CodeALot,

If you have a CSS + JS (or CSS only) script i can have a look.
Because this isn't a issue of show_menu2 not being able to do this.

[CodeALot]

That's a little difficult since the website is not live yet and only lives in my local webserver , but here's the menu in my template:

Code: [Select]

<div id="navContainer" style="z-index:999;">
<div id="nav" class="clearfix">
<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?><br />
</div><!-- end nav -->
</div><!-- end navContainer -->

and this is the CSS that goes with it:

Code: [Select]

#nav ul li { float: left; color: #ffffff; text-align: center; margin-right:10px;}
#nav ul li a {display: block; padding: 5px 10px; color: #ffffff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus { background:#ddd; color:#000; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; }
#nav li a:active, #nav ul li a.active {}

/* Current page Customisations*/
#nav li.menu-current a { font-weight:700; color: #e6352d; }
#nav li.menu-parent a { font-weight:700; color: #e6352d; }

/* 2nd Child menu */
#nav .menu li ul {position: absolute; margin: 0; display: none; text-transform: none; border-top: 0; width: 14em; }
#nav .menu li ul li {  width:10em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {  width:10em; padding: 5px 10px; background-image:url('/core/menubg.png'); color: #fff; border: 0; -webkit-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {background: #000000; border: 0; color:#fff; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}

/* Positioning the Pop-out Drops */
#nav li {position: relative;}
#nav ul ul ul { position: absolute; top: 1px; left: 100%; }
/* end menu */

No JS is being used yet, only CSS.
Any help is greatly appreciated

[nibz]

And you got it working without show_menu ?
(With just plain html)

[CodeALot]

No, I now have a "normal" drop down menu using show_menu2 and CSS where it only shows the submenu of the main item, and I want it to show all sublevels. Like on http://www.hsb-bouw.nl

[nibz]

I'm sorry then i can't help you.

This is more a question of CSS (+JS)
Maybe somebody else in the forum can help you.

I also tried and search google for a script to make a menu like the URL you posted, but till no didn't find any.

[nibz]

I couldn't leave you hanging

I did a little dive in the interwebs, and made this: http://nibz.nl/dev/

My showmenu2 code is

Code: [Select]

<?php
show_menu2(
   $aMenu          = 0,
   $aStart         = SM2_ROOT,
   $aMaxLevel      = SM2_ALL,
   $aOptions       = SM2_ALL,
   $aItemOpen      = '[li][a][menu_title]</a>',
   $aItemClose     = '</li>',
   $aMenuOpen      = '<ul class="[class] pid[page_id]">',
   $aMenuClose     = '</ul>',
   $aTopItemOpen   = false,
   $aTopMenuOpen   = '<ul class="container">'
);
?>

One small hint, the first page id of the first submenu has to go in the css

Code: [Select]

.nav ul ul.pid8 {
background: red!important;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
min-height: 100px;
}

In my example it is page-id8 (this is the first page child page, in general, on my site), but this can be another id on your website.
I couldn't find another solution to make it working.

Hope this helps you.

Regards Robin

[CodeALot]

You rule Thanks a million! I'll go fiddle with that and make it fit the site, the basics are great already

[Ruud]

I couldn't leave you hanging

+1

[nibz]

Glad you like it.
Since it was a CSS related i kept my demo as simple as possible.

For the future: this sorts of questions isn't show_menu(2); or even WebsiteBaker related.
Because if you can't make it in plain HTML + CSS (+js or jquery) then you can't make it in WebsiteBaker.

But i'm glad i could be at help with the issue on hand: CSS + HTML.

[Rajjinka]

Hi,
I am a complete novice and desperately need a drop down menu that shows the pages under each heading but have no idea how to do it - any help would be greatly received!!

The website is careadvisernetwork. co.uk

Thanks so much for any help
Nik