473,396 Members | 1,891 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

How to group list into tabbed navigation box

Hi,

The website http://www.komodomedia.com/ has some useful navigation
tabs, just on the right side. I want to creat these kind of box
because I want to group a list into tabs and don't want the page to be
reloaded when user click on tab.

I have no idea how to trace the code because I'm a newbie, it's too
hard for me. The only thing I know is to select all page content, copy
and paste to FrontPage but it not work, only get the pure html
content.

Can anyone help me? Any example or suggestion is welcome. Many thanks!

May 5 '07 #1
1 1330
On May 5, 6:05 am, jza...@gmail.com wrote:
Hi,

The websitehttp://www.komodomedia.com/has some useful navigation
tabs, just on the right side. I want to creat these kind of box
because I want to group a list into tabs and don't want the page to be
reloaded when user click on tab.

I have no idea how to trace the code because I'm a newbie, it's too
hard for me. The only thing I know is to select all page content, copy
and paste to FrontPage but it not work, only get the pure html
content.

Can anyone help me? Any example or suggestion is welcome. Many thanks!
download firebug addon for firefox and experiment with it, to see the
code.
the way that you create the effect you are after is have
<div class="tab_holder_1">
<div class="tab" id="tab1">tab1 html content</div>
<div class="tab closed" id="tab2">tab2 html content</div>
<a class="tab_control selected" href="/page.htm?tab1=open"
onclick="closeAllBut('tab1','tab_holder_1');">tab1 </a>
<a class="tab_control" href="/page.htm?tab2=open"
onclick="closeAllBut('tab2','tab_holder_1');">tab2 </a>
</div>
you then create the style
..closed{display:none;visibility:hidden;}
and a few others to style the divs and their links as required.
(eg. .tab_control, .tab, #tab1,#tab2,#tab_holder_1)

I also would not use onclick (as I have written above) but instead
would attach the onclick event to eac a link with class tab_control
the javascript closeAllBut('tab2','tab_holder_1')
just reads through all the divs of class div inside the div with id
tab_holder_1, setting the classNames of the divs to closed, apart from
one which gets its className set back to just "tab"
I will leave the details for you to find on google, there are many
examples of this kind of thing, but do try and find your way round
firebug.

May 5 '07 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
by: michael | last post by:
Is it possible to get all href URLs contained in a unordered list and place them in an array? Or in fact two different arrays, differently named one for each <ul> group? <ul> <li><a...
2
by: Dan V. | last post by:
What do you recommend to use for saving time and get great results for making image and css buttons on a site? Also top tabs like for navigation. Separate question maybe is what is the best tool...
8
by: Mark | last post by:
How would i go about using windows authentication to determine whether someone was in a active directory group, and if they were the page would display something different. For instance, when...
3
by: Progalex | last post by:
Hi! How can I create a tabbed mdi navigation bar like the one of VS IDE? It should be good also a (free..) user control. Does anyone know any? (links or source code...) Thanks!
1
by: RCS | last post by:
Does anyone know of a tabbed navigation control that supports SiteMapProvider (the same way the menu, breadcrumbs and treeview do in 2.0)?? I'm looking for www.amazon.com style tabbed...
1
by: Eric Jones | last post by:
Hello newsgroup members, I really like CSS, and have created some button like navigation UL/li, etc. I have hover, change color, etc. I am using the "link" as a button, and using ajax and...
3
by: kev | last post by:
Hello, I posted a question a while ago on tabbed pages, how to set it to invisible when the text box is empty.It was answered by Rick and the code ran perfectly. However, i tried using the same...
0
by: thephatp | last post by:
I cannot figure this out for the life of me. I want to monitor where a user navigates to in IE, and I've found code that will do this beautifully for the first tab in an IE7 browser. (In IE6, the...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.