WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: nibz on June 20, 2011, 11:34:46 PM
-
In the forum i see many people asking for a Mega Menu,
I don't know if someone already had a solution,
Check my website for info, a demo and download a simple demo template:
http://nibz.nl/template/mega-menu/
Credits go to: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/ for his script.
Questions and comments are welcome.
Greets Robin
-
Thanks Robin. Great!
Hans
-
You're welcome :)
-
Very nice, thanks for sharing!
-
Cool! I used the script once on a site with manual menu, but never took the time to figure it out using WB showmenu2. Thanks for sharing!
-
Great menu ;)
Hi Im having a problem seeing this menu in Google Chrome. Everything is working fine in Firefox and IE but in chrome only works on some computers. I can see the drop down menu at my PC at work, but I can't see the drop down at my home PC.
Any idea?
Thanx, R.
-
Can have something to do with that the javascript isn't set ON in the specific browser.
At school i can see it on 1 computer but not on the other... (JS thing)..
But don't know..
-
Offtopics have been deleted by me!
cheers
Klaus
-
hmmm, there was a very good link here yesterday,
and there where megamenues as well. Though named differently.
Shame it is deleted. I hope my yesterdays cahce will know it.
John
-
hmmm, there was a very good link here yesterday,
and there where megamenues as well. Though named differently.
Shame it is deleted. I hope my yesterdays cahce will know it.
John
OK, but let's not discuss other menus than mega menus here. It's nice to keep the topic focused.
http://www.cssplay.co.uk/menus/
The one was the Superfish jQuery with SM2 (can't find the link right now)
There are also several mega menus at CodeCanyon, for example http://codecanyon.net/item/mega-menu-complete-set/152825
-
Hi all, I know this is an old thread, but I've played around with the script, stripping out the wordpress content and using the code nibz kindly provided but can't for the life of me get it to work.
Any ideas, or are there other solutions out there now?
-
Hi jdjdjd do you have a demo of the page where you can't get it to work ?
I can provide a "bare" template with only the menu and a wrapper (for example purpose if you like),
Gr. Nibz
-
Hi Nibz,
Great work with your demo. I deleted my test site yesterday after much frustration, I always have more luck leaving something for an evening then coming back to it to try again, but to be honest I think porting the script is beyond my abilities right now.
If you could share your template that would be great. I started to consider using wordpress with the abundance of plugins for it inc. mega menu's, but I've used website baker on over 30 sites and the clients love it!
-
Here is the code,
I know it has one error with firebug, but it works, i will have a look into that mater later today :)
But this is just to get you started, hope it helps
Gr. Nibz
[removed attatchment see my first post in this topic!]
-
Just to say thanks again on your great work Nibz - I think for people wanting drop-down menu's this is the way to go over the other website baker alternatives - it's very easily customisable too.
-
jdjdjd I completely agree!
The props for the script go to designchemical,
I only ported it to WB :), but it is really the way to go for a nice mega menu with many nice options :)
Thinking of creating a little demo site with some info's (when i have time :) )
-
Just released a renewed demo template; a megamenu for WebsiteBaker!
Demo and download: http://nibz.nl/template/mega-menu/
Megamenu screenshot (color: white)
(http://nibz.nl/media/mega-menu/mega-menu-white.png)
-
Very cool!! I notice it's not responsive (or your demosite isn't...). Can it be made responsive? Nowadays almost all new sites have to be responsive.
-
It's not responsive, but i can make it responsive.
Will do so in the next version.
-
Updated the download file.
Made the menu responsive, just a simple select menu shows on small screens.
Download: http://nibz.nl/template/mega-menu/
Demo: http://nibz.nl/template/mega-menu/demo/
-
Hi,
hm, it also shows on regular screens :|
But I was thinking more along the lines of adapting widths and font-sizes, before finally changing into a dropdown menu.
-
Hi,
hm, it also shows on regular screens :|
But I was thinking more along the lines of adapting widths and font-sizes, before finally changing into a dropdown menu.
The mobile menu in my example shows when the screen is smaller than 960px, you can adapt it to the width of your choice.
The template is just a demo, but i will take a look if i can adapt the css to be more responsive (adapting the widths and font sizes) but this will take a while, when it's ready i will post again (thank after the holidays).
Gr. Robin
-
Ah, now the dropdown is gone from thh regular screen. Maybe it was a cache thing in my browser or something. It could use some visual polishing, but it's a nice addition!
-
Ah, now the dropdown is gone from thh regular screen. Maybe it was a cache thing in my browser or something. It could use some visual polishing, but it's a nice addition!
@Argos added some visual polishing ;), i think i can't make it more responsive because i don't know how many menu items every menu has and which setting you want to set, so this will be the definitive version (for now) regarding the responsiveness.
Screenshot: (white responsive)
(http://nibz.nl/media/mega-menu/mega-menu-white-responsive.png)
And again:
Download: http://nibz.nl/template/mega-menu/
Demo: http://nibz.nl/template/mega-menu/demo/
More suggestions are welcome :)
-
Looking great nibz! Much better :-D
One thing: you have to click the text to show the dropdown. It would be better if the complete dropdown would be clickable.
-
Looking great nibz! Much better :-D
One thing: you have to click the text to show the dropdown. It would be better if the complete dropdown would be clickable.
First of all thanks for the compliment!
And second thanks for the hint, didn't notice.. Just uploaded version 1.5 where this is fixed :)
-
Cool, very nice job, thanks for sharing!
-
Thanks Robin! Great one!
Hans
-
Great Template THX a lot :-D
Two Questions:
1. How can i get the menu align on the right side instead oft align left?
2. How can i get a logo on the left side before the menu?
i hope somebody can give me a tipp :-)
best regards
Craxx;-)
-
Great Template THX a lot :-D
Two Questions:
1. How can i get the menu align on the right side instead oft align left?
2. How can i get a logo on the left side before the menu?
First of all thanks for the compliment!
1: isn't as simple as it looks, also needs some changes to the javascript and in the css;
in the javascript around line 122 there is 'left', '0px' change that to 'right', '0px'
and on line 124 the same. (and maybe also margin-left to margin-right).
In the css add:
ul.mega-menu {float: right}
2: Add this before the wrapper class of the menu (e.g. <div class="basic">)
<div class="logo"><img src="http://placehold.it/150x40"></div>
where http://placehold.it/150x40 is the url to your logo.
Then add this to the css:
.logo {display: inline-block; float: left; position: relative; z-index: 1;}
See my demo page, i changed the basic.
Only responsiveness isn't really good yet! Solved: see the next post!
-
And here a little extra css for making it act nice responsive:
@media only screen and (max-width : 400px) {
.logo {width: 75px;}
.logo img {max-width: 75px !important; height: auto; padding-top: 8px;}
#wrapper {min-width: 280px;}
}
-
Thx a lot for your answer :-D
When i am at office today i test your code and report.
Best regards
Craxx;-)
-
Hy Robin,
thx for your code. I integrated as your suggested.
All is working fine :mrgreen: :mrgreen: :mrgreen:
THX a lot !!!!!!
Youre the man.
One question:
Is there a way to get the logo higher?
The navigation is 40px and the margin up and down are 20px
Now it would be fine if the logo could be 80px high (40+20+20) and the rest of the navigation like it is 20px up then Navi with 40px and then 20px down margin
best regards
Craxx;-)
-
Hy Robin,
i need your help please.
I don´t know what i have done, but now i get points in der Menu. How can i remove them?
Thx for your help
best regards
Craxx;-)
-
Hi craxx,
Can you PM me a link please
-
Hy Robin,
i send you a pm ;-)
best regards
Craxx;-)
-
Got the link, but you allready found the problem.
Regarding the logo.
You allready use a bigger logo and you can change the positioning by adding the following to the css in .logo
top: -5px;
Where -5 can be any number, it depends on the height of the logo and the desired position of the logo.
Hope that works for you!
-
Hy Robin thx for your help.
With this i can position the logo, thx.
top: -15px;
But when the logo is bigger, the slider below is messed up ??
Best regards
Craxx;-)
-
You also need the change the height of the .basic class
to e.g. 60px
-
And small tip (i will also change this in the upcoming version)
The show menu2 call has to be a little bit different (so in the 'mobile' version you can see the level indicator in the menu).
It now is:
<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL|SM2_NUMCLASS|SM2_PRETTY, '<li id="p[page_id]"><a href="[url]" class="[class]">[if(level=4){<span>- </span>}][if(level=5){<span>-- </span>}][menu_title]</a>', '</li>', '[ul]', '</ul>', false, '<ul class="mega-menu">');?>
we need to change the first level=4 to level=1 and level=5 needs te be level=2 (if you use the template at the root of your site, and you do!).
So the code needs to be:
<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL|SM2_NUMCLASS|SM2_PRETTY, '<li id="p[page_id]"><a href="[url]" class="[class]">[if(level=1){<span>- </span>}][if(level=2){<span>-- </span>}][menu_title]</a>', '</li>', '[ul]', '</ul>', false, '<ul class="mega-menu">');?>
-
Hy Robin,
thx for the mobile tipp. I implement it, looks really nice and more clearly :-D
To my logo question again :-D
ok, but then the complete menu is 20+60+20=100px
My wish is the menu is 20+40+20=80 (40px high with up and down padding 20px)
and the logo 80px
I hope you understand me? :-D
best regards
Craxx;-)
-
Just try what i say, and you'll see visually it's the same.
Because the wrapper has the margin and the .basic doesn't, so this needs a higher height.
See my screenshot attached
-
...so it is like i said, when i want to get the logo bigger, i have more padding below the navbar.
But it is no problem anymore i cutted the logo and now it looks bigger :-D
thx for your help ;-)
best regards
Craxx;-)
PS: Really really nice work your template !!!!!
-
Then you should also reposition the menu.
But since your happy now everything is OK :).
Glad you like it so much, in the next version i am thinking of only putting in only one menu in the demo template.
I think with a little documentation i can explain that people can use the different themes in my demo, and by only using one menu in the demo template the JS and CSS etc also looks cleaner.
-
....thats a good idea. I think for the most people it will be then more easy to take it as a base ;-)
best regards
Craxx ;-)
PS: How do you like the design of the site i am working on (link i send you)?
-
I'ts really nice.
A little constructive feedback is on your way ;).
Will send you a PM because i don't want to get off-topic ;)
-
I updated my download: http://nibz.nl/template/mega-menu/
Now you will only have to change the class of the menu to the colour you wish.
Open the index.php see rule 24
<div class="white"> <!-- << set menu color here (basic,black,gray,blue,orange,red,green,light-blue or white)-->
Change the word within the "" in the demo it's white and it can be anything listed betwheen ( and ) so the menu can be basic, black, gray, blue, orange, red, green, light-blue or white.
-
Hy Robin,
thanks for update ;-)
best regards
Craxx ;-)