Popup Callout On Mouseover by Deluxe-Menu.com
Popup Callout On Mouseover

Menu Screenshots

Popup Callout On Mouseover Source Code For Javascript Pop Down Menu

Features

Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed popup callout on mouseover samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Unrivalled Features
  • Scrollable, dragable, floating, right-click menus
  • Keyboard navigation - press Ctrl+F2 to enter the menu
  • Unique Java Script API for altering menu "on-the-fly", without page reloading
  • AJAX technology - loads menu data from the server "on-fly and on-demand".
  • Search feature - add the search area in the menu and type symbols. The found words will be higlighted.
  • Sound support!
Javascript Tutorial Popup Position Popup Callout On Mouseover
Seamless Integration
  • Cross-frame support - menus work on frameset-based pages
  • Visible over flash, select boxes, iframes, java applets
  • Multiple menus on the same page
  • Amicable to other scripts and css styles
  • Any HTML code can be used inside menu items
Compatibility              
  • Full cross-browser compatibility including IE, Netscape, Mozilla, Opera, Firefox, Konqueror and Safari on Windows, Mac OS and Linux
  • Menu can be populated from a database using ASP, PHP, etc.
  • Search engine friendly
  • Support for any doctypes
  • Fits for secure sites
  • Section 508 compliant
High Performance
  • AJAX menu loading - loads web menu data from the server "on-the-fly".
  • Commonly loads quicker than other html page elements
  • UL/LI items structure
  • Runs well with an unlimited number of submenus and items



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Tune menu parameters manually or using Deluxe Tuner. Then add several rows of a code within html page - your menu is ready!
  • Use special JavaScript functions for: Dynamic changing of items (text, link, icons and even individual style!). Making a menu item active/inactive. Addition/removing of items. Changing of visibility of items. Getting the information on any menu, submenu and items. Other tricks.
  • Opportunity to control the menu from the keyboard.
  • Cross-frame mode allows you to build full-featured menus on the pages that use frame-based structure. But for all that it's not necessary to insert any additional code into all the pages - just specify some additional parameters of the menu.

Recent Questions

Q: I have a question that I cannot find in your FAQ section about your Deluxe Tree Menu.

Bought the whole set a few days ago and is very happy about it, I am uzzled & frustrated about one thing now though.

- = Link

+ = Link with subCat.

I have a menu that looks something like this:

- Home

+ Our products

+ FAQ

+ Stores

- Contact

+ Wholeseller

+ About us

Now every link here has a icon/s to the right that shows if the category is folded up or not. Trouble is that so has the - Home and - Contact that DON'T have any subitems! How to create dhtml menu so those two tree items won't get the rightsided icons?

The frustrating/confusing thing is if I place - Home or - Contact into lets say + Our products, the right side icon goes away and there it looks as I want it. But I NEED it to look this way in the top section.

A: You have icons in the top items on the right side in XP-style only.

You can set the following parameter to turn off XP-style:

  var tXPStyle=0;



Q: I am evaluating your product and would like to display my top menu without a border, but have the dropdown (child menus) all have a border and shadow.
If I change the menuBorderWidth to anything but 0, I get a menu on both the top menus and dropdowns. I need a topBorderWidth and a childBorderWidth.

Is there any way to accomplish this?


A: Yes, you can do it.

Please, set:

  var menuBorderWidth=0;

To set border for submenus you should use Individual Submenu styles, for example:

  var menuStyles = [
     ["menuBorderWidth=1","menuBorderColor=#9A9CA7"], //style 0
];

  var menuItems = [

     ["Home","testlink.html", , , , , , , , ],
     ["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", , , , , , ],
          ["|Features","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", , , , "0", , ], //style 0
     ["Samples","", "default.files/icon1.gif", "default.files/icon1o.gif", , , , , , ],
          ["|Sample 1","testlink.html", "default.files/icon6.gif", "default.files/icon6o.gif", , , , "0", , ], //style 0
          ["|Sample 2 is Disabled","testlink.html", "default.files/icon6.gif", "default.files/icon6o.gif", , "_", , "-1", , ],
...

You should assign style for the first item in the submenu.


Q: The items of the flash drop down menu hides behind the video. Do you have other suggestions?

A: You should add "opaque" parameter for <object> and <embed> tags, for example:

<object width="750" height="435">
<param value="http://www.youtube.com/v/_-OiQygm2uU&hl=en&fs=1&autoplay=1" name="movie"/>
<param value="true" name="allowFullScreen"/>
<param value="always" name="allowscriptaccess"/>
<param name="wmode" value="opaque">
<embed width="750" height="435" allowfullscreen="true" wmode="opaque" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/_-OiQygm2uU&hl=en&fs=1&autoplay=1"/>
</object>



Q: We are a registered user of deluxe menu.
We are using your Deluxe-Menu.
We have one problem we have implemented menu in our html page.
It works very well in IE but there is a problem in firefox.
It display gap between two menu.



A: 1) You can move search engine friendly code inside the NOSCRIPT tag:
<!-- Code for Deluxe Menu Items. Generated by Deluxe Tuner -->
<noscript><a href=http://deluxe-menu.com/>Javascript Menu by Deluxe-Menu.com</a>
<div class="dmlinks" style="font:normal 11px Verdana;color:#000000;text-decoration:none">
<a href="default.html">Home</a>
<a href="products.html">Products</a>

...
<a href="channel_partners.html">Partners</a>
<a href="feedback.html">Feedback</a>

<a href="http://blogs.innowera.biz">Blogs</a>
</div>
<!-- End of Code for Deluxe Menu Items -->
</noscript>

You won't see links when your page loads in that case.

2) You should specify the following parameter:
  var itemSpacing="0";