Author Topic: Full-width dropdown showing ALL submenu's - Can it be done?  (Read 13682 times)

Offline CodeALot

  • Posts: 506
  • Gender: Male
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/

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #1 on: May 20, 2014, 09:57:09 PM »
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.

Offline CodeALot

  • Posts: 506
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #2 on: May 20, 2014, 10:45:20 PM »
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(1SM2_ROOTSM2_ALLSM2_ALLfalse"\n</li>"falsefalsefalse'<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 :)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #3 on: May 20, 2014, 10:57:58 PM »
And you got it working without show_menu ?
(With just plain html)

Offline CodeALot

  • Posts: 506
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #4 on: May 20, 2014, 11:07:38 PM »
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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #5 on: May 20, 2014, 11:14:53 PM »
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.

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #6 on: May 21, 2014, 12:57:26 AM »
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

Offline CodeALot

  • Posts: 506
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #7 on: May 21, 2014, 09:42:41 AM »
You rule :) Thanks a million! I'll go fiddle with that and make it fit the site, the basics are great already :)

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #8 on: May 21, 2014, 10:12:39 AM »
I couldn't leave you hanging ;)

+1

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #9 on: May 21, 2014, 10:13:37 AM »
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.

Offline Rajjinka

  • Posts: 9
Re: Full-width dropdown showing ALL submenu's - Can it be done?
« Reply #10 on: September 22, 2014, 11:32:02 AM »
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