Jquery Flyout Menu by Deluxe-Menu.com
Jquery Flyout Menu

Menu Screenshots

Jquery Flyout Menu Dhtml Scrolling Navigation

Features

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
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!
Menu Java Script Html Jquery Flyout Menu
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
Cost Effective
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



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Good menu is an essential part of website commercial success. If people can't find their way around the site, they will fast give up seeking and retire, never to return. So, it's extreme serious that your website has a accurate, precise, prompt, and navigation of immaculate appearance.
    Don't let your web site guests to get lost. Try Deluxe Menu!

Recent Questions

Q: Can you please give me tips on how I can style all menuitems to have font bold when selected and normal font when not selected?

A: Unfortunately, Deluxe Tree doesn't have such a feature. You can onlyset it's color. You cannot set the font of menu item bold when selected.

You can set menu item's font bold onMouseover, see example here:
http://deluxe-tree.com/data-templates/vista-style-7-template-sample.html

You should addthe following code in your data file:

function changeFont(obj, over)
{
obj.style.fontWeight = over ? 'bold' : 'normal';
obj.style.fontSize = over ? '13px' : '12px'; // You can not use this line
}

  var tmenuItems = [

["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Security</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Ease of Access</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Internet Options</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Windows Firewall</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Network and Internet</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Hardware</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Programs</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Appearance</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>User Accounts</div>","", "", "", "", "", "", "", "", ],
 ["|<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Personalization</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Sound and Speech</div>","", "", "", "", "", "", "", "", ],
["<div onMouseOver='changeFont(this, 1)' onMouseOut='changeFont(this, 0)'>Additional Options</div>","", "", "", "", "", "", "", "", ],
];

Please, notice also that you should add this function every time whenyou change your menu in Deluxe Tuner application, as Tuner deletesthis function.



Q: Can all the java script be contained with in the html and not use an external .js file?

A: Of course, you can place all Javascript data from .js file within yourhtml page code!

Q: Do you have a template example of creating menu javascripts using data stored in a database?


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>

The example of the menu working with PHP/MYSQL you can find here:
http://deluxe-menu.com/rq-loading-bar-MySQL-support.html


Q: I’m wondering if there is a way to keep the roll over on the current page for the script drop down menu.
Pleaselet me know if it is possible and what I should do.


A: You can find more info here:
http://www.deluxe-menu.com/highlighted-items-sample.html
Deluxe Menu has only two states normal and mouseover.

Try to do the following things:

- delete   var pressedItem=1; parameter from your data file
- set correct parameter on each page before you call data file, forexample:

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

...
<script type="text/javascript" src="menudir/data.js"></script>

You can also set a pressed item using Javascript API:

function dm_ext_setPressedItem (menuInd, submenuInd, itemInd, recursion)

Sets a current pressed item.
menuInd - index of a menu on a page, >= 0.
submenuInd - index of a submenu, >= 0.
itemInd - index of an item, >=0.
recursion = true/false - highlight parent items.

But notice, to use dm_ext_setPressedItem() you should know ID of selected item and subitem.
You can't get this ID after you reload your page. That is why you should write your own code on PHP.