WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: CodeALot on May 20, 2014, 06:35:36 PM
-
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/
-
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.
-
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:
<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:
#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 :)
-
And you got it working without show_menu ?
(With just plain html)
-
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
-
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.
-
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
<?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
.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
-
You rule :) Thanks a million! I'll go fiddle with that and make it fit the site, the basics are great already :)
-
I couldn't leave you hanging ;)
+1
-
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.
-
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