Example Of Expanding Css Navigation by Deluxe-Menu.com
Example Of Expanding Css Navigation

Menu Screenshots

Example Of Expanding Css Navigation Navigation Bars Javascript

Features

Easy Setup
  • De Luxe Tuner. GUI interface to create your example of expanding css navigation menus easily and in no time
  • Sensible menu parameters for manual editing
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
Tutorial Menu Popup Javascript Cross Browser Example Of Expanding Css Navigation
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
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!



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Use a mouse to move a menu as a usual window. Also you can create the menu where each submenu can be "separated" from the menu (MS Office toolbar-like mode).
  • When the page is scrolled the menu remains visible. The menu can "float" along one or two coordinate axes.
  • There can be multilevel menus - create as many rows of the menu as necessary. Any submenu in its turn can include different number of columns.

Recent Questions

Q: I have used Deluxe tuner menu on a web page and facing two small problems

a) The separator I have used do not show up. This is supposed to be a black horizontal line below every menu item. The image name is sep.jpg

b) The submenu appears on the right and I am unable to figure out a way to get the submenu to appear on the left. My navigation is placed on the right panel so if the sub menu appears on right of drop down menu bar, it practically goes off the page.

Can you please help with this and let me know why this is happening ?

A: 1) You should set separators between main items:

["Home","testlink.html", "data.files/bul.jpg", "data.files/bul.jpg", "", "", "", "", "", ],
["-"],
["About Us","", "data.files/bul.jpg", "data.files/bul.jpg", "", "", "", "", "", ],

And set:
  var separatorVImage="data.files/sep.jpg";
  var separatorVWidth="100%";
  var separatorVHeight="1px";
  var separatorPadding="0px";

2) You should set the following parameter:

  var smViewType=2;



Q: Can I use javascript to get the object (getElementByID). If not howdo I hide my dropdown menu on print?

A: You can add a new button to print your page and call onClick event, soyou should write:
<body ....
onClick="document.getElementById('dm0m0').style.visibility='hidden'; window.print();">
...
</body>
Or you can use the same javascript code from your menu item.

For example:
  var menuItems = [
["Print", "javascript:document.getElementById('dm0m0').style.visibility='hidden';
window.print();", icon1, icon2],
];
But if you want to hide the menu when your customers push "File/Print"you should write so:
You must create two functions, for example:

function myprint()
{ document.getElementById('dm0m0').style.visibility='hidden';
window.print();
}
function myprint2()
{ document.getElementById('dm0m0').style.visibility='visible';
window.print();
}
You should add this functions into your code.

And then you must write so:

window.onbeforeprint = myprint;
window.onafterprint = myprint2;


Q: On the home page, when using Opera, and I have a report from a user who viewed the site with Safari, that the home page dhtml select menu did not work, but the subsequent pages did. I have no problem when using Internet Explorer, and I have not yet tested the site with Firefox. Do you have an idea what may be causing this behavior, and how to fix it?

A: Try to add the following style to your TD tag.

<TD id=navborder vAlign=top width=200 style="z-index: 10; position: relative;">



Q: I have downloaded the trial version and so far I really like what I see except for one issue. Any page that includes the following doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

seems to break the absolute positioning of the menu and sends it to the far upper left corner of the page. Any help on fixing this would be greatly appreciated.


A: The problem is in <!DOCTYPE> attribute.

Please, set 'px' units for posX and posY parameters,for example:

  var posX="100px";
  var posY="100px";