Mouseover Horizontal Navbar Example by Deluxe-Menu.com
Mouseover Horizontal Navbar Example

Template:






    - Inactive/Disabled items
    - Items with icons
    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Top items and submenus have a shadow
    - Search feature - add the search area in the menu and type symbols.
    - Sound support!
    - Submenus go over all page objects
    - Text aligned to left




2 0 Navigation Buttons by Web-Buttons.com v3.0.0
Buy Now!   ::  Free Trial Download   ::  Blog   ::  More Info

Menu Screenshots

Mouseover Horizontal Navbar Example Vertical Css Drop

Buy Now!   ::  Free Trial Download   ::  More Info

Features

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
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed mouseover horizontal navbar example samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Over Frames Mouseover Horizontal Navbar Example
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!
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
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
Buy Now!   ::  Free Trial Download   ::  More Info

Javascript Menu. DHTML Menu.

  • Use images for backgrounds of submenus and items, icons, arrows. Using web images you can create menus completely based on graphics.
  • Design both horizontal and vertical menus and submenus with any amount of menus on a single page.
  • Place any HTML code inside the menu item - be it a flash-object, form, picture, or text. This ability lets you to build various menus of any complexity.
  • Submenus can be shown in 4 ways: - From left to right and also from left to right + upwards. - From right to left and also from right to left + upwards (e.g. for right-to-left languages).
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I'm trying out your menus, and I seem to have a problem with changing the title of a menu item. If the text is something like "Create a New Event" the entire menu spreads out and the rollover image starts replicating itself behind it, instead fo stretching with the text. So I see 1 /2 rollover images for that top level item, instead of just the one, width it's width spread out to accomodate the extra text.

I've tried the Styles bit, but that doesn't seem to fix the rollover image any...

Any pointers ?


A: You can try to set the exact width for each menu item using IndividualItem Styles.

You should use Individual Item Styles.
For example:
  var itemStyles = [
["itemWidth=120","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style0
["itemWidth=100","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style1
["itemWidth=130","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style2
["itemWidth=150","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style3
];

["Home","testlink.htm"],
["Samples","testlink.htm"],
 ["|Group 1","", , , , , "0", , , ],
 ["|Group 2","", , , , , "1", , , ],
 ["|Group 3","", , , , , "2", , , ],

...
[" More Samples","testlink.htm"],
 ["|Group 1","", , , , , "3", , , ],
 ["|Group 2","", , , , , "1", , , ],

Where "0", "1", "2", "3" - style number in itemStyles.

You also should check the width of your rollover image. It should bethe same width as your items.

You can also use
tags in the item text, for example:

  var menuItems = [
["line 1
line 2"],
];

Or you can set this parameter:

  var noWrap=0;

Try that.


Q: Is there anyway of selecting index location of the dhtml tab according to what webpage you are on ?

A: Deluxe Tabs doesn't support API functions which can return theselected tab aslo.

You can set "bselectedItem" and "  var bselectedSmItem" parametersbased on your link before you call your data file.

For example, move "  var bselectedItem" and "  var bselectedSmItem" parametersfrom your data file to your code.

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=<?php echo $seltabs; ?>;
  var bselectedSmItem=<?php echo $selsmtabs; ?&g5t;;
</script>
<SCRIPT src="data.js" type=text/javascript></SCRIPT>
</TD>

You should define seltabs and selsmtabs using server side script.

You can also set it on every page before you call data.js file, forexample:

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=4;
  var bselectedSmItem=3;
</script>
<SCRIPT src="data.js" type=text/javascript>
</TD>



Q: I have used dhtml vertical menu on my site....when I open it in IE it works fine but in mozilla it shifts to right...wht can i do so tht it will be placed at same position in all browers


A: You can try to set exact width in "px":

  var menuWidth="500px";

Q: From your website, I see that you are able to populate a menu through ASP/VB, but I have not been able to figure out how this is done.
How exactly do you use an ASP script to generate the menu items for the dynamic menu?

A: You may generate a menu from a database or XML using any server-side script, e.g., PHP, ASP, VB, etc.
However, these scripts don't work inside of Javascript .js files, so, you should move parameters of a menu from a .js file into an html-page, e.g.:

<!-- Deluxe Menu -->
<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript">  var dmWorkPath = "menudir/";</script>
<script type="text/javascript" src="menudir/dmenu.js"></script>
<!-- (c) 2006, http://deluxe-menu.com -->

<script type="text/javascript" language="JavaScript1.2">
// and describe parameters of a menu
  var parameter1=value1;
  var parameter2=value2;
etc.

  var menuItems = [
// here you generate items using server-side scripts (php, asp, vb, etc.)
];
</script>

Unfortunately we don't have examples with ASP and SQL.
The example of the menu working with PHP/MYSQL you can find here:
http://deluxe-menu.com/rq-loading-bar-MySQL-support.html




Buy Now!   ::  Free Trial Download   ::  More Info