Javascript Scrollable Dropdown by Deluxe-Menu.com
Javascript Scrollable Dropdown

Menu Screenshots

Javascript Scrollable Dropdown Dhtml Menu Transparent

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 javascript scrollable dropdown menus easily and in no time
  • Sensible menu parameters for manual editing
Dhtml Transparent Menu Javascript Scrollable Dropdown
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!
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
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

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: Can you resize the height of a submenu button to 22px? (The main dhtml pulldown menu should remain the same height).

I am sending you html files. Please checked it out and is it possible in delux menu?

A: Set itemHeight=22px for the styles (dhtml pulldown menu and sub):

  var itemStyles = [
["itemWidth=200px","itemHeight=22px","itemBackImage=left.files/button-gradient.jpg,left.files/button-gradient.jpg", "fontStyle='normal 14px Arial','normal 14px Arial'","fontColor=#ccd0d1,#a3a377","fontDecoration=none,none"],
["itemHeight=22px","itemBackImage=left.files/button-gradient.jpg,left.files/button-gradient.jpg","itemBorderWidth=1", "itemBorderStyle=solid,solid","itemBorderColor=#a3a377,#a3a377","fontStyle='normal 12px Arial','normal 12px Arial'","fontColor=#ccd0d1,#a3a377","fontDecoration=none,none"],
];



Q: Is there a way we can add javascript behaviors to the sliding dhtml menu actions?
For example, is there a way we can add an onClick function to a menu item
(eg,onClick="return MyFunction( )" ) so that we can catch and process key events?

