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