Responsive Menu Extension

Patrik iden · Post by **Patrik iden** » Wed Jan 28, 2015 9:53 pm

I have now made another Extension (Multi responsive menu, this menu has one level dropdown/sub menu. You can find it here:
http://www.wysiwygwebbuilder.com/forum/ ... 42&t=66626

Hello, i have made this responsive navigation "Responsive Menu". I havent tested it to much, so if any one whant to help me and sugest improvments that will be great. I include all the sorce and project files so that anyone can make changes/improvments. Thank you.

If any one make any changes to this Extension please share and rename the Extension file to: responsive_menu_your_wwb_forum_username.rar

Original script: Sergio Vitov / http://responsivemobilemenu.com/en/

I also used the Extension: Lava-Lamp Style Navigation Menu by Erkan OZ to get started. Thank you.

Demo: None Gradiant Menu: http://test3.fcab.se/myextensions/respo ... /menu.html

Demo: Gradiant and borders: http://test3.fcab.se/myextensions/respo ... /menu.html

Update version 2.0.0.0, please download againe. You must use WWB version 10.3+ for the menu to work!

Updates: Before 2015-03-03

1. I removed the category "General" and moved those propertys to the Menu category.
2. In the Menu category i also added the possibility to remove the jQuery 1.11.1 script (this script can interfere with the WWB slidshow script).
3. I added a Category "Visibility" in here you can choose to hide the Menu att specific Media screen sizes. You can set (min or max Media screen width, and you can set the Media screen width, and you have to setup to hide or to show the menu).

Updates: 2015-03-04

1. You can now have the menu fixed to top even if you scroll the page.
2. You can now have php code in the menu (eg, if you want to get the menu link text from a php file you can have this: <?echo utf8_encode ($lang['MENU_HOME']); ?>
3. The menu code will now end up just befor the </body> tag but outside of the container element, so it's no longer between the <head></head> tag.

Update: 2015-03-19

1. Now you can choose not to show text shadows. I added a setting in: Properties/Menu/Use text shadow, here you can choose Yes or No. No will remove the text shadow from all texts in the menu. Yes will put it back. It wont mater if you have setup text shadow in the other settings, this option (No) will override them. If you set it to Yes the text shadow settings you have setup for the texts will be in effect again.

Update: 2015-03-25

1. You can now change position (from top) for the menu.

Update: 2015-04-16

1. Gradient background colors.
2. Border size and radius on the links/button in the bigscreen mode menu. I did not add this function for the mobile menu mode.
3. In mobile menu mode. I'v added a function to remove the top/bottom/(left/right deviders) borders on the active link. I think it looks better to remove these if you have an outstanding color.
4. I have also added a function to controll when the menu should toggle to the mobile menu. If you drag your window and look at when the menu toggles to the mobile menu you will see-
that there are some gaps on the left/right side of the bigscreen menu. It is this gap you now have some controll over. Default settings in the script is 1.05 try changing it to eg, 1.0

Update: 2015-04-18

1. I have added function to set different text color on active/current link.

2. Finally

You can now have the menu in an master page, then just use master object to insert the menu from master page.
Now you can just make changes to the menu in the master page and these changes will be updated in all other pages.
The nice thing about this menu is that you now can choose to indicate Active/Current page by setting up a background color just for this directly in the master page.
If you do not want any Active/Current indicator color on your links/buttons you can turn this function of.

3. I just made a little change: Now you can controll to remove separatly the top and bottom devider/border on active links in the mobile menu (in mobile mode). I made this update because in some cases it will look better not to remove eg, the bottom border and in some it will, depends on the colors you are using.

If there is some one out here that are good at making menus like this, please let me know. Could use some help to add sublinks/dropdown menu.

Thank you.

Download Version 2.0.0.0: https://mega.nz/#!pwEVwSZa!nY4w4i2EFQTi ... AqHFBubbCY

haakoo · Post by **haakoo** » Wed Jan 28, 2015 10:42 pm

Nice,thanks for sharing

Hans

electrochrisso · Post by **electrochrisso** » Fri Jan 30, 2015 12:11 am

Thanks from me too.

Chris

Patrik iden · Post by **Patrik iden** » Fri Jan 30, 2015 2:37 am

haakoo wrote:Nice,thanks for sharing

Hans

Minor changes now in version 1.0.0.1, please download againe.

Patrik iden · Post by **Patrik iden** » Fri Jan 30, 2015 2:38 am

electrochrisso wrote: Thanks from me too.

Chris

Minor changes now in version 1.0.0.1, please download againe.

electrochrisso · Post by **electrochrisso** » Mon Feb 02, 2015 2:15 am

Patrik iden wrote:
electrochrisso wrote: Thanks from me too.

Chris
Minor changes now in version 1.0.0.1, please download againe.

Done.

miguelss · Post by **miguelss** » Mon Feb 02, 2015 8:57 am

Hi Patrik iden!

Thanks for your time and effort, and of course...for sharing!
Cheers!

M.

andyp · Post by **andyp** » Tue Feb 03, 2015 9:16 pm

This is really good for people like myself who are newbies to Responsive Design.... so thanks very much.

At the moment I have one question:

Is it possible to remove the text shadow option and if so how can this be achieved?

Thanks
AP

Patrik iden · Post by **Patrik iden** » Tue Feb 03, 2015 11:58 pm

andyp wrote:This is really good for people like myself who are newbies to Responsive Design.... so thanks very much.

At the moment I have one question:

Is it possible to remove the text shadow option and if so how can this be achieved?

Thanks
AP

Hello in version 1.0.0.2 you can remove the text shadow. Please download againe: https://dl.dropboxusercontent.com/u/318 ... e_menu.rar

andyp · Post by **andyp** » Wed Feb 04, 2015 12:05 am

Great.. thanks very much

andyp · Post by **andyp** » Wed Feb 04, 2015 12:45 am

I dont think that the 'menu hover' action is functioning?

Patrik iden · Post by **Patrik iden** » Wed Feb 04, 2015 2:24 am

andyp wrote:I dont think that the 'menu hover' action is functioning?

It works for me, have you publiched the page so i can take a look?

andyp · Post by **andyp** » Wed Feb 04, 2015 11:18 am

Thanks for the reply... no not yet... I am just experimenting with RD at the moment... although I will upload something later today.

Thanks

Patrik iden · Post by **Patrik iden** » Sun Feb 08, 2015 2:14 am

Updates:

1. I removed the category "General" and moved those propertys to the Menu category.
2. In the Menu category i also added the possibility to remove the jQuery 1.11.1 script (this script can interfere with the WWB slidshow script).
3. I added a Category "Visibility" in here you can choose to hide the Menu att specific Media screen sizes. You can set (min or max Media screen width, and you can set the Media screen width, and you have to setup to hide or to show the menu).

Download: https://dl.dropboxusercontent.com/u/318 ... e_menu.rar

introflare · Post by **introflare** » Sun Feb 08, 2015 5:34 pm

anyone have a link to the menu you are talking about Lava-Lamp Style Navigation Menu by Erkan OZ

Patrik iden · Post by **Patrik iden** » Sun Feb 08, 2015 6:36 pm

introflare wrote:anyone have a link to the menu you are talking about Lava-Lamp Style Navigation Menu by Erkan OZ

viewtopic.php?f=42&t=33889

mindentezzel · Post by **mindentezzel** » Sun Feb 08, 2015 7:39 pm

Thank you for this great menu.
I have a stupid question: Is it possible to give a bookmark instead of page link etc.?

T.

mindentezzel · Post by **mindentezzel** » Sun Feb 15, 2015 2:27 am

Does somebody know how to put bookmark in this menu. If you put # in the menu the menu appears two time but the link does not work. How does it work with bookmark?

stamjoe · Post by **stamjoe** » Wed Feb 18, 2015 10:31 am

Hello Patrik
very usefull extension.
Is it possible to use it in an non responsible webpage?
Thanks
Joe

Patrik iden · Post by **Patrik iden** » Wed Feb 18, 2015 1:43 pm

stamjoe wrote:Hello Patrik
very usefull extension.
Is it possible to use it in an non responsible webpage?
Thanks
Joe

Well, you dont have to use Breakpoints if thats what you mean? The way this menu works is: When the Links on the normal view do no longet fitt in the screen, then the (Mobile/Dropdown menu) will be shown.

Patrik iden · Post by **Patrik iden** » Wed Feb 18, 2015 2:01 pm

mindentezzel wrote:Does somebody know how to put bookmark in this menu. If you put # in the menu the menu appears two time but the link does not work. How does it work with bookmark?

If you put # in the menu the menu appears two time but the link does not work. If you have moore than one menu eg. if you are using breakpoints, make shore you have the same values in all menus.

In the Extension bilder there is no option for bookmarks, but if you'd like i maybe can change the URL option to just be a input option, this way you can put in anything you'd like eg, ./index.html/bookmark1.

stamjoe · Post by **stamjoe** » Wed Feb 18, 2015 3:12 pm

Patrik iden wrote:
stamjoe wrote:Hello Patrik
very usefull extension.
Is it possible to use it in an non responsible webpage?
Thanks
Joe
Well, you dont have to use Breakpoints if thats what you mean? The way this menu works is: When the Links on the normal view do no longet fitt in the screen, then the (Mobile/Dropdown menu) will be shown.

Thanks Patrik, i will give it a try!!!!

mark_borman · Post by **mark_borman** » Fri Feb 20, 2015 11:06 pm

A slightly different menu.
!Test version http://www.wysiwygwebbuilder10.pl/menu_ ... index.html
IE WinXP-not ,Carusel-problem please 
Orginal http://slicknav.com/css3demo/

Patrik iden · Post by **Patrik iden** » Fri Feb 20, 2015 11:43 pm

mark_borman wrote:A slightly different menu.
!Test version http://www.wysiwygwebbuilder10.pl/menu_ ... index.html
IE WinXP-not ,Carusel-problem please 
Orginal http://slicknav.com/css3demo/

What exactly is your question/problem?

naftalina · Post by **naftalina** » Tue Feb 24, 2015 5:16 pm

thanks

andyp · Post by **andyp** » Tue Mar 10, 2015 11:05 pm

Hi

Can you remind me how to remove the text shadow?

I cant see how to deactivate it.. have latest version.....

Thanks
AndyP

Patrik iden · Post by **Patrik iden** » Wed Mar 11, 2015 7:38 am

andyp wrote:Hi

Can you remind me how to remove the text shadow?

I cant see how to deactivate it.. have latest version.....

Thanks
AndyP

Can you just use the same color on the text shadow as the background color of menu?

andyp · Post by **andyp** » Wed Mar 11, 2015 9:04 am

Sure... but I thought at one time the facility to remove text shadow was added?

I recently removed all extension from WB... and then downloaded and reinstalled RME...

Thanks

AndyP

Patrik iden · Post by **Patrik iden** » Wed Mar 11, 2015 9:22 am

andyp wrote:Sure... but I thought at one time the facility to remove text shadow was added?

I recently removed all extension from WB... and then downloaded and reinstalled RME...

Thanks

AndyP

Yes i think that setting where deletet some how, but it works by setting the same color as background color right?

andyp · Post by **andyp** » Wed Mar 11, 2015 8:23 pm

Yes... it does work in Firefox... but a little odd in my IE9

Also.... using the 'Remove Java script' for the slide show causes the menu to double up on size... duplicated.... and the slide show does not work?

The example above http://laser4you.co.uk/test4/

Without using the 'Remove Java script it looks like this http://laser4you.co.uk/test3

See video at: http://www.apgraphx.co.uk/menu

First preview set to: Use Java Script - Slide Show not working

Second preview set to: Use Java Script: Jquery script removed - Causes double up on menu

Thanks
Andyp

Patrik iden · Post by **Patrik iden** » Wed Mar 11, 2015 9:37 pm

You should only set the Use Javascript to no if you are using a slidshow on the same page. If you set the Use Javascript to no and do not use slideshow then the menu will double up.

So if you have the Slideshow the set Use Javascript to no.

If you do not have Slidshow then set Use Javascript to yes.

And by looking at your video it seems that you are not using the latest update?

Updates: 2015-03-04

1. You can now have the menu fixed to top even if you scroll the page.
2. You can now have php code in the menu (eg, if you want to get the menu link text from a php file you can have this: <?echo utf8_encode ($lang['MENU_HOME']); ?>
3. The menu code will now end up just befor the </body> tag but outside of the container element, so it's no longer between the <head></head> tag.

Download ver: 1.0.0.4 here: https://dl.dropboxusercontent.com/u/318 ... e_menu.rar

andyp · Post by **andyp** » Thu Mar 12, 2015 1:14 am

Well... when I redownloaded the file earlier today I downloaded from a link in a previous post in the this thread.. so I have no idea how I ended up with the wrong version

I have had a quick look at it appears to be ok now..... however... I will say that using the same colour for text shadow as per the background really looks odd in IE

Did you remove the facility to disable text shadow as per a previous version???

Will look more into this later tonight.....

Thanks

AndyP

Patrik iden · Post by **Patrik iden** » Thu Mar 12, 2015 4:00 pm

andyp wrote:Well... when I redownloaded the file earlier today I downloaded from a link in a previous post in the this thread.. so I have no idea how I ended up with the wrong version

I have had a quick look at it appears to be ok now..... however... I will say that using the same colour for text shadow as per the background really looks odd in IE

Did you remove the facility to disable text shadow as per a previous version???

Will look more into this later tonight.....

Thanks

AndyP

Looks fine to me in IE.

andyp · Post by **andyp** » Sat Mar 14, 2015 11:04 pm

Patrik iden wrote:
In the Extension bilder there is no option for bookmarks, but if you'd like i maybe can change the URL option to just be a input option, this way you can put in anything you'd like eg, ./index.html/bookmark1.

This would be very useful...

Thanks
AndyP

Patrik iden · Post by **Patrik iden** » Sun Mar 15, 2015 12:09 am

andyp wrote:
Patrik iden wrote:
In the Extension bilder there is no option for bookmarks, but if you'd like i maybe can change the URL option to just be a input option, this way you can put in anything you'd like eg, ./index.html/bookmark1.

This would be very useful...

Thanks
AndyP

But this is not necessary, you simply use external web address and make the link like this: ./you page#your bookmark or ./your page#wb_your id

andyp · Post by **andyp** » Sun Mar 15, 2015 10:00 am

Ok...

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 1:26 pm

Hello, are you using the most current update of WWB 10.3.2?
Are you using the most current update of the Responsive mnu 1.0.0.4?

naftalina · Post by **naftalina** » Wed Mar 18, 2015 2:40 pm

The Slide Show does not work when the menu is in the project?!

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 2:42 pm

naftalina wrote:The Slide Show does not work when the menu is in the project?!

To bouth of you. Turn of the javascript. If this dies not work, maybe some other java script/extension is in the way.

Demo page: http://test3.fcab.se/myextensions/respo ... /menu.html

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 3:06 pm

madtim wrote:I've turned off the javascript with the menu now like this http://www.madwebdesign.co.uk/2015proof ... eader.html and still not working on any pages. There is no content in the slideshow as yet and it was working previously with no problem before both updates.

Turn on the java script again, save project and Can you send me the project?

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 3:28 pm

madtim wrote:
Patrik iden wrote:
madtim wrote:I've turned off the javascript with the menu now like this http://www.madwebdesign.co.uk/2015proof ... eader.html and still not working on any pages. There is no content in the slideshow as yet and it was working previously with no problem before both updates.
Turn on the java script again, save project and Can you send me the project?
No problem the zip is 10.5mb complete, pm me your email and I'll send it over now for you. Thank you for taking the time.

Email address removed.

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 3:52 pm

Hi, I'm not reciving the mail. Can you please remove my email from the quote in you last post?

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 4:29 pm

madtim wrote:
Patrik iden wrote:Hi, I'm not reciving the mail. Can you please remove my email from the quote in you last post?
Checked on my server, the first didn't go through so I split the files into two zips and it says they have gone through, fingers crossed.

OK i got them, i'l take a look now.

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 6:29 pm

OK, it look's like there is a problem using Master fram. The only way i can think of to fix this is to make another masterpage eg, masters/menu and cut the menu from the masters/header page an past in place in the new masters/menu page.
Then on every page at the top you put in an Master object and use the masters/menu.

Or you maybe you can, move down all content in every page and use the masters/header page as an Master object on every page?.

Sorry i cant think of enything better.

Hope it works out for you. Just contact me if you have any more questions.

Regards

//Patrik.

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 6:58 pm

Another option would be to put the header and footer content inside the mainpage and then on every page eg, aboutus, you cut the current content and then you put in an Master object and use the mainpage as Master object, then you paste the content you cut from the aboutus page (and you will have to move this content down a bit). Now you can even remove the header and footer page.

Try all the option i given you and find out what option works best for you.

Have a nice evening and please get back to me with the result.

Regards.

//Patrik.

andyp · Post by **andyp** » Wed Mar 18, 2015 8:11 pm

Just to say to Patrik.... having read these last posts.... you are a great guy for helping people out...

Patrik iden · Post by **Patrik iden** » Wed Mar 18, 2015 8:31 pm

andyp wrote:Just to say to Patrik.... having read these last posts.... you are a great guy for helping people out...

Thank you, I appreciate it

andyp · Post by **andyp** » Wed Mar 18, 2015 10:41 pm

We appreciate your efforts

andyp · Post by **andyp** » Thu Mar 19, 2015 6:38 pm

Hi Patrik...

On the subject of the text shadow... which once had the ability to disable... and now the only way to hide the text shadow is to set it to the same colour background....

What actually happens with this is that the shadow (set to the the same background colour) still shows when the hover function is used..

Meaning... black text on white backgound... set shadow to white to loose the shadow effect... have a different colour for hover....as you would... white set shadow is seen on hover

Is there any way around this because personally I am not at all keen on using shadow effects on text.....

Thanks

AndyP

Patrik iden · Post by **Patrik iden** » Thu Mar 19, 2015 7:55 pm

Hello, Ok for now use this: Put in an HTML box and pick the type Between <head></head> tag and past in this code:

Code: Select all

<style>
.rmm.custom .rmm-toggled-title, .rmm.custom .rmm-main-list li a, #current_yes a
{
text-shadow: none !important;
}
</style>