Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows

Hello, we have released a new version of AllWebMenus Pro: Version 5.3 build #910.

Check out What's New

All features here: http://www.likno.com/allwebmenusinfo.html

Download the new version here: http://www.likno.com/download.html

--------
Likno Software - www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Graham
Initial Email Subject: Webpage - Liquid layout
Support Case Month: April 2013

Hello there I am just about to do the updates to the above website and I would like to make the webpages a bit more flexible for the viewer by using a liquid layout which would allow the website to contract or expand to suit to viewers monitors resolution. I altered the webpages, but I'm having trouble withe the menus, bother the vertical and the horizontal menu bars. Is there anyway to get the menu bars to shrink or grow to match the viewer resolution? or do I have to make ... say 3 websites with low, medium or higher resolution. At the moment on my test website the menu bar only comes across half the screen, when viewed on a very large monitor and it's too long on a low resolution? If you can point me in the right area, I would appreciate it.
Many thanks,
Graham

Reply From: Likno Customer Support

Hello,

The solution you are looking for is a Responsive Menu. This is supported by AllWebMenus, so first of all you need to get the latest AllWebMenus version if you do not already have this (according to your Update Plan you can get this for free).

Once you have this you will note that the following option has been added in the “Global Properties”:

I recommend that you have 4 menu versions to accommodate for 4 different screen sizes. Note that the predefined sizes are set to match the computer screen, iPad in horizontal and vertical orientation and mobile phones.

Once you select this you will notice the following listbox:

From this point on, your menu has 4 different versions and you can select from this listbox which version you are editing at any given time.

Then all you have to do is to set different styles (and content and positioning) for your four menu versions, and compile and upload the menu to your pages normally.

Note that we have also added a Responsive example to help you get started:

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Graham

Thank you very much, I have the latest version and will have a go with it. I had completely missed the Responsive Menus.

Again...many thanks
Graham

Knowledge Base support case for AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Claudio
Initial Email Subject: JavaScript function to trigger menu refresh.
Support Case Month: April 2013

Is there a JavaScript function I can trigger to force the refresh of the menu without having to refresh the page?

I am developing my first responsive menu, and the only solution that I could find to "wrap" the entire menu into a single button for the smartphone was to use jQuery to create another node in the <ul><li> structure for the menu.

It works! But the page needs to be refreshed.

I am open to other ideas and suggestions.  Do you have examples of other web sites that use your responsive menus that I can take a look at?  I have been using your product for many years and I don't mind adapting my design to fit your product specifications.

One more question related to Responsive Menus.

Please check in the iPad the link below.

1. On portrait mode, select the menu option "Products", it should open the sub-menu.
2. Leave the submenu open, and change the orientation to landscape mode.  The sub-menu remains open, but moves to Technical.

I would prefer that each time we change the orientation of the screen, the sub-menus would automatically close.

If you provide me the Javascript function that takes care of that, I can put in my code, but in this case I actually think should be default in the compilation of the AllWebMenu.

Claudio

Reply From: Likno Customer Support

Hello,

I am afraid that there is no way to refresh the menu without refreshing the page.

The only solution I can think of, is if you put the structure within the application, in which case you are allowed to have a different structure for each responsive version.

This would work, but it does not support pure CSS menus which are based on the UL/LI method (nor menus with dynamic structure, as it has to be defined within the application).

Regarding the iPad submenu issue, I have forwarded it to our developer team and I expect a fix to be released soon (so that the submenus close).

Also please note that the feature you asked for in December (loading the UL/LI menu after the DOM loads) has been included in the latest version of AllWebMenus.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Claudio

Thank you very much for your responses.  I understand the delay because I also deal with technical issues that sometimes they either pile up or take longer to resolve.

I am happy that the issue of December was resolved!  I will download the latest version and recompile some of my menus to test it.  Thanks for taking care of that.

Regarding the refresh of the menu, the problem I presented is not a deal breaker.  Unless you are in a demonstration showing how the web site is responsive, resizing the window, you will not encounter problems if you simply land in the responsive web site in a smart-phone, a tablet or a desktop.

However I would like to know what would be a good natural suggestion for dynamically UL/LI responsive menu.

In you example page:  http://www.likno.com/examples/responsive-menu-resize-page.html, if you think about it, it is not a practical solution.

The menu shrinks from one line (above 768px)  to two lines (between 480px to 767px), and finally to a vertical menu (below 500px).

