Css Vertical Slide Menu by Deluxe-Menu.com
Css Vertical Slide Menu

Template:

Coffee Menu Template - Dropdown Html Menu






    - Sound support!
    - Transition #14 - "fade out" effect
    - Submenus dropdown on mouseover
    - 85% transparency for sub menus
    - Top items and submenus have a shadow
    - Horizontal or vertical orientation
    - Submenus automatically scrolls
    - Special JavaScript API for changing javascript menu "on-the-fly"




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

Menu Screenshots

Css Vertical Slide Menu Tutorial On Javascript Vertical Submenus

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

Features

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
Easy Setup
  • De Luxe Tuner. GUI interface to create your css vertical slide menu menus easily and in no time
  • Sensible menu parameters for manual editing
Drop Down Menu Mouse Over Css Vertical Slide Menu
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.

  • Setup menu parameters manually or using De Luxe Tuner. Then add some rows of a code within html page code and your menu is ready!
  • Use special Java Script methods for: Dynamic changing of items (link, text, icons, arrows and even individual style!). Addition/removing of items or submenus. Disabling and enabling menu items. Getting the info on every submenu, menu, and items. Changing appearance of items. Other coding tricks.
  • Cross-frame mode lets you to construct full-featured dhtml menus on the pages with frames. But for all that frame set it's not necessary to insert any additional code into all the pages - just specify several extra menu parameters.
  • Ability to handle the menu from the keyboard via keystrokes.
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I'm creating a "Clear" style dhtml menu and for whateverreason it automatically spaces the menu items unevenly.
For the life of me I can't figure out how to set the spacing evenly.

A: Try to set exact width for each top item using Individual Item Styles:

  var itemStyles = [["itemWidth=120px"],];

  var menuItems = [
["Item 1","", "", "", "", "", "0", "", "", ],
["Item 2","", "", "", "", "", "0", "", "", ],
["Item 3","", "", "", "", "", "0", "", "", ],
["Item 4","", "", "", "", "", "0", "", "", ],
["Item 5","", "", "", "", "", "0", "", "", ],
];



Q: Is it possible to put PHP, or other scripting languages within the tab menu javascript?

A: See, for each item you should assign the ID property of the content DIV.

["Style Name","contentName", "", "", "", "", "1", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Style Description","contentDescription", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Style Variations","contentVariations", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Empty","", "", "", "", "", "2", "", "", ],

And on your html page you should create DIV's with such ID.
<div id="contentName" style="height: 0%; visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/style01_title.gif" width=140 height=90 alt="Glass Style Tabs"></p>

<br><br><br>

You should paste your content here!!!!!
</div>

You can paste any code within DIV's (PHP, Javascript ...)



Q: Is there a way to have the menu stay expanded in the same exact state when
I click on a menu item of the javascript tree view and go to a new page?

A: There is no need to write additional code on a server side to remember what items were expanded/collapsed.
DHTML Tree Menu can save items state automatically.
Please, see the example of the menu that works with cookies:
http://dhtml-menu.com/tree-examples/tree-menuxp-save-state.html

Set the following parameter:

  var tsaveState = 1;

and the menu remembers its structure for each user who visit your page.
Try to expand/collapse items. Then reload the page and you'll see results.


Q: We use IFrames and Frameset through out our program. Will Deluxe-Menu and Deluxe-Tabs work for us.
Will this work for us, using the layout below. Menu will be in frame3 and tabs in frame4. Should pop up in frame5.

       <frame>    <frame1>     <frame2>
  <frame3-Deluxe-Menu>    <frame4-Deluxe-Tabs>
<frame5 - Content and more IFrames and Framesets>


A: Deluxe Menu doesn't work with <IFrame> objects. It works with<frameset> objects only. All it can to do with <IFrame> is to loadpages into it.
You should use standard installation for the menu (cross-frame mode).

See more info here:
http://deluxe-menu.com/cross-frame-mode-sample.html
http://deluxe-menu.com/data-samples/cross-frame-horizontal-1-sample.htm

Deluxe Menu and Deluxe Tabs will work fine in such frame structure.


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