...
PDA

How to create tabbed panels

Dan06
12-02-2008, 06:56 PM
I'd like to create a simple tabbed panel. Does anyone know or have any examples/tutorials of how to create a tabbed panel? Thanks.
eak
12-02-2008, 07:19 PM
http://docs.jquery.com/UI/Tabs
Rowsdower!
12-02-2008, 07:19 PM
Basic resource for starters:

http://www.dynamicdrive.com/style/csslibrary/item/css-tabs-menu/


It's worth mentioning that this is pure CSS. Java script has more options for presentation but this CSS brand of tabbed menu will still work for people with Java disabled...
Excavator
12-02-2008, 07:27 PM
Hello Dan06,
Grab this one (http://nopeople.com/CSS/menu%20tabs/index.html)if you like it.

.
Dan06
12-02-2008, 09:24 PM
Thank you all for the help; I appreciate it. There is one clarification I need to make. I'm interested in content tab panels, rather then navigation tab panels. I'd like to organize my content with navigatable tabs. If you have examples/tutorials for those please let me know.
Rowsdower!
12-03-2008, 05:23 PM
Oh, how about this then:

http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
Rowsdower!
12-03-2008, 05:31 PM
And this one:

http://webfx.eae.net/dhtml/tabpane/demo.html

This includes a nested tab layout (a tab setwithin a tab set)...
Excavator
12-03-2008, 05:50 PM
Hello again Dan06,
This one is pretty simple. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://www.nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 750px;
margin: 0 auto;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}
#tabs {
width: 750px;
margin: 20px auto 0 auto;
text-align: center;
}
#tablist {
padding: 3px 0;
font: bold 12px Verdana;
border-bottom: 1px solid #333333;
}
#tablist li {
list-style: none;
display: inline;
}
#tablist li a {
text-decoration: none;
padding: 3px 4px;
margin: 0 3px 0 0;
border: 1px solid #777788;
border-bottom: none;
background: #DDDEEE;
}
#tablist li a:link, #tablist li a:visited {
color: #444488;
}
#tablist li a:hover {
color: #000000;
background: #AAAAEE;
border-color: #222277;
}
#tablist li a.current {
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#content {
width: 690px;
margin: -1px auto 0 auto;
padding: 10px;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="tabs">
<ul id="tablist">
<li><a href="">#</a></li>
<li><a class="current" href="#a">A</a></li>
<li><a href="b.html">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">E</a></li>
<li><a href="">F</a></li>
<li><a href="">G</a></li>
<li><a href="">H</a></li>
<li><a href="">I</a></li>
<li><a href="">J</a></li>
<li><a href="">K</a></li>
<li><a href="">L</a></li>
<li><a href="">M</a></li>
<li><a href="">N</a></li>
<li><a href="">O</a></li>
<li><a href="">P</a></li>
<li><a href="">Q</a></li>
<li><a href="">R</a></li>
<li><a href="">S</a></li>
<li><a href="">T</a></li>
<li><a href="">U</a></li>
<li><a href="">V</a></li>
<li><a href="">W</a></li>
<li><a href="">X</a></li>
<li><a href="">Y</a></li>
<li><a href="">Z</a></li>
</ul>
<!--end tabs--></div>
<div id="container">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<!--end container--></div>
</body>
</html>
Major Payne
12-05-2008, 01:32 PM
Lots of nice examples of tabbed menus on this site. Look at author's source code for what you need to use.

Menus - Tabbed (http://www.cssplay.co.uk/menus/)
Menu Tutorial (http://www.cssplay.co.uk/menus/tutorial.html)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum