Jquery Iphone Style Menu by Deluxe-Menu.com
Jquery Iphone Style Menu

Template:

Green Tabs Template - Mouseover Drop Down Menu






    - Deluxe Tuner - visual interface to create and modify dhtml menus easily and in no time.
    - 85% transparency for sub menus
    - Special JavaScript API for changing javascript menu "on-the-fly"
    - Text aligned to left
    - Unlimited number of sub levels
    - Inactive/Disabled items
    - Submenus automatically scrolls
    - Sound support!




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

Menu Screenshots

Jquery Iphone Style Menu Menue Bar Scripts

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
Cost Effective
Mouse Over Pull Down Jquery Iphone Style Menu
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed jquery iphone style menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
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!
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: How do I make the buttons in my java navigation menu transparent?
I only want to see the letters appear in my table and not the button until I mouse over it?


A: To set transparent background for the menu you should set:

  var menuBackColor="transparent";
  var itemBackColor=["transparent","transparent"];


Q: If I wanted to change the graphics at a later date in tab menu javascript (main top tabs, subtabs, etc.), how would I do that?


A: In that case you should open images I'm using for top tabs in any graph editor and changethem.

back.gif
back_o.gif //back images for normal and hover states for the last tabs in the top menu(instead of the 1-st 6 items)

sep_top.gif // separator for the top items

top1.gif
top1_o.gif //back images for normal and hover states for the 1-st tab, you can change thetext of this tab in deluxe-menu.js:

["<font color='#FFF90E'>MAIN</font><br>Initiative<br>(Strategy)","testlink.html", "", "", "", "", "5", "4", "", "", "", ],

By the way to apply hint for this item you should write:
["<font color='#FFF90E'>MAIN</font><br>Initiative<br>(Strategy)","testlink.html", "", "", "This hint appears when you hover over the 1-st item", "", "5", "4", "", "", "", ],

top2.gif
top2_o.gif //back images for normal and hover states for the 2-nd tab, you can change thetext of this tab in deluxe-menu.js:
["<font color='#FFF90E'>PAIN</font><br>Identified<br>(Problems)","", "", "", "", "", "6", "", "", "", "", ],

and so on...

For the subtabs I'm use images for arrows only:
  var arrowWidthSub=8;
  var arrowHeightSub=8;
  var arrowImageSub=["deluxe-menu.files/arrow.gif","deluxe-menu.files/arrow_o.gif"]


Q: I have read your FAQ’s on “When using mouse over tab menu, where do I place the text content related to the selected tab”, but I am still not understanding how to edit the script.
Cansomeone please assist me.

A: You should specify any Object ID name of the DIV.

See, for each item you should assign the ID property of the content
DIV (see data file with your menu parameters).

["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">
<p align=center><img src="img/style01_title.gif" width=140 height=90 alt="Glass Style Tabs"></p>
You should paste your content here!!!!!
</div>

<div id="contentDescription" style="height: 0%; visibility: hidden;" class="tabPage">
<p align=center><img src="img/style01_title.gif" width=140 height=90 alt="Glass Style Tabs"></p>
You should paste your description here!!!!!
</div>



Q: First I want to thank you for the great support you provided. I have another question about the dynamic javascript tree. Is there a javascript API to fire an user click event so the browser will load proper page accordingly? I looked around the current APIs from your site and could not find one.

A: You can use dtreet_ext_userClick (itemID) function.
See more info:

http://deluxe-tree.com/functions-info.html

Actually you can use your own Javascript code instead standard links and html code inside item text. For example:

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

or

  var tmenuitems = [
["<div onClick='urlSubstitution(\'transco/sheet.asp?stype=1\')'>Table of Contents</div>", ""]
];

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