The menu version for smart phones (below 500px) seems to have the menu aligned to the top-left corner to the window browser (I don't know how it was configured), and the content of the page inside div class=highlightBox is being squeezed to the side.  It's not a practical solution! 

By the way, the sample for the page http://www.likno.com/examples/responsive-menu-resize-page.html  should be in pure HTML5, using NAV for the menu....  just a suggestion.  Other web developers might want to see your code to copy your solution.

If you don't mind, I would like to discuss with you some suggestions to present to other programmers. I am not the type to spend time in forums and blogs, but I do like a technical challenge to be discussed directly with the solution provider.  I will be happy if I can help you improve your product, which I like and have been using for a long time.

1. My solution in Paneltronics web site uses jQuery to dynamically create another UL/LI level to nest the entire main navigation inside a single list item.  The problem (not deal breaker) is the page refresh.
2. Another option, that I have not thought thoroughly, is to put the AllWebMenus to work with two HTML containers:  Div1 (contains Menu button), NAV. 
   For desktop and tablet:  Div1 is set to display = none, NAV is set to display = block;
   For smartphones:  Div1 is set to display = block, NAV is set to display = none.  A simpler jQuery will toggle the display of the AllWebMenu...  
   ... is that an idea that works?  I will try it later (don't know when), and let you know.

Claudio

P.S.

http://2012paneltronics.atimo.us/AboutUs.asp?op=Snapshot

Please check the page above to see how I decided to implement the responsive menu for mobile.

I created the <div class="buttonR" id="menuButton">MENU</div> and I am using jQuery to toggle between displaying/hiding the menu.

Read my comments in green in the message below.

It's a simple solution and may work well.

Reply From: Likno Customer Support

Dear Claudio,

Nice one! Very clever workaround indeed.

So you are basically moving the Positioning Element of the smaller menu in and out of page and the menu follows that.

I will keep it in mind in case someone else has a similar issue. Also I have added the request to allow for a different UL/LI structure in each “version”. This is of considered a very low-priority for now, but it will be implemented eventually (especially if more people ask for it).

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Claudio

Thank you!

Don't worry about the low-priority issue.  I have my problem resolved.  Feel free to share this solution with whoever has the same situation.

Claudio

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: J. and F.
Initial Email Subject: responsive menu positioning
Support Case Month: March 2013

We see in the "position" setting for the responsive menu that there is no "relative position" to select. We perceive, if there was a "relative position" to select in positioning the menu, then perhaps the menu would not cover our content when we resize our browser's window.

We do not see the responsive menu auto-size itself using our iPod, which is 480x320px. The responsive menu appears full size without making any attempt to reduce itself to fit the 320px screen. However, when we reduce our Firefox browser, version 18.0.1, to 320px, the menu does auto-size but covers up all adjacent content. (Probably because there is no relative position setting).

J. and F.

Reply From: Likno Customer Support

Hello,

Regarding the Positioning of your menu, please note that each menu version can have its own Positioning and it seems from your compiled menu that you have set the first version to be positioned Relative to Element, but the other three are positioned Relative to Window.

The easiest way to fix this, is to clone the positioning from the first version to the other three. To do this, use the following link in the application:

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for Likno Web Modal Windows Builder and AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Phil
Initial Email Subject: upgrade (sales) questions
Support Case Month: February 2013

Hi Guys

I have AllWebMenus Pro and an older version of Modal Windows.

I want a modal window for a Responsive site that is live at the moment but want to know if I upgrade whether this will work to resize for a responsive site please.

I want a modal to load for my client site on home page arrival  advertising a special offer and link to a page for {URL REMOVED}

Will this work please and how would you recommend I set it up? – if it will work I will upgrade both AWM and MW at the same time in my user account.

Kind regards,
Phil

Reply From: Likno Customer Support

Dear Phil,

The latest AllWebMenus indeed allows creating responsive menus for your sites. Note that setting a menu as responsive will not shrink the menu automatically! You need to create your own designs (e.g. make the tablet menu version as two-row menu and the phone menu version as a vertical menu) and the menu will automatically display the correct menu based on your settings.

The modal window was always “responsive”, in the sense that it will always stay within the boundaries of the current page.

I hope the above was helpful for you. Let me know if you want more specific details.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Phil

Dear Kostas

Thanks for your reply.

AWM

It is great to see your recommendation for tablet menu as two rows and mobile as vertical.

The problem I have had with AWM is knowing how to structure having three designs whereas, as we have discussed before css3menus.com auto-adjust from just one design.

I would like to go back to using AWM, as I am only making responsive sites now; could you just advise please:

1. Whether all or most designs can be in both horizontal and vertical – if not how do we tell?

2. Can you have both from within one project file.

3. Any more revelations of tips on how to set up AWM as responsive from your experience please – that tip above was so useful thanks.

MODAL

You mention that they always stay within the window boundary but there are settings in the project for width and height sizes in pixels.

So a m I wrong in thinking if I set it to 600px wide it will bust an iphone screen that has read the  tag
<meta name="viewport" content="width=device-width, initial-scale=1">.

If it just resizes to fill the screen then that would be excellent or if not what designs tips would you have for that please?

Reply From: Likno Customer Support

Dear Phil,

1) All designs can be switched from horizontal to vertical and vice versa. However, in some of them, the graphics have been especially designed for a specific orientation, so you may need to edit a couple of graphics to make the menu look perfect. The only way to tell if a design will look good in a different orientation, is to actually try it and see for yourself (it is only two clicks to do it).

2) A single project file will store all the responsive menu versions (up to four).

3) Hints:

a) First of all, turn your menu into a Responsive Menu

b) You can use these links to quickly clone the menu structure (for example you add a new item in version1 and want the same in the other menu versions)

c) Use this listbox to change from one version to another

Note that the way we’ve design this, you can even use a different Theme for each menu version , and each version can have a different menu structure!

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Phil

Dear Kostas

Thank you very much for those tips, most useful.

At the bottom of my last email I was asking about the responsiveness of the Modal window software I was thinking of updating, could you advise on this too please, here is the bit from my last email:

MODAL

You mention that they always stay within the window boundary but there are settings in the project for width and height sizes in pixels.

So am I wrong in thinking if I set it to 600px wide it will bust an iphone screen that has read the  tag <meta name="viewport" content="width=device-width, initial-scale=1">.

If it just resizes to fill the screen then that would be excellent or if not what designs tips would you have for that please?

Reply From: Likno Customer Support

Dear Phil,

Indeed if you set the Modal Window to 2000px wide, it will always resize to fit within the screen, also leaving a margin of 15px if I am not mistaken.

You can easily try this by resizing the preview window in the application!

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!

Reply From: Phil

Dear Kostas

You are correct, thank you very much for your help and I have upgraded both software.

Kind regards,
Phil