CSS3 Kick-Butt-Mega-Menu (free)

Adendum · Post by **Adendum** » Wed Oct 26, 2011 11:47 pm

The CSS3 Kick-Butt-Mega-Menu is now available from the main extension site - here and also from my extension demo site. The help file is also available online from the same page.

This extension is based on Guillaume Marty's Kick-Butt CSS3 Mega Drop-Down Menu. Original demo here and original code here. Works fully in all browsers supporting CSS3 and provides a massive potential for navigational enhancement. All CSS3 features work properly in Safari, Chrome, Opera and Firefox.

This is a complex extension and will require you to spend some time entering the many various properties and experimenting with the published results. You are strongly urged to fully read the help file before using this extension (or before contacting me for support issues).

PLEASE READ THE HELP FILE BEFORE REQUESTING SUPPORT.

Demo of the extension

madebyibloo · Post by **madebyibloo** » Thu Oct 27, 2011 12:08 am

wow! excellent work Paul! love it

Cheers,
Scott

amrajadhyaksha · Post by **amrajadhyaksha** » Thu Oct 27, 2011 2:42 am

A prayer answered.
It even aligns the last tabs' fly outs to the left instead of flying out of the frame to the right. Wow!
Thank you, Paul.
Would also be great if you could create a simple drop down (without images or description boxes ) but with adjustable alignment left or right for the drop down as you have done here.

zinc · Post by **zinc** » Thu Oct 27, 2011 6:41 am

Way to go Paul!!! Nice one

Adendum · Post by **Adendum** » Thu Oct 27, 2011 11:06 am

amrajadhyaksha wrote:A prayer answered.
It even aligns the last tabs' fly outs to the left instead of flying out of the frame to the right. Wow!
Thank you, Paul.
Would also be great if you could create a simple drop down (without images or description boxes ) but with adjustable alignment left or right for the drop down as you have done here.

You can create your own menu using this extension that has just simple lists in the drop downs and you can set more than one menu button to appear on the right hand side. Furthermore you can set any of the drop downs to be aligned to the right, not just the last one in the sequence.

amrajadhyaksha · Post by **amrajadhyaksha** » Thu Oct 27, 2011 1:28 pm

Adendum wrote:You can create your own menu using this extension that has just simple lists in the drop downs and you can set more than one menu button to appear on the right hand side. Furthermore you can set any of the drop downs to be aligned to the right, not just the last one in the sequence.

Did not think of that, but then that puts me in the same league as Sir Isaac Newton who made two holes for his cat and her kitten to pass through, one large, one small

Thanks for pointing this out.

Patr100 · Post by **Patr100** » Thu Oct 27, 2011 1:43 pm

Adendum, while I might not always immediately have a working site to use your extensions
I want to thank you for your contributions - this looks really impressive as have many others you produce .
Appreciate your work in bringing us these options.

Pascal-Gilles · Post by **Pascal-Gilles** » Fri Oct 28, 2011 12:10 pm

Hi Paul,

Just 3 words: Te-rri-fic !

I was just wondering if we could have some menu items with only a link, no sub menu ?

Adendum · Post by **Adendum** » Fri Oct 28, 2011 12:21 pm

Not in its current form. I'll have a think about that.

The idea behind this menu is that you have a lot of information to add to enhance the navigation experience. So it's really aimed at sites that need to use the drop down features and add explanatory text and images, as per the demo.

Adendum · Post by **Adendum** » Fri Nov 11, 2011 8:06 am

10/11/11 : Having only realised I could do this yesterday (doh!) I have modified this extension (and all my extensions - see list below) so that the live rendering of the extension in design view is greatly improved. In many cases the design view will take on a background colour you set in the extension properties.

Updates available from the WWB extensions site and my own demo site. Remember to check out the extensions listed below.

Anything Slider
Automated ToolTip
Directory Listing
Elastic Thumbnail Menu
Image Information Panels
Image Swap Menu
Orbit Slider
Photo Info
Simple Horizontal Accordion
Slide Down Box Menu
Stacked Images
tab Slide Out

Pascal-Gilles · Post by **Pascal-Gilles** » Sun Nov 13, 2011 5:54 pm

Adendum wrote:Not in its current form. I'll have a think about that.

The idea behind this menu is that you have a lot of information to add to enhance the navigation experience. So it's really aimed at sites that need to use the drop down features and add explanatory text and images, as per the demo.

