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

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

Initial Email From: Stefan
Initial Email Subject: two column menu
Support Case Month: April 2013

Hello,

i need a solution to combine Floating Images - Example I and the possibility to have 2 columns (picture 2)

Thanks for your support

Picture 1: Now

Picture 2: Required solution

Yours sincerely,
Stefan

Reply From: Likno Customer Support

Dear Stefan,

This should not be a problem. You simply need to go to the Style Editor and set your submenus to have two columns:

Note that you can also do this for a specific submenu only (if this is what you want):

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: Stefan

Great support, that was the solution, i was looking for.

Is there a possibility to define, where to break into the next column or is it half / half?

Thanks,
Stefan

Reply From: Likno Customer Support

I am afraid that the break happens automatically and it tries to have the same number of items in each column.

Still, you may choose to make a horizontal submenu with e.g. 9 rows, so that a submenu with 15 items would have 2 columns with 9 & 6 items respectively, but you have to be careful with the item placement if the order is important.

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

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: Jeff
Initial Email Subject: CSS menu compiles with JavaScript?
Support Case Month: April 2013

Hi,
I am using AllWebMenus Pro version 5.3 build #908 to make a CSS horizontal dropdown menu.  My understanding was that it would not require or use javascript at the cost of some of the more dynamic features.  When I compile the menu and link it to my webpage though, It creates a "menu.js" file (along with a "menu.css" file) and this javascript code is inserted into the head tag of my linked page as well.  Unfortunately, the menu is not appearing in Chrome version 26.0.1410.43 anyway.
I want a menu that is pure CSS.  Why is the javascript file even being generated and is it really necessary?  I appreciate the help in advance.
Jeff

Reply From: Likno Customer Support

Dear Jeff,

When a menu is “Pure CSS”, this means that it is able to function without any need for JavaScript. Still, there is no reason to cut back on the extra features when the viewer’s browser supports JavaScript!

In our case, the generated JS file only adds some extra features such as keyboard navigation and compatibility for older browsers that could not support CSS menus (such as IE6).

If you remove the JS file you will see that your menu still looks the same and is fully functional with the mouse in all recent browsers.

Finally regarding Chrome 26, something must be wrong in your implementation, so I will need to see your page to find what is wrong. Please send me the URL so that I can have a look.

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: Jeff

Kostas,

Thank you for clarifying the inclusion of the javascript files but something there seems to be amiss.  My menu visibility issue was a foolish error - I was using a CLASS to define the style rather than the default ID.  (I would love to be able to specify this difference before compiling but Dreamweaver's "search and replace all" feature does the trick as well.)

Now if I leave the awmdata.js file attached to my index.php page then the menu appears below the header image (as it should) for only a second before popping the menu elements into the upper left corner of the page.  Removing this link to awmdata.js at least puts the menu where it should be but there is also something with the size of the parent item when hovering over an element with a submenu.  I also am not seeing the arrow icon I wanted to use to indicate that there is a submenu.

I seem to be required to define a static width+height for menu items.  Is there no way to dynamically size a menu item to accommodate its unique size?  Removing the width:0px from the #mainnav > li element seems to work but how would I opt for this within the AllWebMenus interface?

Jeff

Reply From: Likno Customer Support

Dear Jeff,

I just checked your pages and I see that you have removed most of the code from the CSS, so your menu is not really a menu anymore:

Regarding the top-left positioning, this is most probably because you have indeed set this positioning in the application. If you do not have any JavaScript, then the menu appears wherever you put the UL/LI code, but you can never have a pixel-perfect positioning this way. When you have JavaScript, then the positioning property of the application is used instead. I am guessing you have left this to the default which is top-left of window with an offset of 10px:

You could use a positioning Relative to Element with class=“container” to make sure that this works properly when you have JavaScript.

Regarding the “HasSubMenu image”, this is unfortunately one of the features that only works when you do have JavaScript enabled, as it is not possible to perform such checks with CSS. If you wanted this to work with pure CSS, then you would have to manually add the “daddy” to each LI that has a submenu, for example:

<ul id="mainnav">

    <li><a href="treasurepools.x10.mx">HOME</a></li>
    <li class="daddy"><a href="treasurepools.x10.mx/services">SERVICES</a>
            <ul>
              <li>
                  <a href="treasurepools.x10.mx/services/cleaning">
                     CLEANING
                  </a>
              </li>

              <li>
                  <a href="treasurepools.x10.mx/services/maintenance">
                     MAINTENANCE
                  </a>
              </li>

              <li>
                  <a href="treasurepools.x10.mx/services/construction">
                     CONSTRUCTION
                  </a>
              </li>
            </ul>
    </li>
    <li><a href="treasurepools.x10.mx/faq">FAQ</a></li>

</ul>

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 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: Tom
Initial Email Subject: issues with vertical submenus and scroll bars on chrome
Support Case Month: March 2013

Hi,

I have attached the awm, since the site is secured.

The problem is the vertical submenus, but only one Menu>Daily and any of the 3 items, and only on Chrome.  Once on a page the scroll bars (vertical and horizontal) show up for any item on the nav, once I move away they are fine. Cache emptied frequently.

The linking seems fine:

<body>

<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->

<!-- ******** BEGIN ALLWEBMENUS CODE FOR master ******** -->

<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='master',awmBN='DW';awmAltUrl='';</script>

<script charset='UTF-8' src='../../nav/master.js' type='text/javascript'></script>

<script type='text/javascript'>awmBuildMenu();</script>

<!-- ******** END ALLWEBMENUS CODE FOR master ******** -->

Any thoughts would be helpful.

Thanks,
Tom

Reply From: Likno Customer Support

Dear Tom,

It seems that this issue is caused by a specific line in your “showCal.js” file:

This variable conflicts with a variable used by our scripts and confuses the menu library files.

The “quick & dirty” solution is to open your “showCal.js” file and perform a “search & replace” replacing “isNav” with “isNav1”. You should find 4 occurrences.

This will make both scripts work until we can fix this permanently and send you an updated version.

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: Tom

Hi,

Very nice, thanks for your help.

Thanks,
Tom

Reply From: Likno Customer Support

Dear Tom,

This is to let you know that we have just uploaded a new AllWebMenus build (906) that should permanently take care of the variable conflict issue.

You can get it here:

http://www.likno.com/download.html

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: Tom

Thanks