-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
162 lines (128 loc) · 9.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Organic Tabs</title>
<link rel="stylesheet" href="css/style.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="js/jquery.organictabs.js"></script>
<script>
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Organic Tabs</h1>
<p>The purpose of this demo is to show a tabbed area where the content in tabbed panels are
of different heights. When we switch between tabs, the content below is gently moved up or down
to accomodate.</p>
<div id="example-one">
<ul class="nav">
<li class="nav-one"><a href="#featured" class="current">Featured</a></li>
<li class="nav-two"><a href="#core">Core</a></li>
<li class="nav-three"><a href="#jquerytuts">jQuery</a></li>
<li class="nav-four last"><a href="#classics">Classics</a></li>
</ul>
<div class="list-wrap">
<ul id="featured">
<li><a href="http://css-tricks.com/perfect-full-page-background-image/">Full Page Background Images</a></li>
<li><a href="http://css-tricks.com/designing-for-wordpress-complete-series-downloads/">Designing for WordPress</a></li>
<li><a href="http://css-tricks.com/build-your-own-social-home/">Build Your Own Social Home!</a></li>
<li><a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">Absolute Positioning Inside Relative Positioning</a></li>
<li><a href="http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/">IE CSS Bugs That'll Get You Every Time</a></li>
<li><a href="http://css-tricks.com/404-best-practices/">404 Best Practices</a></li>
<li><a href="http://css-tricks.com/date-display-with-sprites/">Date Display with Sprites</a></li>
</ul>
<ul id="core" class="hide">
<li><a href="http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/">The VERY Basics of HTML & CSS</a></li>
<li><a href="http://css-tricks.com/the-difference-between-id-and-class/">Classes and IDs</a></li>
<li><a href="http://css-tricks.com/the-css-box-model/">The CSS Box Model</a></li>
<li><a href="http://css-tricks.com/all-about-floats/">All About Floats</a></li>
<li><a href="http://css-tricks.com/the-css-overflow-property/">CSS Overflow Property</a></li>
<li><a href="http://css-tricks.com/css-font-size/">CSS Font Size - (px - em - % - pt - keyword)</a></li>
<li><a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/">CSS Transparency / Opacity</a></li>
<li><a href="http://css-tricks.com/css-sprites/">CSS Sprites</a></li>
<li><a href="http://css-tricks.com/nine-techniques-for-css-image-replacement/">CSS Image Replacement</a></li>
<li><a href="http://css-tricks.com/what-is-vertical-align/">CSS Vertial Align</a></li>
<li><a href="http://css-tricks.com/the-css-overflow-property/">The CSS Overflow Property</a></li>
</ul>
<ul id="jquerytuts" class="hide">
<li><a href="http://css-tricks.com/anythingslider-jquery-plugin/">Anything Slider jQuery Plugin</a></li>
<li><a href="http://css-tricks.com/moving-boxes/">Moving Boxes</a></li>
<li><a href="http://css-tricks.com/simple-jquery-dropdowns/">Simple jQuery Dropdowns</a></li>
<li><a href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">Featured Content Slider</a></li>
<li><a href="http://css-tricks.com/startstop-slider/">Start/Stop Slider</a></li>
<li><a href="http://css-tricks.com/banner-code-displayer-thing/">Banner Code Displayer Thing</a></li>
<li><a href="http://css-tricks.com/highlight-certain-number-of-characters/">Highlight Certain Number of Characters</a></li>
<li><a href="http://css-tricks.com/auto-moving-parallax-background/">Auto-Moving Parallax Background</a></li>
</ul>
<ul id="classics" class="hide">
<li><a href="http://css-tricks.com/css-wishlist/">Top Designers CSS Wishlist</a></li>
<li><a href="http://css-tricks.com/what-beautiful-html-code-looks-like/">What Beautiful HTML Code Looks Like</a></li>
<li><a href="http://css-tricks.com/easily-password-protect-a-website-or-subdirectory/">Easily Password Protect a Website or Subdirectory</a></li>
<li><a href="http://css-tricks.com/how-to-create-an-ie-only-stylesheet/">IE-Only Stylesheets</a></li>
<li><a href="http://css-tricks.com/ecommerce-considerations/">eCommerce Considerations</a></li>
<li><a href="http://css-tricks.com/php-for-beginners-building-your-first-simple-cms/">PHP: Build Your First CMS</a></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs (Example One) -->
<p>This is a plugin, so you can call it on multiple tabbed areas, which can be styled totally differently</p>
<div id="example-two">
<ul class="nav">
<li class="nav-one"><a href="#featured2" class="current">Featured</a></li>
<li class="nav-two"><a href="#core2">Core</a></li>
<li class="nav-three"><a href="#jquerytuts2">jQuery</a></li>
<li class="nav-four last"><a href="#classics2">Classics</a></li>
</ul>
<div class="list-wrap">
<ul id="featured2">
<li><a href="http://css-tricks.com/perfect-full-page-background-image/">Full Page Background Images</a></li>
<li><a href="http://css-tricks.com/designing-for-wordpress-complete-series-downloads/">Designing for WordPress</a></li>
<li><a href="http://css-tricks.com/build-your-own-social-home/">Build Your Own Social Home!</a></li>
<li><a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">Absolute Positioning Inside Relative Positioning</a></li>
<li><a href="http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/">IE CSS Bugs That'll Get You Every Time</a></li>
<li><a href="http://css-tricks.com/404-best-practices/">404 Best Practices</a></li>
<li><a href="http://css-tricks.com/date-display-with-sprites/">Date Display with Sprites</a></li>
</ul>
<ul id="core2" class="hide">
<li><a href="http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/">The VERY Basics of HTML & CSS</a></li>
<li><a href="http://css-tricks.com/the-difference-between-id-and-class/">Classes and IDs</a></li>
<li><a href="http://css-tricks.com/the-css-box-model/">The CSS Box Model</a></li>
<li><a href="http://css-tricks.com/all-about-floats/">All About Floats</a></li>
<li><a href="http://css-tricks.com/the-css-overflow-property/">CSS Overflow Property</a></li>
<li><a href="http://css-tricks.com/css-font-size/">CSS Font Size - (px - em - % - pt - keyword)</a></li>
<li><a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/">CSS Transparency / Opacity</a></li>
<li><a href="http://css-tricks.com/css-sprites/">CSS Sprites</a></li>
<li><a href="http://css-tricks.com/nine-techniques-for-css-image-replacement/">CSS Image Replacement</a></li>
<li><a href="http://css-tricks.com/what-is-vertical-align/">CSS Vertial Align</a></li>
<li><a href="http://css-tricks.com/the-css-overflow-property/">The CSS Overflow Property</a></li>
</ul>
<ul id="jquerytuts2" class="hide">
<li><a href="http://css-tricks.com/anythingslider-jquery-plugin/">Anything Slider jQuery Plugin</a></li>
<li><a href="http://css-tricks.com/moving-boxes/">Moving Boxes</a></li>
<li><a href="http://css-tricks.com/simple-jquery-dropdowns/">Simple jQuery Dropdowns</a></li>
<li><a href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">Featured Content Slider</a></li>
<li><a href="http://css-tricks.com/startstop-slider/">Start/Stop Slider</a></li>
<li><a href="http://css-tricks.com/banner-code-displayer-thing/">Banner Code Displayer Thing</a></li>
<li><a href="http://css-tricks.com/highlight-certain-number-of-characters/">Highlight Certain Number of Characters</a></li>
<li><a href="http://css-tricks.com/auto-moving-parallax-background/">Auto-Moving Parallax Background</a></li>
</ul>
<ul id="classics2" class="hide">
<li><a href="http://css-tricks.com/css-wishlist/">Top Designers CSS Wishlist</a></li>
<li><a href="http://css-tricks.com/what-beautiful-html-code-looks-like/">What Beautiful HTML Code Looks Like</a></li>
<li><a href="http://css-tricks.com/easily-password-protect-a-website-or-subdirectory/">Easily Password Protect a Website or Subdirectory</a></li>
<li><a href="http://css-tricks.com/how-to-create-an-ie-only-stylesheet/">IE-Only Stylesheets</a></li>
<li><a href="http://css-tricks.com/ecommerce-considerations/">eCommerce Considerations</a></li>
<li><a href="http://css-tricks.com/php-for-beginners-building-your-first-simple-cms/">PHP: Build Your First CMS</a></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs (Example One) -->
<p>This is some content below the tabs. I will be moved up or down to accommodate the tabbed area above me.</p>
</div>
</body>
</html>