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

Template:

Dark Red Rounded Template - CSS Menu Script






    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Status string shows item labels
    - Hundreds of pre-designed templates
    - Personal CSS styles for separate menu elements
    - Sound support!
    - Visible over select boxes, iframes, pdf, flash, Java applets.
    - Horizontal or vertical orientation
    - Several menus on one page




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

Menu Screenshots

Example Of Expanding Css Navigation Slide Menus Javascript

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

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
Menu Html Dhtml Source Code Example Of Expanding Css Navigation
Cost Effective
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
Buy Now!   ::  Free Trial Download   ::  More Info

Javascript Menu. DHTML Menu.

  • Submenus drop down over all the objects of the page (select, flash, object, embed, applet). If for some reasons a submenu can't drop down over an object, the latter will be hidden for a time when the submenu is shown.
  • These effects will make your menu more attractive and stylish. You can cast a shadow on the menu and submenus, set transparency. Among available transitional effects there are such as fade, mosaic, random dissolve, slide out and many others.
  • Create individual styles and assign them to any submenu and item. Use individual styles to achieve stunning effects!
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I want to have the pop-up floating window display as you mouse over an image - is this possible?

A: For example you want to open a popup onMouseover, onClick oronMouseout on a link.

So, you should create a link on your page and set id="" for it, forexample:

<a href="javascript:;" id="link">Open popup OnClick</a>
<a href="javascript:;" id="over">Open popup OnMouseover</a>
<a href="javascript:;" id="out">Open popup OnMouseOut</a>

In Deluxe Tuner you should set:
onMouseOver - over
onMouseOut - out
onClick - link

So you'll have

deluxePopupWindow.attachToEvent(win,',,onClick=link,onMouseOver=over,onMouseOut=out,')

Q: Does your cool dhtml menu work on a Mac platform with Dreamweaver?

A: To create your cool dhtml menu on MAC you can use HTML version of Deluxe Tuner (for MAC OS). You can find it here:

http://deluxe-menu.com/deluxe-tuner-info.html

Unfortunately we don't have html version of the Tuner for Deluxe Treeand Deluxe Tabs now. We'll try to create it in the nearest future.

Deluxe Menu wasn't developed as Dreamweaver/Frontpage/GoLIveBuilder extension,BUT you can use it as standard Javascript files. To install the menuinto your html page:

1. open the page in your program
2. open html source code of the page
3. add several rows of code (<script> tags), For info see: http://deluxe-menu.com/installation-info.html

That's all.
To create and configure your cool dhtml menu use Deluxe Tuner application

(included into the trial package): http://deluxe-menu.com/deluxe-tuner-info.html



Q: My question is how can I change the size and color of the font for the
main items in the simple dhtml menu, not the drop downs?


A: You can use Individual Item Styles in that case:
http://deluxe-menu.com/individual-item-styles-info.html

Set the style you need for subitems:

  var fontStyle=["normal 11px Trebuchet MS, Tahoma","normal 11px Trebuchet MS, Tahoma"];

Set the style you need for main items:

  var itemStyles = [
["fontStyle='bold 12px Arial','bold 12px Arial'"], // style 0
];

Assign this style for main items:

  var menuItems = [
["Scenic album","scenic-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
 ["|Item 8","", "", "", "", "", "", "", "", "", "", ],
 ["|Item 9","", "", "", "", "", "", "", "", "", "", ],>  ["|Item 10","", "", "", "", "", "", "", "", "", "", ], ["Floral album","floral-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
["Southwest album","southwest-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
["Wildlife album","wildlife-album.htm", "", "", "", "", "0", "", "", "", "", ], //assign style 0
];

Q: 1) Can any HTML be inserted in to the text?

2) As the item has no link, how can I prevent the item being highlighted on mouseover?


A: 1) Yes, you can insert any html code within menuItems, for example:

 ["|You can place <b>any HTML code</b><br> to item, for example <u>image</u>:<br><img src=img/logo.gif>","testlink.html"],
 ["|Index  <select style='width:120px;height:17px;font:normal 10px Tahoma,Arial;'><option>Section 1<option>Section 2<option>Section 3</select>", "", "", "", "", "", "", ""],
 ["|Search <input type=text style='width:80px;height:17px;font:normal 10px Tahoma,Arial;'>  <input type=button value='Go' style='width:30px;height:17px;font:normal 10px Tahoma,Arial;'>", "", "", "", "", "", "", "0"],
 ["|Write Us", "mailto:[email protected]", ""],

2) Yes, you can do it.

You should create Individual Style for it.

For example:
  var itemStyles = [
["itemBackColor=#FCEEB0,#FCEEB0","itemBorderColor=,#FCEEB0","fontColor=,#000000"], //style0
];

["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", , , "0", , , ], //style0


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