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


Initial Email From:
Roger 
Initial Email Subject: CSS menu 
Support Case Month: January 2014

Hello,

The Javascript menu I created is not found by search engines, even though I used the populate using UL/LI items option. MY SEO advisor tells me that the display: none setting causes this. Search engines do not like display: none settings anyway.

So I tried converting to a CSS version. However now my sliding vertical submenu does not work anymore. Is that not supported in the CSS version?

Regards,
Roger

Reply From: Likno Customer Support

Hello Roger,

I am afraid the sliding option does not work on a CSS based menu.

Considering the SEO you may want to use the JavaScript based menu and populate your items through UL/LI structure.

Also, you can use a sitemap so that search engine can crawl your menu items and links. You can do so by clicking on Tools -> Create Sitemaps -> (Create Generic Sitemap / Create Google Sitemap / Create ROR Sitemap).

create sitemap options

Let me know if you need further help on this.

Also, if you need further assistance please export your menu project and send it to me so I can have a better look on the issue.

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!

 

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

 

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


Initial Email From:
Mike
Initial Email Subject:  AllWebMenu, Hide menu item or group from javascript
Support Case Month: July 2013

I assume I am able to hide a menu item or menu group via external javascript function so I can display just the items/groups based on the web page.  Can you send me an example of how to do that?
Thank you.
Mike

Reply From: Likno Customer Support

Hello Mike,

First, thank you for your interest in our Likno products.

I believe that the Server-Side Menus API is what you are looking for:

http://www.likno.com/addins/dhtml-menu-serverside.html

Also click the "Example" link:

http://www.likno.com/addins/dhtml-menu-serverside-example.html

Regards, 
Aggelos Tsakonas
Aris
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: Mike

Thank you.
I don't have a need at the moment to build the menu dynamically.  I want to build a complete static menu but then hide parts of it depending on the page the user is on.  My hope is that there is a javascript call to hide an item or group by ID?

Reply From: Likno Customer Support

Hello Mike,

Another way to achieve what you want is to use the "UL/LI" population method (see below). In that case, you can hide/show any UL/LI items (menu submenus and items in other words) you wish. I believe this is the way to go:

UL LI menu structure code

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

 

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


Initial Email From:
Jim
Initial Email Subject: Passing PHP variable to URL
Support Case Month: July 2013

I need to pass a variable, via PHP, to each URL in my menu as follows:

?BG=<?php echo $bg; ?>

so that the url would look like loading.php?BG=<?php echo $bg; ?>  ... and it would resolve with the appropriate variable.

Couldn't find answer in knowledge base.

Reply From: Likno Customer Support

Hello Jim,

In order to achieve that, you should populate your menu through UL/LI structure.

Choose the following option in your AllWebMenus project:

populate menu using UL  LI structure

Then click on the "Settings" in order to make the settings that perfectly work for you.

menu structure settings

A UL/LI structure in your page could look like the one below:

<ul id="awmULLI-menu" style="display:none;">
  <li><a href="test.php?BG=<?php echo $bg1; ?>">Main Item 1</a></li>
  <li>Main Item 2
    <ul>
      <li><a href="test.php?BG=<?php echo $bg2; ?>">Sub Item 1</a></li>
      <li>Sub Item 2
        <ul>
          <li>Sub Item 4</li>
          <li>Sub Item 5</li>
          <li><a href="test.php?BG=<?php echo $bg3; ?>">Sub Item 6</a></li>
        </ul>
      </li>
      <li>Sub Item 3</li>
    </ul>
  </li>
  <li>Main Item 3</li>
</ul>

Let me know if you need any more 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: , , , , , , ,

 

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


Initial Email From:
Rich
Initial Email Subject: gallery
Support Case Month: June 2013

Hi - do you sell a product that can allow me to create a photo gallery like this one? http://www.usatoday.com/story/cruiselog/2013/05/29/msc-preziosa-cruise-ship-photo-tour/2368547/

Reply From: Likno Customer Support

Hello Rich,

First, thank you for your interest in our Likno products.

We have Likno Web Scroller Builder http://www.likno.com/jquery-scroller/index.php

We recently launched a new version that has the Image Scroller feature (populate images through DIVs, UL/LI, inside project, Flickr, Picasa).
Please, download it http://www.likno.com/jquery-scroller/download.php and give it a try. Open the examples and check the image scroller option to see on preview some examples. You can also create a new one to see how it can fits your needs.

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!

Reply From: Rich

Hi

I was on vacation last week, so this is the first chance I've had to try this. I haven't been able to get anything to show online - is that because I'm using a trial version? Are there any instructions?

Rich

Reply From: Likno Customer Support

Hello Rich,

Hope you had fun in your vacation.

As long as you use Likno Web Scroller Builder in a trial mode you will not be able to publish the sliders for any other domain except the localhost.

Create any slider you would like starting from the example it best fits your needs. When you finish the slider, press the "Publish" button (see image below).

publish scroller project

The following form will appear, here you can choose the publish folder, the publish sample page (you can leave it as it is) and the name of your compiled project.

Then, you can choose if it is going to be for a generic website or a WordPress website.

Then, you choose localhost as the domain and click on publish.

jquery scroller project properties

A sample page should open that contains the slider you have created.

Let me know if you need any more clarification.

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

 

 

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

 


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