(c) 2016, Deluxe-Menu.com
Search  
Ctrl+F2 - enter/switch menu | Arrow keys - navigate | Esc - exit menu  
  Support
  FAQ
  Contacts
  About Us
  Recent Questions


 

    How do I add content to each tab rollovers so that the content will appear on this same page (as opposed to having to move to another page)?

Return to Recent Questions


Q: I figure I'm missing something basic ....

I've created a simple horizontal menu and uploaded the various files to to my website go generate the bar food menu

How do I add content to each tab rollovers so that the content will appear on this same page (as opposed to having to move to another page)?

i.e. when you click on starters, you see the starter below,
when you click on mains you see the mains below
etc. etc.

I'm new to this .....

A: You should paste your content in the <div> .. </div> tags.

<div id="content1" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DM.gif" width=262 height=56 alt="Deluxe-Menu.com"></p>
</div>

<div id="content2" style="visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DT.gif" width=262 height=56 alt="Deluxe-Tree.com"></p>

</div>

<div id="content3" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DTabs.gif" width=254 height=58 alt="Deluxe-Tabs.com"></p>
</div>

See in Deluxe Tabs there are two modes:

1. var tabMode=0;
You can create only one level of tabs and assign Object Id's of the DIV's to show when you click on the tab rollovers.

["XP Tab 1","content1", "", "", "", "", "", "", "", ],
["XP Tab 2","content2", "", "", "", "", "", "", "", ],
["XP Tab 3","content3", "", "", "", "", "", "", "", ],
["XP Tab 4","content4", "", "", "", "", "", "", "", ],

2. var tabMode=1;
You can assign only links in this mode.
You should create top level items with subitems.

["XP Tab 1","", "", "", "", "", "", "", "", ],
    ["|Link 1_1","http://deluxe-tabs.com", "", "", "", "", "0", "", "", ],
    ["|Link 1_2","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 1_3","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 1_4","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 1_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 2","", "", "", "", "", "", "", "", ],
    ["|Link 2_1","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 2_2","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 2_3","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 2_4","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 2_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 3","", "", "", "", "", "", "", "", ],
    ["|Link 3_1","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 3_2","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 3_3","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 3_4","testlink.htm", "", "", "", "", "0", "", "", ],
    ["|Link 3_5","testlink.htm", "", "", "", "", "0", "", "", ],

You can use Object ID as well as Link in both modes. Use the following prefixes within item's link field:
"object:" - means that there is object id after it;
"link:" - means that there is a link after it.
"javascript:" - means that there is a javascript code after it, for example:javascript:alert(\'Hello!\')

So, you should write for example:

["|Link 1_1","object:Content1_1", "", "", "", "", "0", "", "", ],





Return to Recent Questions

Related:
Bootstrap Layout Jquery Bootstrap Multiselect Option  |  Bootstrap Row Grid  |  Bootstrap Media queries Example  |  Bootstrap Modal Popup Form  |  Bootstrap Login forms Layout  | 
Copyright (c) 2019, Deluxe-Menu.com
Home  |  Product Info  |  Samples  |  Download  |  Purchase  |  FAQ  |  Site Map  |  Terms of Use  |  Write Us
All rights reserved. AI Website Builder | Free AI Website Builder | AI Website Maker | Free AI Website Generator | AI web page design generator