Hi Paul,

Just coming back on this subject. I really love your extension and I would like to implement it.
The only thing that holds me is that need to make submenus for every item.

So, if you update it with a possibility to make unactive submenus, please give me a sign !

Adendum · Post by **Adendum** » Sun Nov 13, 2011 6:22 pm

Crochpattes,

Just so I am 100% clear - what you are looking for is the option to have a top level menu button that has no drop down and can link to a url?

In the mean time, to get 'close' to that you could make the drop down a simple List style and add the link to the page in that. Not exactly what you are looking for I know but I suspect it will take me a while to get around that request.

Pascal-Gilles · Post by **Pascal-Gilles** » Sun Nov 13, 2011 6:31 pm

Adendum wrote:Crochpattes,

Just so I am 100% clear - what you are looking for is the option to have a top level menu button that has no drop down and can link to a url?

In the mean time, to get 'close' to that you could make the drop down a simple List style and add the link to the page in that. Not exactly what you are looking for I know but I suspect it will take me a while to get around that request.

You've understood exactly what I thought about. Don't worry Paul, I'll find another way !

Wish u a nice evening !

Cheers

Adendum · Post by **Adendum** » Fri Nov 25, 2011 4:39 pm

Octane,

Weird...I uninstalled it in 7 and installed it in 8 just yesterday as I created a new version. Try downloading from the demo site and doing a manual install. All the demo pages are now WWB8, so I know it works.

OzarkWebSolutions · Post by **OzarkWebSolutions** » Mon Nov 28, 2011 4:57 pm

Is there some reason that one cannot place a transparent shape over a button with a link to make it work as a link? That is what I plan to do, and also to group them as objects.

I have my mega menu setup as a master page that I insert in all pages to I get a one/many change when I update.

I am evaluating this menu for use on a huge site so I need to be sure it will work OK. My testing will be on a less critical site that I own.

MD

Adendum · Post by **Adendum** » Mon Nov 28, 2011 6:06 pm

@crochepattes

I forgot to mention....I updated the extension a while back. Top Level buttons are linkable. I updated the demo and you'll see that the HOME button and the next one, FIVE, are both linked. Still working out how to NOT have a sub-menu though.

@OzarkWebSolutions,

No need for the transparent image. Top Level buttons are now linkable. The only 'issue' outstanding on this menu is how to create one WITHOUT the drop down sub-menus.

Pascal-Gilles · Post by **Pascal-Gilles** » Mon Nov 28, 2011 7:34 pm

Adendum wrote:@crochepattes

I forgot to mention....I updated the extension a while back. Top Level buttons are linkable. I updated the demo and you'll see that the HOME button and the next one, FIVE, are both linked. Still working out how to NOT have a sub-menu though.

Hi Paul,

Thanks for your feedback

I still didn't find a solution (searched a bit, not had so much time), so if you unlock this submenu option, I will be glad about it !

Regards
Pascal

Adendum · Post by **Adendum** » Mon Nov 28, 2011 7:55 pm

Well I have something 'close' to this but it's not very neat.

