Author Topic: Mega Menu  (Read 24083 times)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« Reply #25 on: July 22, 2013, 05:40:13 PM »
Looking great nibz! Much better  :-D

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

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Mega Menu
« Reply #26 on: July 22, 2013, 05:42:53 PM »
Cool, very nice job, thanks for sharing!
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Hans

  • Posts: 914
  • Gender: Male
Re: Mega Menu
« Reply #27 on: July 22, 2013, 06:11:20 PM »
Thanks Robin! Great one!
Hans
Hans - Nijmegen - The Netherlands

Offline Craxx

  • Posts: 266
Re: Mega Menu
« Reply #28 on: September 11, 2013, 07:32:06 PM »
Great Template THX a lot :-D

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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« Reply #29 on: September 11, 2013, 09:02:46 PM »
Great Template THX a lot :-D

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!
« Last Edit: September 11, 2013, 10:10:36 PM by nibz »

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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;}
}

Offline Craxx

  • Posts: 266
Re: Mega Menu
« Reply #31 on: September 12, 2013, 09:10:02 AM »
Thx a lot for your answer :-D
When i am at office today i test your code and report.

Best regards
Craxx;-)
Craxx;)

Offline Craxx

  • Posts: 266
Re: Mega Menu
« 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  :mrgreen: :mrgreen: :mrgreen:

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;-)
« Last Edit: September 12, 2013, 09:50:28 PM by Craxx »
Craxx;)

Offline Craxx

  • Posts: 266
Re: Mega Menu
« 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;-)
Craxx;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« Reply #34 on: September 13, 2013, 12:18:31 AM »
Hi craxx,

Can you PM me a link please

Offline Craxx

  • Posts: 266
Re: Mega Menu
« Reply #35 on: September 13, 2013, 09:10:22 AM »
Hy Robin,

i send you a pm ;-)


best regards
Craxx;-)
Craxx;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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!

Offline Craxx

  • Posts: 266
Re: Mega Menu
« 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;-)
Craxx;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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(1SM2_ROOTSM2_ALLSM2_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(1SM2_ROOTSM2_ALLSM2_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">');?>

Offline Craxx

  • Posts: 266
Re: Mega Menu
« 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 :-D


To my logo question again :-D
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? :-D

best regards
Craxx;-)
Craxx;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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
« Last Edit: September 13, 2013, 01:56:06 PM by nibz »

Offline Craxx

  • Posts: 266
Re: Mega Menu
« 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  :-D


thx for your help ;-)

best regards
Craxx;-)


PS: Really really nice work your template !!!!!
Craxx;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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.

Offline Craxx

  • Posts: 266
Re: Mega Menu
« 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)?
Craxx;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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 ;)
« Last Edit: September 13, 2013, 03:29:57 PM by nibz »

Offline nibz

  • Posts: 684
  • Gender: Male
Re: Mega Menu
« 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.

Offline Craxx

  • Posts: 266
Re: Mega Menu
« Reply #47 on: February 06, 2015, 10:05:33 AM »
Hy Robin,

thanks for update ;-)

best regards
Craxx ;-)
Craxx;)

 

postern-length