CSS3 Kick-Butt-Mega-Menu (free)

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.

Paul · Post by **Paul** » Thu Mar 05, 2015 9:35 pm

Here is my problem: When I created a header (content type), the line following the creation of the header is not equal.

problem :

header and Line :
Entrepreneuriales
_____________

Adendum · Post by **Adendum** » Fri Mar 06, 2015 1:44 am

That looks to me like you have a second column after Entrepreneuriales but it is empty.

fotogian · Post by **fotogian** » Sat Aug 15, 2015 9:14 pm

what are the changes in the new version?

Adendum · Post by **Adendum** » Mon Aug 17, 2015 11:49 am

fotogian wrote:what are the changes in the new version?

What new version?

fotogian · Post by **fotogian** » Thu Aug 20, 2015 8:01 pm

I installed 10.0.0.13 but in extensions it seems to be 4.0.0 (august 8, 2015)

Adendum · Post by **Adendum** » Fri Aug 21, 2015 3:18 pm

Nope - the latest version is 10.0.0.13

fotogian · Post by **fotogian** » Sun Aug 23, 2015 10:07 am

Adendum · Post by **Adendum** » Mon Aug 24, 2015 10:36 am

My first image was taken while using WWB9.

This image is taken while using WWB10 - as your image was.

Suggest you have a word with Pablo as it's something at your end.

Joel · Post by **Joel** » Tue Apr 19, 2016 9:14 am

Does anyone know WHY this menu behaves very well when you're previewing just one page in a default browser but absolutely loses it when you're previewing a whole website?

I can't show you what is happening as the website is not published but I'm at my wit's end

Adendum · Post by **Adendum** » Tue Apr 19, 2016 11:41 am

I don't know the answer per se but if I were you I would publish the entire site locally and then test the menu.