A: Unfortunately, you can't assign onmouseover/onClick/onContextMenu event to each item.
However, you can achieve this by using standard html objects within items, for example:

  var menuitems = [
["
item text
", ""]
];

You can use your own Javascript code instead standard links. For example:

  var menuItems = [
["text", "javascript:your_code_here"]
];

Try that.


Q: When I click between tabs, only one tab remains in its active state for a dhtml tab navigation.
Why isn't the tab changing to look "active" to reflect the page that it's on?
Please let me know where this setting is.


A: Deluxe Tabs doesn't support API functions which can return theselected tab.

You can set "bselectedItem" and "  var bselectedSmItem" parametersbased on your link before you call your data file.

For example, move "  var bselectedItem" and "  var bselectedSmItem" parametersfrom your data file to your code.

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=<?php echo $seltabs; ?>;
  var bselectedSmItem=<?php echo $selsmtabs; ?>;
</script>
<SCRIPT src="data.js" type=text/javascript></SCRIPT>
</TD>

You should define seltabs and selsmtabs using server side script.

You can also set it on every page before you call data.js file, forexample:

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=4;
  var bselectedSmItem=3;
</script>
<SCRIPT src="data.js" type=text/javascript></SCRIPT>
</TD>

Try that.




Q: Things are mostly working great. I want my menu to appear centered at the top the page. Here's the code:

<table style="text-align: left; width: 100%;" border="0" cellpadding="2"cellspacing="2">
<tbody>
<tr>
<td style="width: 100%; text-align: center;"><script type="text/javascript" src="navbar.js"></script>
</td>
</tr>
</tbody>
</table>

The table appears at the far left edge of the window. I tried with both absolute (x=20, y=10) and relative (both x and y unset) coordinates. Help!


A: If you want to center the menu paste itwithin the <div > or <table> with a static position and specify a center alignment for it, for example:

<DIV align=center>
<SCRIPT src="data/data.js" type=text/javascript>
</SCRIPT>
</DIV>

<table width=800>
<tr>
<td align=center width=600>

More Q&A

Drop-Down menu code explained

Jun 10, 2010 ... The full working drop-down menu code is provided at the very end so you ... to try it yourself, scroll down the page and copy the complete code. ... Modify the JavaScript to create a sliding effect for the drop down menu

Flowplayer Forums - Feature request: Drop Down Menu

I would use the drop down box if: It fails nicely when JS is not present (i.e., uses CSS :hover selector at its base). Using JS, you can

scrolling background image in FF - Ultimate Web Site Drop Down

Howdy,I am running into an issue with a scrolling background image I have in a div (id=#rightcontent) with overflow set to scroll

Killersites.com Forum - List of threads

Jul 21, 2010 ... Javascript / DOM bug with Firefox - please read for details. ... Hi, I am trying to create a scrollable dropdown menu using <ul> and <li>

Mod Drop Down Hack ((FINAL)) [Archive] - vBulletin Community Forum

Mod Drop Down Hack ((FINAL)) This mod will add a drop down scroll in your ... The javascript only activates on changing of the list box selected item

YUI Library :: Forums :: View topic - Nested Layout problem with

Oct 28, 2009 ... YUILibrary - Open source JavaScript and CSS for building richly ... Now you set the scroll property to be null in the nested layout (top2)

Dreamweaver Drop-down menu problem

Multi browser, light javascript, customizable.... I use them in <?php include(" includes/navigate.inc"); ? ... Scroll to the bottom of the page for examples

Kirupa Forum Flash Vertical Dropdown Template

Kirupa Forum Flash Vertical Dropdown Java Script Horizontal Dropdown Menu. ... way to add sophisticated scrollable dropdown menus to your Macromedia Flash

bind unordered list item after form submitted - jQuery Forum

Oct 12, 2010 ... .dropdown dd ul { background:#D66970 none repeat scroll 0 0; border:1px solid # FDFDFD; ... type="text/javascript"></script> <script>

CSS on SELECT dropdown MENU item - Webmaster Forum

What I needed to be colored was the actual scroll like the textarea but it just can't be ... Part Two: Add the JavaScript to the HTML page

Move Menu Bar and remove Scroll Bars - is it possible? (View topic

Oct 16, 2010 ... besides the drop down menu for selecting the toolbar to edit, below a button ... OOo Basic, Python, BeanShell, JavaScript, External Programs

Boagworld - suggestions for my site

On each town page the dropdown menu will be generated with php. ... out for a compliant pull down menu and replace the Javascript one you have. ... set to 1024 and your page has a left/right scroll, try and remove this

Mobile Design Pattern: Drop-down menu - Forum Nokia Wiki

Drop down menus should be used cautiously on mobile devices. ... created a custom drop down menu whose menu pane slides upwards as you scroll. ... High performance Widgets: Combine your JavaScripts and CSS in external

Proper Scroll Bar In Bookmark Dropdown Menu - Google Chrome Help

Jun 7, 2009 ... Proper Scroll Bar In Bookmark Dropdown Menu. ... I would like to see a real scroll bar (exactly the same as in a tab) for large bookmark

Joomla! • View topic - MiniDoc: Creating a CSS Drop-down Menu

I am having a problem where the drop-down list is hidden behind the containing ... extra room for the drop down, or there is always a scroll bar attached. .... So that is an error on my part since the Javascript (getElementByID) only

How to customize the chained list application [Archive] - OSCR

Feb 17, 2006 ... I tried to edit the info while using FrontPage but the drop down box function will not work, rather the menu becomes a scroll menu within the box. ... addOption("Webmaster-JavaScript", "JavaScript Kit",

Themes: color gradient for drop-down list

But maybe you'll notice: the background color of the drop-down list now matches ... repeat scroll 0 0 transparent; } #top-bar li ul li a { background-color:

Dynamic Categories Drop Down with CSS only... No HTML & No JS

This drop down is good because it does not require you to include manually the ... top: ...px; background:#FFFFFF none repeat scroll 0 0;

horizontal scroll bar for drop down list box

Iam trying to get horizontal scroll bar for drop down box using HTML,css and javaScript, when value in drop down is toolarge. If any body know the solution,

spanner's radiant-forum-extension at master - GitHub

In that case, the forum layout is chosen for each site using a dropdown on the ... An unobtrusive javascript front end (based on mootools but without much fanciness) is included ... or j: Scroll down. t: Toggle visibility of head labels

BBCode: Embed PDF Files (No JavaScript/No iFrames) (BB Code

yotsume has found a bug where VB drop down menus (like "thread tools") may get hidden ... It scrolls the pdf just fine, but will not scroll the web page

[GUIDE] B.U.G V2 ~ Full GAIA Town Guide.~ | Forum | Gaia Online

Aug 10, 2007... on Internet Explorer go to your tool bar and click on "Tools" bar, a side scroll drop down. Click the "Internet Options..." button

ActiveWidgets • Version 2.0 Custom Drop-down Editable Textarea

Aug 5, 2006 ... By mixing a simplistic version of the drop-down-controls: /javascript.forum. 11951.1/grid-in-a-grid-scrollbar.html and the editable textarea:

no scroll bar on drop down list - iphone/touch - WebDeveloper.com

Sep 21, 2010 ... no scroll bar on drop down list - iphone/touch PHP. ... i get it on the iphone/ touch the scroll bar vanishes from the drop down list (about 15 entries) and only displays the first 5 or so. ... NET, Java (NOT JavaScript!