Responsive Menu Extension

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!
Post Reply
User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Thu Apr 16, 2015 10:42 am

TrevH, i'm trying to add the border function to the menu now. Do you think it's needed to have borders (with thickness / color / radius) function on the mobile mode of the menu. What do you think?
I will definitely add this to the biggscreen mode of the menu and also the gradient background settings.

When it comes to adding dropdown/sub menus to the menu, this is another mather, this will take alot of time, so i have to get back to this when i have the time.

TrevH
 
 
Posts: 38
Joined: Wed Nov 26, 2014 3:31 pm
Location: UK
Contact:

Re: Responsive Menu Extension

Post by TrevH » Thu Apr 16, 2015 1:15 pm

Hi Patrik,

Perhaps there's not so much the need for borders / radius on the mobile version... gradients would be very nice though. If the mobile menu was capable of actual spacing between the buttons (revealing background between them) then such things could look good... it's just whatever is most practical and best for you time-wise.

I was looking at the original coder's site and someone in the comments section had a solution for the drop down sub menus... this is something that I am glad you'll look at when you have the time.

I cannot thank you enough for doing this responsive menu extension as I'd posted this on my wish list a while back, and it's what (in my opinion) the program was crying out for ever since it became capable of responsive design. Really looking forward to whatever you decide to add to it, I think it will be the first choice menu to use for many people.

Many thanks...
Trev :D

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Thu Apr 16, 2015 6:12 pm

Hello i'v just made this update. Check it out and let me know of any problems please.

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

i also changed some other standard settings.

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

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

andyp
 
 
Posts: 247
Joined: Fri Aug 08, 2014 8:56 am
Location: Brighton UK
Contact:

Re: Responsive Menu Extension

Post by andyp » Thu Apr 16, 2015 7:18 pm

........... and once again thank you Patrik.... your generosity in providing this free extension is very much appreciated.... :D
Making mistakes....and still learning as I go along.. and very grateful to those who know far more than me... :)
http://www.apgraphx.co.uk

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Thu Apr 16, 2015 7:34 pm

andyp wrote:........... and once again thank you Patrik.... your generosity in providing this free extension is very much appreciated.... :D
Thank you, and no problem. Free is the way to go :)

TrevH
 
 
Posts: 38
Joined: Wed Nov 26, 2014 3:31 pm
Location: UK
Contact:

Re: Responsive Menu Extension

Post by TrevH » Fri Apr 17, 2015 1:39 pm

Hi Patrik,

Just installed 1.0.0.5 version... new additions look really great! Thank you!!!! :D

I noticed on your demo page that the home page is shown as being the active... this I presume would change if the demo had other pages, so when arriving at say page 3, then "page 3" button would look different on the menu.

Upon testing, (using a seven page empty testing site) I am finding that when changing the active color settings within the properties box nothing happens when previewing in the browser. I couldn't seem to find any option within the properties for universally switching the "active" settings on or off. So I then presumed that by changing the active colors to be different from the other settings meant that "active" would then automatically function.

But so far, the only way I can get a menu button to look as if it is active is if I open the first property box entitled "menu" and then select a particular page to be active via the "yes or no" / "selected menu?". However what happens is that only that particular page button is then shown as appearing to be active permanently, regardless of whatever other page I then click on. This happens on both the big screen and the mobile version.

Perhaps I simply missing something maybe, but I thought I'd ask?

Many thanks...
Trev

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Fri Apr 17, 2015 3:24 pm

Hello, you will have to have a separat menu with unique id on every page. Just copy the menu you have in eg, index page to another page and giv this menu another id. Then in the menu settings on second page you just change the the link to the second page as current and the link to index to not current. Try this and get back to me.

Thank you.

Click the HOME and the CLIENTS Buttons/Links on the Demo pages.

Demo1: http://test3.fcab.se/myextensions/respo ... /menu.html
Demo2: http://test3.fcab.se/myextensions/respo ... /menu.html

TrevH
 
 
Posts: 38
Joined: Wed Nov 26, 2014 3:31 pm
Location: UK
Contact:

Re: Responsive Menu Extension

Post by TrevH » Fri Apr 17, 2015 4:29 pm

Hi Patrik,

Thanks for your reply, yes that would certainly do it for sure... I think to use a separate menu per page might not be so practical because as the site grows each menu would then need updating every time just one page was added...

I tend to make just one menu on a master page and then clone content pages from another layout so that just the content needs changing on each new page, then I just update the one master page menu to update every page's menu in one go.

To do it with separate menus on each page could take ages in update time instead of just updating a single master page menu, especially if it was a large site. Is there perhaps a java function somewhere within the original script that could be used?

