MULTI RESPONSIVE MENU

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: 660
Joined: Wed Mar 24, 2010 9:07 pm
Location: Sweden

MULTI RESPONSIVE MENU

Post by Patrik iden » Sun Apr 26, 2015 6:05 pm

Hello, i just made this Extension: Multi responsive menu. This is a responsive menu/navigation with on level sub menu.
I must warn you that there are many settings in this Extension (about 165 of them). But I am including 4 WWB projects
with different settings for the Menu as well, so that it may be more convenient for you to set up the Menu just the way you want it to look.

I am making this Extension separat so that any one that are NOT using sub menues can use the Extension that does not have any sub menus (this version is easier to setup).

When i was making this menu i come across a problem. The problem was that when you setup in WWB to have the page centered, WWB will create an conatiner div element and this div is set to 970px in width or what ever width you set the page to be. So having only the Menu (and no other content on the page) then the menu worked fine, but as soon as i put in another object (no mather how small) then i got a scroll bar at the bottom inicating that the menu is to wide. So i hade to come up with a solution. I tested in Firefox Web console to change the width:970px on the container elemet to max-width:970px !important and that did the trik. So i added a value in the css like this: div#container{max-width:970px !important;} but this dident work, the width:970px was still in there and not over ridden buy the !important setting. Now i got confused WHAT!!! So ok what now, ok lets try some jQuery and i came up whit this:

<script>
$(document).ready(function () {
$('#container').attr('id','content');
$("#content").css("cssText", "max-width: 970px !important;");
$("#content").css({ 'position': 'relative', 'margin': '0 auto 0 auto', 'text-align': 'left'});
});
</script>

And finally this did the trik for this problem. There ware many many problems making this Extension but i think finally it's working.
But just so you know this Extension is changing the div#container element to div#content. I talked to WWB Support about doing this and
He do not think it has any significance (viewtopic.php?f=29&t=66598).


Important!!! If you use the menu on a Master page and insert it in a page by using master object, make sure to unchech the use as layer value!!!

The projects files:
You can consider the included WWB project files as Themes for the menu. You can import one of the project files in to your own project
and use the menu as is or change it's settings as you please. The Demo projects reflects the WWB projectsfiles.

The icon for indicating sub menu comes from including the ionicons, you can find the cheatsheet for these icons here: http://ionicons.com/cheatsheet.html use the CSS content value to change the icon.

Tip: If you import the mastermenu page from a project, then you don't have to make a new master page. Just put in a master object in the pages whare you whant to use the menu
(DO NOT FORGET TO TURN OF THE USE AS LAYER IN MASTER OBJECT!!!).

And don't use links on the main menu buttons that have sub menus. And don't have sub menus on the HOME Button/link


I hope this Extension wont be to difficult to use/set up but i did my best. Hope it comes in handy for many WWB users.

Thank you.

Demo sites:
Gradient Rounded: http://test3.fcab.se/responsive_menu_te ... index.html
Flat one: http://test3.fcab.se/responsive_menu_te ... index.html
Flat two: http://test3.fcab.se/responsive_menu_te ... index.html
Flat with no deviders in bigscreen menu: http://test3.fcab.se/responsive_menu_te ... index.html

Update 2015-04-29 v1.0.0.1:

1. Added a option to show active color on main menu when clicking a sub menu link, so that a user can see what main menu category they are in.
The "Use active links" is now named "Use active links and Show active color on maine menu when on sub menu"
and you now have 3 options: Yes=Shows active links, Active_On_Sub=Shows active links and also shows active color on main menu when clicking a sub menu link, No=Shows no Active links.

2. Removed a redundant left border from Mobilemenu first link.

3. Fix: You can now use the synchronize with site manager.

Update 2015-05-03 v1.0.0.1:

1. Fixed a small bug.

Update 2015-05-05 v1.0.0.1:

1. Fixed some small bugs.

Download links: https://mega.nz/#!sgFnWZhK!jBz_Lh7PdueO ... ukHoAY0I-I
Last edited by Patrik iden on Fri Jul 17, 2015 2:31 pm, edited 14 times in total.

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

Re: MULTI RESPONSIVE MENU

Post by andyp » Sun Apr 26, 2015 6:17 pm

Great thanks Patrik.... really good idea to keep the standard RM and the MRM separate.

Have downloaded but dont have time at this immediate moment in time to try this out... but will certainly do that very soon.

Thanks Patrik :)

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

CJS
 
 
Posts: 78
Joined: Sat Jan 09, 2010 3:10 am

Re: MULTI RESPONSIVE MENU

Post by CJS » Mon Apr 27, 2015 12:02 am

