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

There are 2 main positioning options:
       1. Automatically show Main Menu on page load
               1.1 Relative to Window
               1.2 Relative to an Element
               1.3 Relative to an Image
       2. Manually trigger Main Menu or any Group on user action
               2.1 On Mouse Over event
               2.2 On Mouse Click event

Below you can watch a video presentation in which we describe how you can position a JavaScript/CSS menu in AllWebMenus Pro.

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

Initial Email From: Phil
Initial Email Subject: Likning
Support Case Month: August 2012

Kostas
I tried linking it to another page and when I click on preview page the menu bar comes up.. aha - I see that I did not upload the related other files like menu.js. Now that I did that the menu does appear http://www.paintingfrance.com/cuba.htm but even though I set the global positioning to be relative to an image (I wanted the menu to be below the image) it still appears above and to the left

Phil

Reply From: Likno Customer Support

I checked your page and I see that you have two menus Linked there:

“menu.js” and “updatedmenu.js”

The first is positioned relative to Window and correctly appears on the top-left.

The second, like your screenshot suggests, is attached to the “logo.jpg” image, which does not exist! The image in your page is called “logo_small.jpg”. 

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: Indira
Initial Email Subject: position menu
Support Case Month: May 2012

Dear Sir

Now, I want to position the menu just below the flash animated banner – not on the top corner as shown in the screenshot.

I cannot find an option in the menu. I tried in ‘relative to an image’ but it does not work.

Kindly advise.

With much thanks

Indira

Reply From: Likno Customer Support

Dear Indira,

As you said, this is a flash object and not an image. Do you have any ID or CLASS for the container of this flash? Or maybe for the space just below it?

My suggestion is to use “Relative to Element”, as this is the best Positioning Method. With this you need to attach the menu to a specific element that already exists in your page. This element could be anything (an image, a table cell, a link etc.).

However in order to give you precise info I would need to see the page.

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: User
Initial Email Subject: Question
Support Case Month: May 2012

How do I center the menu on the web page?

Related URL: http://www.eastpointha.org/home.cfm

Reply From: Likno Customer Support

Hello,

If your website is always centered you could use this option:

OR:

OR:

You have plenty of options to choose from, the "Window" being the easiest one.

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

Thank you, It worked!

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

Initial Email From: Virginia
Initial Email Subject: AW Menus 5.3 build 896 Browser-specific problem
Support Case Month: September 2012

I just noticed that the top horizontal menu in my client site is no longer lining up properly for Safari. (The alignment was fine originally, years ago, but I don't know which update stopped keeping good alignment for Safari.)

When I use the Browser-specific option to change the Y-axis alignment  values, nothing happens to the menu alignment when I look at the menu in Safari. I can set the Y axis +100 pixels, or -10 pixels, and nothing happens.

The other browsers and their adjustments are fine.

Thanks,

Virginia

Reply From: Likno Customer Support

Dear Virginia,

I noticed that your menu is compiled with build 892 but the library files are from version 888. Can you please correct this and let me know so that I can have another 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: Virginia

Dear Kostas,
Good point.
I've uploaded the latest awm-Data directory, and I've tried editing the menu position for Safari again.
Still, the menu doesn't move in Safari whether I enter Y=-20 or Y=50.
And now the menu is not moving in Opera when I switch from Y=10 to Y=25.
Chrome, IE and Firefox are fine.
Thank you,
Virginia

Reply From: Likno Customer Support

Dear Virginia,

I do not recommend using the Browser-Specific offsets to achieve the correct positioning. This is a pretty old and outdates feature that should never be required if your Positioning settings are correct.

Please try removing ALL the browser-specific settings and changing your positioning to “Relative to Element” (“top-left” with 0 offsets).

Then go to your page and replace this:

<tr>
   <td align="left" bgcolor="#996699">
        <img src="images/spc.gif" width="1" height="25" border="0" align="left">

        <style>
              .awmAnchor {position:relative}
        </style>

        <span id='awmAnchor-purplehorizontal' class='awmAnchor'>
        </span>
   </td>
</tr>

With this:

<tr>
   <td id='awmAnchor-purplehorizontal' align="left" bgcolor="#996699">
        <img src="images/spc.gif" width="1" height="25" border="0" align="left">
   </td>
</tr>

This should fix the positioning in ALL browsers without the need for any browser-specific offsets.

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

Dear Kostas,
I appreciate your help, but that didn't work. Since it's a large site, I've testing only on the first page of the site on my computer.

With those settings and copying/pasting the exact table row edit you made, the menu looks good in Firefox, Opera, and Chrome.
Only Firefox and Opera look good with the original settings on the left. For Chrome, I had to do browser-specific.
The menu has completely disappeared in IE, and in Safari, it's sitting about 20 pixels above where it should be. Changing the safari browser-specific settings makes no difference.
What do you think is going on?
I'm sending you the zipped up index.html page and AWM directory.
Thank you for working with me on this. I've loved using All Web Menus for years!!
Regards,
Virginia

Reply From: Likno Customer Support

Hello again,

I checked your menu project and it seems that you have added browser-specific offsets both in the interface and in the advanced scripting!

What you need to do for pixel-perfect positioning in all browsers is:

1) Remove ALL the browser-specific offsets shown above

2) Change your Positioning property to the following:

3) In your page change this code:

<tr>
   <td align="left" bgcolor="#996699">
       <img src="images/spc.gif" width="1" height="25" border="0" align="left">

       <style>
            .awmAnchor {position:relative}
       </style>

       <span id='awmAnchor-purplehorizontal' class='awmAnchor'>
       </span> 
   </td>
</tr>

With this:

<tr>
   <td id='awmAnchor-purplehorizontal' align="left" bgcolor="#996699">
        <img src="images/spc.gif" width="1" height="25" border="0" align="left">
   </td>
</tr>

I tested the above and it works in every browser.

Note! I recall you said something about the menu not appearing in IE. If this occurs it means you did not correctly replace the HTML code and specifically that you did not remove the <span> so you ended up with two elements with the same ID (this is an error for IE).

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

Hello Kostas!
Thank you so much. I've been using AWM on this site since 2005, and I had completely forgotten the scripting I used way back then.
You have been wonderfully helpful. After removing the scripting, I updated the rest of the browser-specific settings, and the test page now looks good in all browsers. Later today I'll update all of the pages in the site.
Thank you!
I've always been very happy with AWM as a tool for building any menus I need. And your service is wonderful. Feel free to quote me as a testimonial.
Regards,
Virginia

Reply From: Likno Customer Support

Thank you Virginia for your encouraging feedback.

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