Responsive Menu Extension

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>

Patrik iden · Post by **Patrik iden** » Thu Mar 19, 2015 10:23 pm

Hello, i have updated the Extension. 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.

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

Thank you.

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

Patrik... you are an absolute star... thank you!

AndyP

ddaugherty · Post by **ddaugherty** » Tue Mar 24, 2015 2:05 am

Installed your responsive menu. Seems really nice. Two questions:
1) Is there any instructions for the menu extension?

2) How do you re-position the menu to another location besides the very top of the page?

Patrik iden · Post by **Patrik iden** » Tue Mar 24, 2015 11:26 am

ddaugherty wrote:Installed your responsive menu. Seems really nice. Two questions:
1) Is there any instructions for the menu extension?

2) How do you re-position the menu to another location besides the very top of the page?

No instructions, exepte the remarks in the Extension Descriptions.

You cant.

Patrik iden · Post by **Patrik iden** » Tue Mar 24, 2015 5:34 pm

Hello, you can place the menu down from top with this code:

Code: Select all

<style>
.rmm
{
top: 298px;
}
</style>

Just make an HTMl box/object and place the code between <head></head> tags. And change the top px (298px) value.

Patrik iden · Post by **Patrik iden** » Wed Mar 25, 2015 6:02 pm

New update (version 1.0.0.5), now you can set position (from top) for the menu.

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

kenderuiter · Post by **kenderuiter** » Thu Apr 09, 2015 8:26 pm

I am sorry for being totally new to responsive design in general and the responsive drop down menu in particular so maybe this is a stupid question...
...but i tested the responsive drop down menu function on my Samsung sgs4 mobile phone and up till now it doesn't seem to work (meaning i do not get the 'hamburger' menu button so basically it looks like it does not switch to the 320 breakpoint definition). If I change the size of my webbrowser on my pc however, the menu works just fine

For reference, I stored my testpage on www.we-nail-it.nl/new

I would be much obliged if someone could tell me what i am doing wrong here

Kind regards,
Ken de Ruiter

Patrik iden · Post by **Patrik iden** » Thu Apr 09, 2015 10:43 pm

kenderuiter. You have posted this in the wrong place. This is not the WWB Responsive menu. This is my own Responsive menu. You should post this here: viewforum.php?f=29
Or if you want to report a bug then post here: viewforum.php?f=24
I have alredy reported the bug that i cant see the Hamburger button.
If you want to try out my Extension then you can download it from here: viewtopic.php?f=42&t=65322

TrevH · Post by **TrevH** » Wed Apr 15, 2015 9:32 am

Hi patrik,

Firstly, a big thank you for making such a superb extension it works really well, and you have done an excellent and impressive job.

I haven't a clue in terms of developing extensions, but I would like to ask whether you'd consider it possible to add drop down sub menus to the extension, and style features for borders (with thickness / color / radius) maybe add gradients in the backgrounds of the navbar...

By the way, I wouldn't mind paying for the extra features... I've been looking for something that can make responsive menus like a well known responsive template design program that I previously used, and yours comes very close to their levels of versatility.

Many thanks...

Trev

Patrik iden · Post by **Patrik iden** » Wed Apr 15, 2015 1:45 pm

TrevH wrote:Hi patrik,

Firstly, a big thank you for making such a superb extension it works really well, and you have done an excellent and impressive job.

I haven't a clue in terms of developing extensions, but I would like to ask whether you'd consider it possible to add drop down sub menus to the extension, and style features for borders (with thickness / color / radius) maybe add gradients in the backgrounds of the navbar...

By the way, I wouldn't mind paying for the extra features... I've been looking for something that can make responsive menus like a well known responsive template design program that I previously used, and yours comes very close to their levels of versatility.

Many thanks...

Trev

Thank you. I plan to make this, but right now i do not have the time. Maybe i will upgrade step by step and add some things like gradients and border settings as i go along.

Patrik iden · 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 · 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

Patrik iden · 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 · 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....

Patrik iden · 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....

Thank you, and no problem. Free is the way to go

TrevH · 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!!!!

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

Patrik iden · 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 · 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

Patrik iden · 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.

Patrik iden · 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 · 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.

Patrik iden · 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

TrevH · 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

Patrik iden · 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).

Patrik iden · 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

TrevH · Post by **TrevH** » Sat Apr 18, 2015 4:21 pm

Hi Patrik,

Thank you, just got your latest version and it's looking great! Nice touch with dividers...

Trev

Patrik iden · Post by **Patrik iden** » Sat Apr 18, 2015 8:07 pm

Hello,Thank you. I have tested to add sub menus to this but i think i'm not good enough coder to do this. So if some one else think he/she can do this, please do.

Thank you all.

//Patrik.

andyp · Post by **andyp** » Sat Apr 18, 2015 9:49 pm

Haven't had time to try this out Patrik.....but thanks again... and to think that you were up all night working things out

Patrik iden · Post by **Patrik iden** » Sat Apr 25, 2015 1:12 am

Preview of my new Extension: Multi responsive menu. This is a responsive menu with one sub menu level. You can make alot of changes in the Extension settings like: Borders/Dividers, Backgroud colors, Gradient colors, Active link colors, Change all font settings etc. I will make another demo later on a more stylish version this one is only to show as many settings as possible. But i want some peoples to test this menu first so i can fix the buggs before making a dedicated post to this Extension.

Org script: http://responsivemultimenu.com/

So here you go: http://test3.fcab.se/responsive_menu_te ... index.html

Thank you.

TrevH · Post by **TrevH** » Sat Apr 25, 2015 8:50 am

Hi Patrik,

Thank you for doing all this work... I just tested your menu on the demo and cannot find anything functionally wrong with it at all.... it seems to me to be working really great!!!!

I really like the way the sub menus are vertical drop downs (like accordion style) and also that you have thoughtfully provided a very neat "back" button, and that all the "active" page highlights work fine on all the pages.

The only thing I did wonder was ( just a visual thing on the demo ) whether on the big screen menu version one will have the option of setting the buttons to be all the same size along with equal width sub menus, visually then every menu gives a nice straight column line, rather than variable widths.

Looking forward to your next demo and release of this fine menu, I for one am very excited about using it...

Many, many thanks.....
Trev