Looks great. Thanks Patrik. I'm going to try it next week on a project I need to re do.

basstuuk
 
 
Posts: 46
Joined: Fri Apr 03, 2009 10:55 am
Location: Zoetermeer
Contact:

Re: MULTI RESPONSIVE MENU

Post by basstuuk » Mon Apr 27, 2015 2:48 am

Thank you for all the work that you've had.
greeting Bas :D

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

Re: MULTI RESPONSIVE MENU

Post by Patrik iden » Mon Apr 27, 2015 7:12 pm

Hello, i notic a problem with this menu, well i see it at as problem, but this is how the menu originaly works. The problem is this:

If you have a link on a main menu button that has sub menu, if you click this link it will direct you to this page. So this is as it should be in a menu that do not toggle to a mobile menu that also have the sub menus.
But when you click this link in the mobile menu then you will be directed to the submenu not the to the page that this link is pointing to, and that means that this page is not reachable from the mobile menu,
so you will have to put this link in the drop down menu instead.

I'm also thinking about modifying the activelink.js file/script that is included with the menu (this is the script that makt it possible to show active colors on the active links. The change i'm planing on doing is so when you click a link in a sub menu
the main menu parrent link will also have the active color so that you can see what sub menu link you have clicked so to speak. What do you guys think abot this?

I have made this change in this Demo: http://test3.fcab.se/responsive_menu_te ... index.html

Just click a link in a sub menu and you will se what i mean.

And then you can compare whit this Demo: http://test3.fcab.se/responsive_menu_te ... index.html

And tell me what you think.

Thank you.

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

Re: MULTI RESPONSIVE MENU

Post by TrevH » Tue Apr 28, 2015 3:42 pm

Hi Patrik

Firstly just got the latest version and it' looks brilliant, I love the fact that you have so many options to tweak. Absolutely first class job and I am really happy with it.... well done!!!!

I haven't played with it yet, but reading your post regarding sub menus... I usually have the main menu buttons (that have sub menus) as a sign post or header for those sub menus. What I mean is that in your example demo, the clients, projects and admin wouldn't link to a page as such as we're only interested in getting to the categories below each of these general headings and so they (clients, project & admin buttons) would be set up to link to #. Therefore they are in effect dummies to just drop down to the sub menus.

I hope I've understood and am using the menu system correctly, and maybe some folks do it differently and may want pages for the aforementioned buttons but generally for me, they would be set on my sites as a clickable means to reach the sub menus that are linked to actual pages.

Hope this makes sense and is useful...
Trev

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

Re: MULTI RESPONSIVE MENU

Post by Patrik iden » Tue Apr 28, 2015 3:59 pm

TrevH wrote:Hi Patrik

Firstly just got the latest version and it' looks brilliant, I love the fact that you have so many options to tweak. Absolutely first class job and I am really happy with it.... well done!!!!

I haven't played with it yet, but reading your post regarding sub menus... I usually have the main menu buttons (that have sub menus) as a sign post or header for those sub menus. What I mean is that in your example demo, the clients, projects and admin wouldn't link to a page as such as we're only interested in getting to the categories below each of these general headings and so they (clients, project & admin buttons) would be set up to link to #. Therefore they are in effect dummies to just drop down to the sub menus.

I hope I've understood and am using the menu system correctly, and maybe some folks do it differently and may want pages for the aforementioned buttons but generally for me, they would be set on my sites as a clickable means to reach the sub menus that are linked to actual pages.

Hope this makes sense and is useful...
Trev
Hey TrevH and Thank you. Yes i think this is the only way to this menu, hope that this is satisfactory for every one.

What do you think of the demo: http://test3.fcab.se/responsive_menu_te ... weden.html
In this demo i have changed the activelink.js script so that when clicking a sub menu link, this link as well as the main menu link will have the active/current color set to them.
This way a user can see what main menu item the sub page belongs to.

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

Re: MULTI RESPONSIVE MENU

Post by TrevH » Tue Apr 28, 2015 4:54 pm

Hi patrik,

Just testing the demo on my main chrome browser using "Mobile/RWD Tester" and the menu doesn't fold into a hamburger style, the buttons instead drop below each other to fit the screen. If this is intentional then I have to say I prefer the old hamburger menu because as the menu folds it takes up a great deal of space on the mobile screen. It does however work on my android phone.

I like the MRM that I recently downloaded, but I'll need some time to better test it out... perhaps over the weekend. I think you have created a menu that really looks like it sets a high benchmark.

Many thanks
Trev :D

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

Re: MULTI RESPONSIVE MENU

Post by Patrik iden » Tue Apr 28, 2015 5:24 pm

