Author Topic: Mega Menu (Read 34129 times)

nibz · « **Reply #25 on:** July 22, 2013, 05:40:13 PM »

Quote from: Argos on July 22, 2013, 04:11:49 PM

Looking great nibz! Much better

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

Argos · « **Reply #26 on:** July 22, 2013, 05:42:53 PM »

Cool, very nice job, thanks for sharing!

Hans · « **Reply #27 on:** July 22, 2013, 06:11:20 PM »

Thanks Robin! Great one!
Hans

Craxx · « **Reply #28 on:** September 11, 2013, 07:32:06 PM »

Great Template THX a lot

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;-)

nibz · « **Reply #29 on:** September 11, 2013, 09:02:46 PM »

Quote from: Craxx on September 11, 2013, 07:32:06 PM

Great Template THX a lot

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:

Code: [Select]

ul.mega-menu {float: right}
2: Add this before the wrapper class of the menu (e.g. <div class="basic">)

Code: [Select]

<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:

Code: [Select]

.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!

nibz · « **Reply #30 on:** September 11, 2013, 10:04:58 PM »

And here a little extra css for making it act nice responsive:

Code: [Select]

@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;}
}

Craxx · « **Reply #31 on:** September 12, 2013, 09:10:02 AM »

Thx a lot for your answer

When i am at office today i test your code and report.

Best regards
Craxx;-)

Craxx · « **Reply #32 on:** September 12, 2013, 05:13:08 PM »

Hy Robin,

thx for your code. I integrated as your suggested.

All is working fine

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;-)

Craxx · « **Reply #33 on:** September 12, 2013, 10:53:56 PM »

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;-)

nibz · « **Reply #34 on:** September 13, 2013, 12:18:31 AM »

Hi craxx,

Can you PM me a link please

Craxx · « **Reply #35 on:** September 13, 2013, 09:10:22 AM »

Hy Robin,

i send you a pm

best regards
Craxx;-)

nibz · « **Reply #36 on:** September 13, 2013, 10:41:13 AM »

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

Code: [Select]

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!

Craxx · « **Reply #37 on:** September 13, 2013, 10:50:00 AM »

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;-)

nibz · « **Reply #38 on:** September 13, 2013, 10:51:56 AM »

You also need the change the height of the .basic class
to e.g. 60px

nibz · « **Reply #39 on:** September 13, 2013, 10:54:51 AM »

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:

Code: [Select]

<?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:

Code: [Select]

<?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">');?>

Craxx · « **Reply #40 on:** September 13, 2013, 11:01:54 AM »

Hy Robin,

thx for the mobile tipp. I implement it, looks really nice and more clearly

To my logo question again

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?

best regards
Craxx;-)

nibz · « **Reply #41 on:** September 13, 2013, 01:33:32 PM »

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

Craxx · « **Reply #42 on:** September 13, 2013, 02:17:42 PM »

...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

thx for your help

best regards
Craxx;-)

PS: Really really nice work your template !!!!!

nibz · « **Reply #43 on:** September 13, 2013, 02:30:38 PM »

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.

Craxx · « **Reply #44 on:** September 13, 2013, 03:08:15 PM »

....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)?

nibz · « **Reply #45 on:** September 13, 2013, 03:16:21 PM »

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

nibz · « **Reply #46 on:** February 05, 2015, 03:36:29 PM »

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

Code: [Select]

<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.

Craxx · « **Reply #47 on:** February 06, 2015, 10:05:33 AM »

Hy Robin,

thanks for update

best regards
Craxx

News

Support WebsiteBaker

Author Topic: Mega Menu (Read 34129 times)