Mega Menu

[Craxx]

Hy Robin,

thanks for update

best regards
Craxx

[nibz]

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 Expand


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

[nibz]

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

[Craxx]

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

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]

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

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]

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]

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 Expand


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


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


[nibz]

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

[Craxx]

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]

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 Expand


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]

Hy Robin,

i send you a pm


best regards
Craxx;-)

[nibz]

Hi craxx,

Can you PM me a link please

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

[Craxx]

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]

Thx a lot for your answer
When i am at office today i test your code and report.

Best regards
Craxx;-)

[nibz]

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

Code Select Expand


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


[nibz]

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 Expand

ul.mega-menu {float: right}

2: Add this before the wrapper class of the menu (e.g. <div class="basic">)

Code Select Expand


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


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

[Craxx]

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

[Hans]

Thanks Robin! Great one!
Hans

[Argos]

Cool, very nice job, thanks for sharing!

[nibz]

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]

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.

[nibz]

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)


And again:
Download: http://nibz.nl/template/mega-menu/
Demo: http://nibz.nl/template/mega-menu/demo/

More suggestions are welcome