TrevH wrote:Hi patrik,

Just testing the demo on my main chrome browser using "Mobile/RWD Tester" and the menu doesn't fold into a hamburger style, the buttons instead drop below each other to fit the screen. If this is intentional then I have to say I prefer the old hamburger menu because as the menu folds it takes up a great deal of space on the mobile screen. It does however work on my android phone.

I like the MRM that I recently downloaded, but I'll need some time to better test it out... perhaps over the weekend. I think you have created a menu that really looks like it sets a high benchmark.

Many thanks
Trev :D
This is not intended, but i can't reproduce this, works for me in Chrom and in FF using Mobile/RWD Tester. Have you checked the other demos in Mobile/RWD?
Thank you.

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

Re: MULTI RESPONSIVE MENU

Post by TrevH » Wed Apr 29, 2015 9:41 am

Hi Patrik,

Just tried the last demo again, must have been my browser as it now works fine (as do all the others)! :?

Great job!!!!!

mustafa.gramocelji
 
 
Posts: 98
Joined: Sat Jan 10, 2015 10:07 pm

Re: MULTI RESPONSIVE MENU

Post by mustafa.gramocelji » Wed Apr 29, 2015 11:30 am

Download link not work anymore :(

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

Re: MULTI RESPONSIVE MENU

Post by Patrik iden » Wed Apr 29, 2015 11:45 am

mustafa.gramocelji wrote:Download link not work anymore :(
Sorry about that. Try it now. Also made an small update to v1.0.0.1

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

Re: MULTI RESPONSIVE MENU

Post by TrevH » Wed Apr 29, 2015 12:13 pm

Hi Patrik,

Just playing around with menu, and unfortunately found a problem...

I opened the flat2 wbs demo project. I then added a page to the site & saved project.

I found that when I enter the very first menu setting (where one adds the pages to the menu) that there was a "synchronize with site manager" box. So I ticked it hoping it would pick up the new page... however what happened was that none of the buttons then had any text on them when put into the browser. When I hover over each button I can see that each blank button does relate to a page from looking in the status bar on the browser, and the menu did include the new page, but as I said all the buttons have no text whatsoever on them. This applies to both big screen and mobile. If I go back into the menu and untick the "synchronize with site manager" box then the text on each button then reappears. I then would have to add every page manually.

Is this fixable as the synchronize option is a great time saver?

many thanks
Trev.

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

Re: MULTI RESPONSIVE MENU

Post by Patrik iden » Wed Apr 29, 2015 1:02 pm

TrevH wrote:Hi Patrik,

Just playing around with menu, and unfortunately found a problem...

I opened the flat2 wbs demo project. I then added a page to the site & saved project.

I found that when I enter the very first menu setting (where one adds the pages to the menu) that there was a "synchronize with site manager" box. So I ticked it hoping it would pick up the new page... however what happened was that none of the buttons then had any text on them when put into the browser. When I hover over each button I can see that each blank button does relate to a page from looking in the status bar on the browser, and the menu did include the new page, but as I said all the buttons have no text whatsoever on them. This applies to both big screen and mobile. If I go back into the menu and untick the "synchronize with site manager" box then the text on each button then reappears. I then would have to add every page manually.

Is this fixable as the synchronize option is a great time saver?

many thanks
Trev.
Hello, i will have to look in to this. I don't realy know how the synchronize with site manager works (what code it adds etc). I have sent a question to support about this.

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

Re: MULTI RESPONSIVE MENU

Post by TrevH » Wed Apr 29, 2015 4:22 pm

Hi Patrik,

Still testing the menu and I think I have found a problem on the mobile, the back button won't return me to it's parent page from a submenu page... did you say you had recently altered the .js file? if so then this new function may be the issue.

To explain, When I go to a sub page and hit the back button I am still stuck on the subpage, and cannot get back to the parent page (as one can do with the big screen version).

I am using your demo project as before "flat 2" untouched in the mobile/rwd tester. I start on the home page... click "clients", the drop down menu appears with 3 items: back, ikea, fastec but the page title is still "home"... in other words the submenus appear for the selected page but you're not taken to the main page for those submenus... one cannot therefore get to the page "clients" as one can do in the big screen version.

As per a previous post it may be an idea to link category pages to just an external link "#" to create dummy buttons when one just wants to head the sub menus, and although your .js workaround does a similar thing, the problem is with the .js workaround is that if one puts subpages under an important page like the main home page, users cannot get back to the home page.

Could I suggest reverting the .js script back and testing using the "#" link method to create dummy buttons for menu header.

hope this is helpful
Trev.

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests