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


Initial Email From:
Michael 
Initial Email Subject: multiple menus on one page function great in all browsers except IE9
Support Case Month: January 2014

I've built multiple menus that all appear on the same page.

I followed all the steps suggested to link each menu to the page after compiling them. The menus show and function great in all browsers except Internet Explorer.  The only version of IE I've tested the page in so far is version 9. Chrome, Firefox, etc. however show everything great. I have the latest version of AWM.
I also purchased the sliding add-in too.
Any suggestions?

Thanks,
Michael

Reply From: Likno Customer Support

Hello Michael,

Please, open all your 3 menu projects in AllWebMenus.

Go to Project Properties -> Menu-Linking Code in Tags and select "Yes, within tags".

menu linking code in tags

Re-compile your menu projects and re-upload the produced files to your server.

This should solve the display issue in IE9.

Please, let me know how that worked for you.

Thank you.

Kind Regards,  

Aggelos Tsakonas
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: Michael

Hi Aggelos,

Thanks for the update. I tried it and it worked perfectly.

Thanks again,
Michael

 

Tags: , , , , , , , , , ,

 

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


Initial Email From:
Aart
Initial Email Subject:   responsive menu
Support Case Month: March 2013

Dear people of likno,

I have some trouble with making an responsive menu.

Problem is that my menu is to large in width, too many items.

