Javascript Vertical Sliding Menu by Deluxe-Menu.com
Javascript Vertical Sliding Menu

Template:

iPhone 6 Template - Code CSS Menu






    - Visible over select boxes, iframes, pdf, flash, Java applets.
    - Keyboard navigation - press Ctrl+F2 to enter the top menu
    - Relative/Absolute menu position
    - Cross-frame support - menus work on frameset-based pages
    - Submenus dropdown on mouseover
    - Horizontal or vertical orientation
    - Top items and submenus have a shadow
    - Items with icons




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

Menu Screenshots

Javascript Vertical Sliding Menu Dropdown Menus In Javascript

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

Features

Cost Effective
Easy Setup
  • De Luxe Tuner. GUI interface to create your javascript vertical sliding menu menus easily and in no time
  • Sensible menu parameters for manual editing
Menu And Submenu Creation Code Javascript Javascript Vertical Sliding 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
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed javascript vertical sliding menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
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
Buy Now!   ::  Free Trial Download   ::  More Info

Javascript Menu. DHTML Menu.

  • Use images for backgrounds of submenus and items, icons, arrows. Using web images you can create menus completely based on graphics.
  • Design both horizontal and vertical menus and submenus with any amount of menus on a single page.
  • Place any HTML code inside the menu item - be it a flash-object, form, picture, or text. This ability lets you to build various menus of any complexity.
  • Submenus can be shown in 4 ways: - From left to right and also from left to right + upwards. - From right to left and also from right to left + upwards (e.g. for right-to-left languages).
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I’m interested in buying your products.
I have no experience in programming, only know html/php.
How easy would it be to set up these mouseover menus?
I understand your explanation of copying scripts into the relevant html pages.
But what about inserting the menus? Do I have to program them myself?


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

1. Create your menu in Deluxe Tuner application.
You can create any menu as you like in Deluxe Tuner.

You can use ready to use templates. You can find them in the templateswindow.

When you open Deluxe Tuner ( Deluxe Menu ) you can click "File/New"
and add items and subitems using buttons "Add Item" and "Add Subitem" onthe main window.

You should set items and subitems parameters on the "Item Parameters"window.
See also other parameters for the menu on the main window.

More info about menu parameters you can find on our site
(you can alsouse local version of the site which you can find in the trial package
"Deluxe Menu / deluxe-menu.com /")

http://deluxe-menu.com/parameters-info.html
http://deluxe-menu.com/menu-items-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/Export to HTML (you can't do it inthe MAC version).

Add several rows into your html page.

<head>
...
<!-- Deluxe Menu -->
<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript">  var dmWorkPath="deluxe-menu.files/";</script>
<script type="text/javascript" src="deluxe-menu.files/dmenu.js"></script>
<script type="text/javascript" src="data-deluxe-menu.js"></script>
//data-deluxe-menu.js - data file created in Deluxe Tuner.
...
</head>

<body>
...
<table>
<tr><td>
<script type="text/javascript" src="deluxe-menu.files/data.js"></script>
</td></tr>
</table>
...
</body>

You should also copy all engine files:
dmenu.js
dmenu4.js
dmenu_add.js
dmenu_dyn.js
dmenu_key.js
dmenu_cf.js
dmenu_popup.js
dmenu_ajax.js
dmenu_search.js
into "deluxe-menu.files/" folder.
You should place this folder in thesame folder with your index. html page.

Try that.

Q: How can I keep the javascript contextual menu items from opening into a new window when selected?

A: You can set target parameter for all javascript contextual menu items:

  var itemTarget="_self";

or for each item individually:

["Home","testlink.html", "", "", "", "_self", "", "", "", "", "", ],



Q: You have a great, and very intuitive and easy to learn, product.

I'm down to two dumb questions:

A. What controls the little red arrows? I'd like them on every one of the navigators.
B. How do I create equal space between the drop down menu items? It looks weird right now.

A: 1) If your top item has a submenu this arrow will appear automatically.

For the items without submenus you may write:

["Home   <img src='skin_data.files/arrowmain11.gif'>","index.html", "", "", "", "_self", "", "", "", "", "", ],
["About Us   <img src='skin_data.files/arrowmain11.gif'>","about_us.html", "", "", "", "_self", "", "", "", "", "", ],
You can find arrowmain11.gif image in the attached example.

Actually you can add any html code inside item's text.

2) Set the drop down menu padding:

  var itemPadding="3px 15px 3px 3px";

Q: My question is, the down arrows only show on the main page, how do I fix this.


A: Please, check images paths within data .js file.
For example, if you have data.js file here:

c:/website/data.js

and your images are stored here:

c:/website/images/

you should set image name so (for example):

  var arrowImageMain = ["images/arrow1.gif", "images/arrow2.gif"];

If you use Tuner, you should save data .js file before you'll selectimages. When you save .js file it means that you set a root directoryfor the project, so Tuner can make all selected images with relativepaths.


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