I can hide the drop down with an added property in the extension.....but you still get the tab appearing on hover. The css has a global statement (#menu li:hover ....) so I'm trying to find a way in css to nest classes so that when a menu item has a class of .nodrop (the new class, which hides the div for the dropdown and the arrow on the main menu) the hover state of an item with the class of .nodrop no longer has a hover state or has a different hover state..........but so far no luck.

If there are any CSS gurus ot there!!!!

Pascal-Gilles · Post by **Pascal-Gilles** » Mon Nov 28, 2011 8:04 pm

Thanks for your efforts, really appreciated Paul !

Best,
Pascal

Adendum · Post by **Adendum** » Mon Dec 05, 2011 11:19 pm

05/12/11 : Updated 1.0.0.3

New version includes :-
[1] top level button links
[2] option to not have a drop down menu/hover tab.

Help file updated to explain two new properties.

Demo site updated to include a second example menu with [1] and [2] in use.

Note: Because of the use of graduated backgrounds used in CSS3 supported browsers you will see a thin border around a non-dropped menu item. This does not appear in IE as the border colour is the same as the background colour. If you elect not to use graduation the thin border will not be seen in CSS3 supported browsers.

Update available from the extensions site and my demo site.

Adendum · Post by **Adendum** » Mon Feb 20, 2012 4:57 pm

20/02/12 : Image Content now published to the /kickbutt folder.

You may need to re-link any images if you open a project that uses an earlier version of this extension.

Adendum · Post by **Adendum** » Sun May 27, 2012 9:16 pm

bailong,

Glad you like it.

The reason you are seeing these 'ghost buttons' is because they are part of the buttons for the menu. They are not 'ghost buttons' but part of the menu. In page one of the help file it clearly states:-

Known Limitations
This extension is supplied with 7 menu button properties. ALL buttons will be published and there are no options to use less or to add more.

In your screenshot you are showing 7 menu buttons (as expected) but have only edited three of them (Parchi, Musei and Vivere) the remaining four buttons require setting up. The label 'Button Name' appears by default until you edit them. So complete the button labels, keeping them short enough to not exceed the width of the extension and you'll have a working menu......but like it says - 7 buttons - no more and no less.

radioboy74 · Post by **radioboy74** » Mon May 28, 2012 11:03 pm

Have any of you ever used this extension? I can't get my drop downs to link properly. Click on Welcome and you'll see Meet Dr. Dardeau - that should link but it's not. Any suggestions?
http://awdportal.com/cc/index.html
Thanks

Adendum · Post by **Adendum** » Tue May 29, 2012 12:33 pm

radioboy,

This isn't an easy extension to get your head around but it is a pretty complex mega-menu to start with. I first have to ask if you have read the help file? Do you understand the different kinds of content that goes into the drop downs?

If you just want "Meet Dr. Dardeau" to be a linked item you should choose a Content Type of "List" and then decide if you want a Simple list or a Boxed list.

Maybe this will help:-

KBMMlists.gif

Adendum · Post by **Adendum** » Wed May 30, 2012 6:38 pm

radioboy,

I checked your test page again today and I see you have figured it out.

That's OK, it was my pleasure!

Adendum · Post by **Adendum** » Thu May 31, 2012 7:53 pm

31/05/12 : A new version of the KBMM extension is available.

Before you install be aware that this is a radically different version from 1.0.0.6.
Your drop down data will be preserved but you will need to set up the menu items independently of the content (the drop down data). You are therefore advised to record your original settings/values for Item Name, Item Link, Menu Position, Drop or No Drop, Drop Down Columns, Drop Down Alignment and Header Text for EACH menu button. Spending 5 minutes here will save you an hour!

THE CHANGES:
1. The extension will now accept up to 10 main buttons - (the old version had 7).
2. The restructured extension now also allows you to re-sequence menu items. So if you needed to reposition menu items, e.g. swap item four with item one or move item 7 to position three, five to 2 and so on, you would be able to do that without having to re-enter all the menu drop down data.
3. Changes to the CSS will enable several CSS3 features to work in older versions of IE, such as linear graduation.
4. Totally revised help file.

Both demo pages have been updated using the new extension.

Have fun.

Adendum · Post by **Adendum** » Wed Oct 10, 2012 2:33 pm

Andrew,

Well, the KBMM is working, so that's not the issue.

I believe the problem is simply with the way SOME of the links have been incorrectly set up. Where you have them showing as http://www.northwesthampers.co.uk/our_suppliers.php/#pennineway it should be http://www.northwesthampers.co.uk/our_s ... pennineway. So step one is to delete the leading / on all those menu items.

Also when looking at the source vs. the page the page has 12 potential book marks (assuming you are using the headings of the supplier names) but the source is showing one more bookmark (adesso and Adesso)

Code: Select all

<div id="wb_Bookmark1" .........name="adesso">&nbsp;</a>
<div id="wb_Bookmark2" .........name="honeycombcompany">&nbsp;</a>
<div id="wb_Bookmark3" .........name="pennineway">&nbsp;</a>
<div id="wb_Bookmark4" .........name="connieskitchen">&nbsp;</a>
<div id="wb_Bookmark5" .........name="reedys">&nbsp;</a>
<div id="wb_Bookmark6" .........name="exchange">&nbsp;</a>
<div id="wb_Bookmark8" .........name="prospect">&nbsp;</a>
<div id="wb_Bookmark9" .........name="unclejoes">&nbsp;</a>
<div id="wb_Bookmark10" ........name="quiggins">&nbsp;</a>
<div id="wb_Bookmark12" ........name="cumberland">&nbsp;</a>
<div id="wb_Bookmark14" ........name="cowmire">&nbsp;</a>
<div id="wb_Bookmark16" ........name="lancashiresauce">&nbsp;</a>
<div id="wb_Bookmark19" ........name="Adesso">&nbsp;</a>

So tidy that up too.

You can test the bookmarks by copying the full url into you browser. The links with a leading / fail but those correctly coded work.

EDIT: and you connies kitchen link is wrong oc.uk instead of co.uk.

EDIT#2: there is an option to not show the dropdown arrow if you are not using a dropdown. See demo 2 in my site as an example.

JimmyJazz · Post by **JimmyJazz** » Wed Jan 16, 2013 9:51 pm

Hi Adendum,

Is there any way to expand this to accommodate 14 menu items?
(current capacity is 11)

Adendum · Post by **Adendum** » Thu Jan 17, 2013 10:08 am

Anything is possible but with my current workload I doubt I will get the chance to look at this for several weeks. Email me a reminder via the support page on the demo site and I'll add it to my to do list. But as stated it will be several weeks before I can consider it.

randm · Post by **randm** » Mon Aug 12, 2013 5:28 pm

I LOVE this extension and I'm using it successfully on a client site - however, the client is not happy with the "kick-butt" description that shows up in the page info of html coding. Is there any way to change/eliminate that?? Thanks

Adendum · Post by **Adendum** » Mon Aug 12, 2013 5:54 pm

You mean...

Code: Select all

<link rel="stylesheet" href="kickbutt/kbddmmenu.css" type="text/css" media="screen">

	<!--[if IE 6]>
	<style>
	body {behavior: url("kickbutt/csshover3.htc");}
	#menu li .drop {background:url("kickbutt/drop.gif") no-repeat right 8px; 
	</style>
	<![endif]-->

Or something else?

randm · Post by **randm** » Mon Aug 12, 2013 11:51 pm

Adendum wrote:You mean...

Code: Select all

<link rel="stylesheet" href="kickbutt/kbddmmenu.css" type="text/css" media="screen">

	<!--[if IE 6]>
	<style>
	body {behavior: url("kickbutt/csshover3.htc");}
	#menu li .drop {background:url("kickbutt/drop.gif") no-repeat right 8px; 
	</style>
	<![endif]-->

Or something else?

Yes, you're right . . . it appears in the browser "View/Page Source" and he's offended because it's a religious website. Not me . . . I understand it's just a name, and who's going to look at page source anyway? But he's worried people will judge him. It's an AWESOME menu extension. Is there a way to edit out that part of the name?

Adendum · Post by **Adendum** » Tue Aug 13, 2013 12:50 am

I'll see what I can do...

randm · Post by **randm** » Tue Aug 13, 2013 2:21 am

Hey Paul - Thank you so much! I so appreciate your willingness to help.

Cheers!

Adendum · Post by **Adendum** » Tue Aug 13, 2013 1:17 pm

Done. Update via Extension Manager.

fotogian · Post by **fotogian** » Sun Aug 18, 2013 11:27 pm

I used CSS Kick Butt mega Menu in my site: http://www.fotogian.com

there is a little problem: I can modify the font and the size of the menu but I cannot change font and size of characters into the menu.. and they are too small..

do someone know if there is a way to change the menu?

thanks

randm · Post by **randm** » Mon Aug 19, 2013 12:09 am

Adendum wrote:Done. Update via Extension Manager.

Thanks so much, Paul!

Adendum · Post by **Adendum** » Mon Aug 19, 2013 1:23 pm

fotogian wrote:I used CSS Kick Butt mega Menu in my site: http://www.fotogian.com

there is a little problem: I can modify the font and the size of the menu but I cannot change font and size of characters into the menu.. and they are too small..

do someone know if there is a way to change the menu?

thanks

If you are talking about the text within the drop down panel there is already an option to modify the font size. However I suspect you are talking about the Simple List and Boxed List menu items in the drop down area, which was fixed at 12px. I have therefore added a new property that allows you to change this value as required.

KBMM-update1004.jpg

Update available from Extension Manager - version 1.0.0.10

fotogian · Post by **fotogian** » Tue Aug 20, 2013 7:24 pm

thanks

Adendum · Post by **Adendum** » Tue Oct 15, 2013 5:24 pm

Version 1.0.0.11 now available

[a] I discovered a couple of errors in image linking since the last update was made (to overcome the apparent embarrassing name of the extension files) where a couple of bits of code still referred to the older naming used. Tested and OK.

I also renamed and relocated a CSS file used in the extension. So after downloading the new version it is important to publish ALL FILES, otherwise you'll be missing your styling code. Tested and OK.

[c] I have also updated the extension to provide 15, yes fifteen!!!, top level menu slots. I have not had time to test these additions so would appreciate that those who asked for it report back as soon as possible. NOT TESTED but does not affect pages currently using the original 7 slots or the later 11 slots.

SO... @JIMMYJAZZ and anyone else who requested more than the original set...I look forward to hearing from you!!

007homevideo · Post by **007homevideo** » Wed Oct 16, 2013 6:56 am

Adendum wrote:Version 1.0.0.11 now available

[c] I have also updated the extension to provide 15, yes fifteen!!!, top level menu slots. I have not had time to test these additions so would appreciate that those who asked for it report back as soon as possible. NOT TESTED but does not affect pages currently using the original 7 slots or the later 11 slots.

Many thanks for including the extended top-level menu items.

I have downloaded and installed v1.0.0.11.

The integrity of my pre-existing layout of my kbmm has been maintained.

However, I appear to still be restricted to 11 slots (items):

Adendum · Post by **Adendum** » Wed Oct 16, 2013 5:58 pm

007homevideo wrote:However, I appear to still be restricted to 11 slots (items):

Should be OK now - update available from Extension Manager.

KBMM-WWB-10012.jpg

KBMM-15.jpg

I'd be very interested to see a finished menu with 15 items in it!

Good luck and have fun.

007homevideo · Post by **007homevideo** » Thu Oct 17, 2013 5:12 am

Outstanding!!!!!!

I have indeed had a good measure of 'fun' implementing the expanded menu.

Here's a full-sized screen capture of the prototype 15-slot KBMM version of my website. As you can see, the 15 top-menu items all fit comfortably in a 1280-width. The only issue was the need to limit slot 14 to a single column (two-columns would extend beyond the right-hand limit of the 1280 area.

Given the numerous sections necessitated by the subject matter, the flexibility of KBMM (which, I readily acknowledge, I have applied very simply indeed), achieves the principal aim of a menu; which is logical, intuitive access to the content of a website. As an extension for WYSIWYG Web Builder, KBMM is essential.

My perpetual thanks to you for taking the time to expand KBMM.

Adendum · Post by **Adendum** » Thu Oct 17, 2013 11:10 am

007homevideo wrote:The only issue was the need to limit slot 14 to a single column (two-columns would extend beyond the right-hand limit of the 1280 area.

You are fortunate to have short top level button names, so I don't think I'll see many 15 button examples.

For your 14th button you could always make the drop down drop to the left.

fotogian · Post by **fotogian** » Sat Aug 23, 2014 6:55 pm

is it possible to built a menu with a trasparent background?

fotogian · Post by **fotogian** » Wed Oct 29, 2014 7:34 pm

I would like to insert the kick butt menu more on left.. www.fotogian.com.
how can I do ?

Adendum · Post by **Adendum** » Wed Oct 29, 2014 7:47 pm

Transparency: Ony if you want to hack into the CSS files after publishing the page.

Left: Looks like you have already.

Adendum · Post by **Adendum** » Thu Jan 22, 2015 5:57 pm

Jose Fragoso wrote:I've tryed before to use the support form on the demo site, but it returns the following message:

Forbidden
You don't have permission to access /demo/support.php on this server.
Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

So, don't take offence too, but if you want to try exprress yourself in Portuguese, maybe it is a less weird language than English.

This form/page and the same on the Templates website has been fixed. Some kind of Apache Server Mod error was introduced in the last update.
Fixed, tested and working now.

Paul · Post by **Paul** » Sat Feb 28, 2015 9:04 pm

I want to know this extension can be placed in a frame master ?

Thank you for the help

Adendum · Post by **Adendum** » Sun Mar 01, 2015 11:57 am

You shouldn't but you can if you use absolute URLs. Meaning don't use 'Page in this project' but use 'External website' and specify the full url e.g. http://yourdomain.com/page4.html etc.