I`ve tried everything to make it 2 columns in mobile version , but i did not succeed.

Maybe you can give me any suggestions?

Also i am looking for a way to collapse the menu in mobile version.

So when they hit a little icon,  the menu will roll out.

Maybe you have some ideas to help me out.

A very happy user of a few likno products.

Kind regards,
Aart

Reply From: Likno Customer Support

Hello Aart,

One idea would be to change the menu type for version 2 or 3, the one that will be served on tablets (horizontally/vertically).

So, you could make the menu to be 2 rows.

multirows horizontal menu

For the version 4 (smartphones) you could for example have the menu type as sliding.

sliding menu

And in order to succeed clicking to a button to have the menu appear, you could change the menu positioning of version 4 to manually trigger Main menu, then select on click and copy that code. You then, can create a button for example in your page and add the code you copied, so you can have the menu appear when clicking on that button.

manually trigger menu positioning

manually trigger menu code

You could also take a look on our responsive menu example to see how we have implemented and take ideas or even customize it to your needs.

http://www.likno.com/examples/responsive-menu-above-green-line-resize-page.html

Let me know if you need more information.

Thank you!

Kind Regards,  

Aggelos Tsakonas
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: Aart

Hello Aggelos,

What a GREAT SERVICE....What a GREAT SUPPORT!!!!

So easy when I look at your explanation and the example link is exactly what I meant with the Icon.

I will download that sample and study it!

Thanks again Aggelos you really helped me out!

With much of greetings,

Aart

 

Tags: , , , , , ,

 

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


Initial Email From:
Josef
Initial Email Subject: Multiple menus in a page - highlight item
Support Case Month: July 2013

Hi,

the website {URL REMOVED} is a Drupal based CMS multilange website. Most of the content pages use a mixture between AllWebmenus based submenus and a Drupal Main Menu on the left sidebar of the template.

The problem is, that the highlighted item of the drupal mainmenu loses its highlighted state when a Allwebmenu Submenu item is activated.

Is it possible to realize the mainmenu with AllwebMenus AND still showing the selected main item in a highlighted state when a subpage via an AllWebmenu Submenu is called?

If yes, what would be the best configuration setup to achieve this?

Thank you for your help!

Regards

Josef

Reply From: Likno Customer Support

Hello Josef,

The way you have now implement your menu will not work as you expect. It would work if you had also the left  sidebar menu on AllWebMenus. Now, they are 2 different menus. So, the highlight feature cannot work for another menu.

You could achieve that if the left menu and the bottom menu are one menu. You could have the main menu group as a vertical menu and the submenu group as horizontal menu with the appropriate offsets so that appears in the bottom as you want it. You should then set the submenu to be sticky and set the highlight feature according to your desired settings.

Let me know if you need further information.

Thank you!

Regards,
Aggelos Tsakonas
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!

 

Tags: , , , , , , , , ,

 

 

In this article we will see how we can change the Default Drop-Down (Horizontal and Vertical) menus from JavaScript to CSS menus. Then, we will see how to compile them and insert both of them in a page.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down) as the menu theme for the first window that appears.

SNAGHTML4942d9c

Then, we save the menu project and let's give it the name HorizontalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)"

image

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

image

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set HorizontalMenu.js.

image

 

Let's create the Vertical Menu now.

Step 1: We open the AllwebMenus, we create a new project and we select (Default Drop-Down)[v] as the menu theme for the first window that appears.

SNAGHTML4ad239e

Then, we save the menu project and let's give it the name VerticalMenu for example. You can give whatever name you want.

Step 2: We select the "Populate menu inside your page through UL/LI items" and as the Menu Genre we select "CSS menu (light, 508/WCAG)" (same as in the HorizontalMenu).

Step 3: We need to set minimum width/height values for the menu items in order for the CSS to work. In a CSS version of the menu we cannot have auto width/height.

Click on Main Items Style, then Size and set (for this example) at least 127px width and at least 30px height. In your projects you could set the width/height values that best fit your design.

Step 4: Click on Compile Menu. On the window that appears on Folder and Files, we select the Site_Root folder and we change the Compiled menu name to Custom and we set VerticalMenu.js.

image

 

After that we can create the HMTL page in which we want both of the menus to appear.

The basic structure of our page could initially be:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
</head>

<body>
</body>
</html>

and we are going to give it the name CSSmenus.html

Then, we need to go back to our AllWebMenus projects and Link the menus to the page.

First, we go to HorizontalMenu.awm and we click on Link Menu, we select the html file(s), in this example the CSSmenus.html, we click on right arrows to select it and finally we click on Link.

image

We do the same process for the VerticalMenu.awm

In the next step we need to add the UL/LI structure for our menus in the CSSmenus.html page (as in a CSS menu we need to insert the ul/li structure in the page).

So, we go back to HorizontalMenu.awm and we click on Settings as shown in the following screenshot. Then, we click on "OR <UL><LI> structure based on your current project's structure" tab, we select all the structure and we copy it. We go to our html page and we paste that structure.

image

We do the same step for the VerticalMenu.awm.

Last step but not least is to set the correct positioning for our menus.

I would suggest to select the Menu Positioning relative to an element. So, we click on Menu Positioning, we select Relative to an Element and we can leave the Default ID. We copy that value in order to paste it in the page in an element we are going to create.

After that, we need to re-compile the project, just click Compile.

image

Then, we go to the HTML page and we create the element with the ID we copied. The element could look like :
<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
and we place it before the UL/LI structure for the horizontal menu.

Then, we do the same process for the vertical menu and the element in the page could look like:
<div id="awmAnchor-VerticalMenu"> &nbsp; </div>

The final result in our page will be:

image

and the code is:

<!DOCTYPE html>
<html>
<head>
<title>CSS menus</title>
<!-- ******** BEGIN ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<link href="HorizontalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="HorizontalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR HorizontalMenu (CSS MENU)******** -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
<link href="VerticalMenu.css" rel="stylesheet" type="text/css">
<script charset="UTF-8" src="VerticalMenu.js" type="text/javascript"></script>
<!-- ******** END ALLWEBMENUS CODE FOR VerticalMenu (CSS MENU)******** -->
</head>

<body>

<div id="awmAnchor-HorizontalMenu"> &nbsp; </div>
<ul id="awmULLI-HorizontalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="awmAnchor-VerticalMenu"> &nbsp; </div>
<ul id="awmULLI-VerticalMenu" style="display:none;">
  <li><a href="#">Main Item 1</a></li>
  <li><a href="#">Main Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
      <li><a href="#">Sub Item 2</a>
        <ul>
          <li><a href="#">Sub Item 4</a></li>
          <li><a href="#">Sub Item 5</a></li>
          <li><a href="#">Sub Item 6</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Main Item 3</a></li>
</ul>
</body>
</html>

When we are done we need to upload to our server the following:

image

Which are the HTML page containing the menus, the CSS files and JS files produced after we compiled the 2 projects and the awmdata folder.

 

Tags: , , , , , , , , , ,

 

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


Initial Email From:
Carolyn
Email Subject: Vertical menu not displayed properly in IE 9, not expanding in Safari
Support Case Month: March 2013

I just saw that the menu isn't displaying on the pages I have in the sub-directories where I have slide shows. 

Please help.  Also the menus fly out under the Flash in the vertical menu in IE.

Reply From: Likno Customer Support

Dear Carolyn,

The problem with the sub-directories is that your menu Linking Code has a page-relative path (“menu.js”).

If you change this to a root-relative path (“/menu.js”) then the menu will appear in all pages in folders or not.

I also noticed that in the “Prices” page you still have your old menu on the left side.

Regarding the Flash in IE, you may want to read the instructions here:

menu z-index property

If you are not able to resolve the problem, please let me know which URL has the flash and the menu so that I can check 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: Carolyn

Thank you Kostas.  With your instructions I was able to solve the problem of menus flying out under Flash but am still trying to deal with sub-directory menus disappearing.

Is there a place on the AllWebMenus dashboard for me to select root-relative path or do I go into each page that is in a sub-dir and manually add the "/".  I tried that on one page and it broke all the pages.

Thanks so much for your quick response on this matter.

Carolyn

Reply From: Likno Customer Support

Dear Carolyn,

What do you mean when you say “it broke all the pages”? are you sure you added the “/” in the correct place? Do you have this page online for me to see?

If you do the Linking automatically through the AllWebMenus application, then the application would most likely add “../menu.js” for the inner pages.

If not, then it probably means that your pages locally are not inside a folder!

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

Found my error.  I should have added ../menu not /menu

I'll send you a note when I load the site later today. 

Have a great day!

Carolyn

 

Tags: , , , , , , , , , , ,

 


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