Side Right Slide Menu Javascript by Deluxe-Menu.com
Side Right Slide Menu Javascript

Menu Screenshots

Side Right Slide Menu Javascript Javascript Menu Float Horizontal Vertical

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
Easy Setup
  • De Luxe Tuner. GUI interface to create your side right slide menu javascript menus easily and in no time
  • Sensible menu parameters for manual editing
Javascript Pull Down Menu Examples Side Right Slide Menu Javascript
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!
Cost Effective
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed side right slide menu javascript samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Create contextual menus for your pages. For this purpose you should assign a special function for the object you want. The current coordinates of the mouse pointer or your own ones can be used for the contextual menu.
  • When the submenu is larger than the visible area of the page the submenu will be automatically decreased. To see all the submenu items you do not need to use scrollbars or something like that - just put your mouse to the bottom of a submenu and it will be automatically scrolled! You can also specify height and width for each separate submenu.
  • Build menus completely based on Cascading Style Sheets. It is possible to appoint the individual CSS styles for separate elements of the menu.

Recent Questions

Q: One other issue I'm having is that the content for the menu bar in java "selected tab" on my site does not show up in IE7. Works fine in firefox, though. Any ideas about that?

A: Try to delete height: 0%; parameter from the styles:

<div id="content1" style="height: 0%; visibility: hidden;" class="tabPage">

So you'll have:
<div id="content1" style="visibility: hidden;" class="tabPage">


Q: Is there any way to change the font size of the secondary and tertiary links but yet have a different font size for the primary links?


A: You can use different font style for each link on each level.
You should use Individual Item Styles.
Please, use Dhtml Tuner application to create individual styles.

For example:

// --- DHTML Tuner style names ---
  var tstylesNames=["Individual Style 1","Individual Style 2","Individual Style 3","Individual Style 4","New Individual Style",];
  var tXPStylesNames=["Individual Style 1",];

  var tstyles = [
["tfontStyle=bold 8pt Tahoma","titemBackColor=#265BCC,#265BCC","tfontColor=#FFFFFF,#428EFF","tfontDecoration=none,none"],
//style 0 ["tfontStyle=bold 8pt Tahoma","titemBackColor=#265BCC,#265BCC","tfontColor=#215DC6,#428EFF","tfontDecoration=none,none"],
//style 1 ["tfontDecoration=none,none"],
//style 2
["tfontStyle=normal 8pt Tahoma","tfontColor=#013D6D,#5555FF"],
//style 3
["tfontStyle=bold 11px Bookman Old Style","tfontColor=#000000,#000000","tfontDecoration=none,underline"],
//style 4
];

  var tmenuItems = [

["+DHTML Menus","", "images/xpicon1.gif", , , "DHTML Menus", , "0", , , , ],
//style 0
 ["|DHTML Menu","http://dhtml-menu.com", "images/icon1.gif", "images/icon1o.gif", "images/icon1o.gif", "Information", "_self", , , , , ],
 ["|+DHTML Tree Menu","", "images/icon1.gif", "images/icon1o.gif", "images/icon1o.gif", "Support", "_self", "2", , , , ],
//style 2
   ["||2 styles: standard & XP","", , , , , , "3", , , , ],
//style 3
   ["|||Item 23","", , , , , , "4", , , , ],
//style 4
   ["|||Item 24","", , , , , , , , , , ],
   ["||Individual Item & Submenu Styles","", , , , , , "3", , , , ],
//style 3
   ["||Floatable & Movable Menu","", , , , , , "3", , , , ],
//style 3
....


Q: Is there a tutorial on how to use css navigation bar

A: Unfortunately we don't have step by step tutorial yet.
We'll try to create it in the nearest time.

1. Create your Css menu in Deluxe Tuner.

When you open Deluxe Tuner you can click "File/New"and add items and subitems using buttons "Add Item" and "Add Subitem" onthe main window.
See the parameters for the menu on the main window.

More info about menu parameters you can find on our site
http://deluxe-menu.com/css-menu/parameters-info.html

You can also use Individual Styles for items and subitems
http://deluxe-menu.com/individual-item-styles-info.html
http://deluxe-menu.com/individual-submenu-styles-info.html

2. You should install the menu on your page.
You can click, for example, File->Save Css Menu/Export HTML

So, you'll have folder with images ("deluxe-css-menu.files/" folder by default),deluxe-css-menu.html file and deluxe-css-menu.js file with all menu parameters (project file you need, if you wantto modify your menu later).

Open deluxe-css-menu.html file in any text editor and copy several rows ofcode into your page (for example index.html page of your website).

Copy and paste several rows into your html page (index.html).

<head>
...
<style>
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{top:-2px; left:98%}
ul.cssMenu {
...
ul.cssMenum0 li li {
margin:0px;
}
</style>
...
</head>

You should also copy "deluxe-menu.files/" folder with all imagesinto the same folder with your index.html page.

More info about installation:
http://deluxe-menu.com/css-menu/installation-info.html
Try that.

Q: How do I change the font style for menus to bold, but leave the sub-menus normal in the html navigation bar?
I understandthere’s a “fontStyle” variable, but is there an “itemfontStyle”?

A: You can use Individual Item styles to set specific parameters for eachitem or submenu.

  var fontStyle=["normal 9pt Verdana","normal 9pt Verdana"]; //for subitems

//style for the top items:
  var itemStyles = [
["itemHeight=21px","itemBackColor=#F2F3F2,#1665CB","fontStyle='bold 9pt Verdana','bold 9pt Verdana'"],
];