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

 

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

Check out What's New

- Added the "Widen group to fit the entire width of a page Element with specific ID/Class" feature in the Menubar options.

- Added a new menu example, called "Social Menu".

social network menu example

- Fixed a menu highlight issue when the window was resized.

- Fixed a Menu Positioning issue for responsive menus in WordPress sites.

- Fixed an overflow of menu items issue in WordPress.

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

 

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

 

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


Initial Email From:
Pete
Initial Email Subject: WordPress Menu plugin
Support Case Month: June 2013

Hi,
I'm just at the ordering page and would like to know how can I use the menu on a WordPress installation?
Regards,
Pete

Reply From: Likno Customer Support

Hello Pete,

We have an AllWebMenus plugin to help you insert the menu you create in AllWebMenus Pro to your WordPress website. You could see more information about this here: http://www.likno.com/addins/wordpress-menu.html

You install the AllWebMenus WordPress plugin to your WordPress installation, you choose some settings for the menu, like what menu data you would like to use, the position you want it to display in, the menu type (Dynamic, Mixed, Static) and then you get the code for the menu. You Open the AllWebMenus Pro, you go to Add-ins -> WordPress Menu -> Import/Update Menu Structure from WordPress in order to have the menu structure. You create it in the way that fits your needs and then you compile it for WordPress. This creates a .zip file that you need to upload in your WordPress through the AllWebMenus plugin.

Let me know if you need any more further information.

Thank you!

Best 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: , , , , , ,

 

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

Check out What's New

- Added new "Row/Column" options for more control on the menu layout when using this feature.

- Access to the UL/LI structure when clicking the related "Settings" link is now faster.

- The "Add Item" command has been added to the Main Menu Group too (was on Submenu Groups already).

- Updated the "Create Google Sitemap" feature to use the latest google sitemap schema.

- Added some optimizations to the libraries.

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

 

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

 

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


Initial Email From:
User
Initial Email Subject: Responsive and Server Side API
Support Case Month: July 2013

Is it possible to use the responsive menus with the server side API?

Thank you.

Reply From: Likno Customer Support

Hello,

Yes, you are able to use the responsive feature of AllWebMenus in a Server-Side API menu.

In order to do that, after you have chosen how many versions of your responsive menu you have and you have finished editing,

                Go to Add-ins -> Server-Side Menus API -> Setup Server-Side Menu / Choose Domain and select the first choice as shown below.

Responsive Server Side Menu

Go to Add-ins -> Server-Side Menus API -> Compile Server-Side Menu (for unlimited domains) and compile your menu.

As for the code:

To create a new Item Style: (its1 is an example name, you can have your own variable name there):

its1=new ItemStyle(); For version 1 of your menu

its1_rm2=new ItemStyle(); For version 2 of your menu

its1_rm3=new ItemStyle(); For version 3 of your menu

its1_rm4=new ItemStyle(); For version 4 of your menu

To create a new Group Style: (grs1 is an example name, you can have your own variable name there):

grs1=new GroupStyle(); For version 1 of your menu

grs1_rm2=new GroupStyle(); For version 2 of your menu

grs1_rm3=new GroupStyle(); For version 3 of your menu

grs1_rm4=new GroupStyle(); For version 4 of your menu

To create a new Menu Item: (we assume that we have declared the menu as awm_M0=new Menu(), instead of awm_M0 you can have your own variable name)

awm_I1=awm_M0.newItem(); For version 1 of your menu

awm_rm2I1=awm_rm2M0.newItem(); For version 2 of your menu

awm_rm3I1=awm_rm3M0.newItem(); For version 3 of your menu

awm_rm4I1=awm_rm3M0.newItem(); For version 4 of your menu

To create a new Menu Group: (awm_S4 is an example name, you can have your own variable name there):

awm_S4=awm_I2.newGroup(); For version 1 of your menu

awm_rm2S4=awm_rm2I2.newGroup(); For version 2 of your menu

awm_rm3S4=awm_rm3I2.newGroup(); For version 3 of your menu

awm_rm4S4=awm_rm3I2.newGroup(); For version 4 of your menu

Thank you!

Best 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: , , , , , , , ,

 


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