http://stackoverflow.com/questions/3234 ... ndary-link
http://jsbin.com/okupe4/2#tab-1

You are doing an absolutely brilliant job, hope the links are of some use, but I don't know very much about code.

Many thanks...
Trev

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Fri Apr 17, 2015 7:39 pm

TrevH wrote:Hi Patrik,

Thanks for your reply, yes that would certainly do it for sure... I think to use a separate menu per page might not be so practical because as the site grows each menu would then need updating every time just one page was added...

I tend to make just one menu on a master page and then clone content pages from another layout so that just the content needs changing on each new page, then I just update the one master page menu to update every page's menu in one go.

To do it with separate menus on each page could take ages in update time instead of just updating a single master page menu, especially if it was a large site. Is there perhaps a java function somewhere within the original script that could be used?

http://stackoverflow.com/questions/3234 ... ndary-link
http://jsbin.com/okupe4/2#tab-1

You are doing an absolutely brilliant job, hope the links are of some use, but I don't know very much about code.

Many thanks...
Trev
Hello, i'l take a look at the links.

In the original menu script there is not any code do display an active link, i added this my self.

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Sat Apr 18, 2015 5:08 am

What menu are you using, if you can use it on a master page and set separat color for active/current links? Can you explain more about I tend to make just one menu on a master page and then clone...

Thank you.

TrevH
 
 
Posts: 38
Joined: Wed Nov 26, 2014 3:31 pm
Location: UK
Contact:

Re: Responsive Menu Extension

Post by TrevH » Sat Apr 18, 2015 9:20 am

Hi Patrik,

Prior to your new responsive menu, I used 2 css menus on the master page, one for big screen (horizontal) and one for mobile (vertical) with the screen sizes set accordingly to show or hide one or the other, so technically I suppose I had to update just 2 menus but still only on the one master page... easy & quick to do. As I clone new pages from a previous page, it automatically picks up the master page elements.

Sorry if I gave the wrong impression, but I didn't actually say that there was any "active" element settings to these existing menus I used previously, my way to get around it was to simply add the page title heading on each page so the visitor knew exactly where they were.... I think you are bringing something very new with your menu which when completed with sub menus etc will be a game changer.

I wish I could be more help, the last software I used could do the active link/master page but I ditched it as it lacked so much of what WB10 can do.

Whilst I am not technically savvy enough to know if it is helping you or not, maybe the idea of using a jQuery snippet to check the current page URL and compare it with the URLs in the menu and if they match it will then add a class to the menu item... hence an active menu I saw this http://www.paulund.co.uk/use-jquery-to- ... -menu-item (the code is at the bottom of this link page for catching both absolute and relative links).

I have uploaded a zip file for you with a fully working css responsive menu complete with 2 levels of sub menus... maybe you can adapt the css for your extension in terms of being able to add sub menus.

http://bit.ly/1b7IByX

Hope this is helps in some way...
Trev.

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Sat Apr 18, 2015 3:04 pm

OK, TrevH. Check it out now and get back to me please. Thank you.

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.

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.

Demo: Gradiant and borders: http://test3.fcab.se/myextensions/respo ... /menu.html You can try clicking on all the links now.

Download Version 2.0.0.0: https://dl.dropboxusercontent.com/u/318 ... e_menu.rar
Last edited by Patrik iden on Sat Apr 18, 2015 4:02 pm, edited 1 time in total.

TrevH
 
 
Posts: 38
Joined: Wed Nov 26, 2014 3:31 pm
Location: UK
Contact:

Re: Responsive Menu Extension

Post by TrevH » Sat Apr 18, 2015 3:38 pm

Hi Patrik...

Wow, superb job!!!

It works absolutely great, thank you!!!

As I said I am no coder as such, but I have up loaded a zip link with fully working sub menu code in for you: http://bit.ly/1b7IByX (consisting of one html page, a css & .js file). It maybe of some use for you in terms of coding the jquery sub menus.

Hope it's helpful, and once again my sincere thanks, this menu you have made is fantastic and I really didn't expect it so soon!!!

All the best
Trev :D

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Sat Apr 18, 2015 3:54 pm

Hello, thank's for the sub menu code, i'l take a look at in soon. And well yes i got the active/current color thing workin, but it took me all night to figuer it out. But now it semes to work and i will make one minor update later to day (nothing major).

User avatar
Patrik iden
 
 
Posts: 538
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

Re: Responsive Menu Extension

Post by Patrik iden » Sat Apr 18, 2015 4:11 pm

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. So please download againe.

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

Post Reply