Iphone Like Javascript Menu by Deluxe-Menu.com
Iphone Like Javascript Menu

Menu Screenshots

Iphone Like Javascript Menu Creating Collapsible Menus

Features

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
Sample Menu Template Iphone Like Javascript Menu
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
Easy Setup
  • De Luxe Tuner. GUI interface to create your iphone like javascript menu menus easily and in no time
  • Sensible menu parameters for manual editing



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Good navigation system is an important part of web site success. If people can't find their way around the site, they will rapidly give up looking and go, never to return. So, it's very significant that your website has a neat, fast, and gratifying to the eye navigation.
    Don't permit your web site visitors to get lost. Try Deluxe Menu!

Recent Questions

Q: We are using the javascript drop down menu code to create an external link. The absolute path is recognised but it does not work. At the bottom of the page the browser displays an "error on page" message and nothing happens.

A: Now you have

<script type="text/javascript">  var dmWorkPath = "wdmenu.files/";</script>
<script type="text/javascript" src="wdmenu.files/dmenu.js"></script>
<script type="text/javascript">  var dmWorkPath="wdtabs.files/";</script>
<script type="text/javascript" src="wdtabs.files/wdtabs.js"></script>


The second call for dmWorkPath is incorrect. Delete it. So you'llhave:

<script type="text/javascript">  var dmWorkPath = "wdmenu.files/";</script>
<script type="text/javascript" src="wdmenu.files/dmenu.js"></script>
<script type="text/javascript" src="wdtabs.files/wdtabs.js"></script>

Your menu will work correctly.



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: I created a custom error page for a site, but the menu would not display.

I found that this was due to the erroneous "current directory" in the bad link test, for a non-existent directory.

which is: level2/level3/

I changed the script code from:
<script type="text/javascript">  var dmWorkPath = "DMworkfiles/";</script>
<script type="text/javascript" src="DMworkfiles/dmenu.js"></script>

to:

<script type="text/javascript">  var dmWorkPath = "DMworkfiles/";</script>
<script type="text/javascript" src="/DMworkfiles/dmenu.js"></script>

adding the "/" before "DMworkfiles/dmenu.js" source reference allowed the .js file to be found in the root directory and the menu would display.

The problem is that the little menu "expansion" arrow .gif cannot be found in the "current working directory" of level2/level3/. just little "blanks" show.

I tried changing:
  var dmWorkPath = "DMworkfiles/";

to:
  var dmWorkPath = "/DMworkfiles/";

but that did not enable the display of the arrows.

I also had to prefix all of the links in the menu with a "/" to indicate the root directory because of the "current directory" for the bad page.

I hope I have explained the problem sufficiently.
What am I doing wrong or missing here?


A: You can use additional parameters to make menu paths absolute:

  var pathPrefix_img = "http://domain.com/images/";
  var pathPrefix_link = "http://domain.com/pages/";

These parameters allow to make images and links paths absolute.
For example:

  var pathPrefix_img = "http://domain.com/images/";
  var pathPrefix_link = "http://domain.com/pages/";

  var menuItems = [
["text", "index.html", "icon1.gif", "icon2.gif"],
];

So, link path will be look so:
http://domain.com/pages/index.html

Images paths will be look so:
http://domain.com/images/icon1.gif
http://domain.com/images/icon2.gif

Please, try to use these parameters


Q: I am really interested in this product but I am having difficulty adding content to the java menu bar tabs. I checked the FAQ section and followed the directions, but when I test it nothing happens and I get an error on page at the bottom.


A: See, for each item you should assign the ID property of the contentDIV (see data file with your menu parameters). You should set  var tabMode=0;

["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. You canset background image for these DIV's in styles.

<div id="contentName" style="height: 0%; visibility: hidden; background-image: url('img/back.jpg'); background-repeat:repeat-y;" 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>

<div id="contentDescription" 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 description here!!!!!
</div>-image: url('img/back.jpg'); background-repeat:repeat-y;" 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>

<div id="contentDescription" 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 description here!!!!!
</div>