CSS3 Kick-Butt-Mega-Menu (free)
Re: CSS3 Kick-Butt-Mega-Menu (free)
@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.
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
-
- Posts: 83
- Joined: Tue Apr 05, 2011 8:06 pm
- Location: France
- Contact:
Re: CSS3 Kick-Butt-Mega-Menu (free)
Hi Paul,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.
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
http://www.soslignes-ecrivain-public.fr/
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
Re: CSS3 Kick-Butt-Mega-Menu (free)
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!!!!
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
-
- Posts: 83
- Joined: Tue Apr 05, 2011 8:06 pm
- Location: France
- Contact:
Re: CSS3 Kick-Butt-Mega-Menu (free)
Thanks for your efforts, really appreciated Paul !
Best,
Pascal
Best,
Pascal
http://www.soslignes-ecrivain-public.fr/
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
[UPDATED]: CSS3 Kick-Butt-Mega-Menu (free)
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.
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.
Re: CSS3 Kick-Butt-Mega-Menu (free) - UPDATE
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.
You may need to re-link any images if you open a project that uses an earlier version of this extension.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.
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.
-
-
- Posts: 12
- Joined: Fri Feb 06, 2009 7:28 pm
- Location: USA
- Contact:
Re: CSS3 Kick-Butt-Mega-Menu (free)
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
http://awdportal.com/cc/index.html
Thanks
Re: CSS3 Kick-Butt-Mega-Menu (free)
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:-
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:-
Re: CSS3 Kick-Butt-Mega-Menu (free)
radioboy,
I checked your test page again today and I see you have figured it out.
That's OK, it was my pleasure!
I checked your test page again today and I see you have figured it out.
That's OK, it was my pleasure!
Re: CSS3 Kick-Butt-Mega-Menu (free) - UPDATE -
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.
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.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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)
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.
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"> </a>
<div id="wb_Bookmark2" .........name="honeycombcompany"> </a>
<div id="wb_Bookmark3" .........name="pennineway"> </a>
<div id="wb_Bookmark4" .........name="connieskitchen"> </a>
<div id="wb_Bookmark5" .........name="reedys"> </a>
<div id="wb_Bookmark6" .........name="exchange"> </a>
<div id="wb_Bookmark8" .........name="prospect"> </a>
<div id="wb_Bookmark9" .........name="unclejoes"> </a>
<div id="wb_Bookmark10" ........name="quiggins"> </a>
<div id="wb_Bookmark12" ........name="cumberland"> </a>
<div id="wb_Bookmark14" ........name="cowmire"> </a>
<div id="wb_Bookmark16" ........name="lancashiresauce"> </a>
<div id="wb_Bookmark19" ........name="Adesso"> </a>
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.
Re: CSS3 Kick-Butt-Mega-Menu (free)
Hi Adendum,
Is there any way to expand this to accommodate 14 menu items?
(current capacity is 11)
Is there any way to expand this to accommodate 14 menu items?
(current capacity is 11)
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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
Re: CSS3 Kick-Butt-Mega-Menu (free)
You mean...
Or something else?
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]-->
Re: CSS3 Kick-Butt-Mega-Menu (free)
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 wrote:You mean...
Or something else?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]-->
Re: CSS3 Kick-Butt-Mega-Menu (free)
I'll see what I can do...
Re: CSS3 Kick-Butt-Mega-Menu (free)
Hey Paul - Thank you so much! I so appreciate your willingness to help.
Cheers!
Cheers!
Re: CSS3 Kick-Butt-Mega-Menu (free)
Done. Update via Extension Manager.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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
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
Re: CSS3 Kick-Butt-Mega-Menu (free)
Thanks so much, Paul!Adendum wrote:Done. Update via Extension Manager.
Re: CSS3 Kick-Butt-Mega-Menu (free) ** UPDATED **
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.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
Update available from Extension Manager - version 1.0.0.10
Re: CSS3 Kick-Butt-Mega-Menu (free) ** UPDATED **
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!!
[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!!
-
-
- Posts: 9
- Joined: Thu Oct 18, 2012 2:55 am
Re: CSS3 Kick-Butt-Mega-Menu (free) ** UPDATED **
Many thanks for including the extended top-level menu items.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.
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):
007 HOME VIDEO
An archive of international James Bond video sleeves across multiple formats
http://www.007homevideo.com
An archive of international James Bond video sleeves across multiple formats
http://www.007homevideo.com
Re: CSS3 Kick-Butt-Mega-Menu (free) ** UPDATED **
Should be OK now - update available from Extension Manager.007homevideo wrote:However, I appear to still be restricted to 11 slots (items):
I'd be very interested to see a finished menu with 15 items in it!
Good luck and have fun.
-
-
- Posts: 9
- Joined: Thu Oct 18, 2012 2:55 am
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.
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.
007 HOME VIDEO
An archive of international James Bond video sleeves across multiple formats
http://www.007homevideo.com
An archive of international James Bond video sleeves across multiple formats
http://www.007homevideo.com
Re: CSS3 Kick-Butt-Mega-Menu (free)
You are fortunate to have short top level button names, so I don't think I'll see many 15 button examples.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.
For your 14th button you could always make the drop down drop to the left.
Re: CSS3 Kick-Butt-Mega-Menu (free)
is it possible to built a menu with a trasparent background?
Re: CSS3 Kick-Butt-Mega-Menu (free)
I would like to insert the kick butt menu more on left.. www.fotogian.com.
how can I do ?
how can I do ?
Re: CSS3 Kick-Butt-Mega-Menu (free)
Transparency: Ony if you want to hack into the CSS files after publishing the page.
Left: Looks like you have already.
Left: Looks like you have already.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.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.
Fixed, tested and working now.
Re: CSS3 Kick-Butt-Mega-Menu (free)
I want to know this extension can be placed in a frame master ?
Thank you for the help
Thank you for the help
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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
_____________
problem :
header and Line :
Entrepreneuriales
_____________
Re: CSS3 Kick-Butt-Mega-Menu (free)
That looks to me like you have a second column after Entrepreneuriales but it is empty.
Re: CSS3 Kick-Butt-Mega-Menu (free)
what are the changes in the new version?
Re: CSS3 Kick-Butt-Mega-Menu (free)
What new version?fotogian wrote:what are the changes in the new version?
Re: CSS3 Kick-Butt-Mega-Menu (free)
I installed 10.0.0.13 but in extensions it seems to be 4.0.0 (august 8, 2015)
Re: CSS3 Kick-Butt-Mega-Menu (free)
Nope - the latest version is 10.0.0.13
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.
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.
Re: CSS3 Kick-Butt-Mega-Menu (free)
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
I can't show you what is happening as the website is not published but I'm at my wit's end
Re: CSS3 Kick-Butt-Mega-Menu (free)
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.