Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Site updated at 2013-01-13 04:36:07 UTC
  • Loading branch information
tjvantoll committed Jan 13, 2013
1 parent 23b8204 commit 1dafb20
Show file tree
Hide file tree
Showing 22 changed files with 554 additions and 32 deletions.
Expand Up @@ -127,9 +127,127 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<!--more-->


<p>Here&#8217;s an example:</p>

<iframe style="width: 100%; height: 350px;" src="http://jsfiddle.net/tj_vantoll/nn2Qw/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>The following CSS will vertically arrange the tabs:</p>

<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="p">{</span>
</span><span class='line'> <span class="k">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'> <span class="k">width</span><span class="o">:</span> <span class="m">42em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-widget-header</span> <span class="p">{</span>
</span><span class='line'> <span class="k">border</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-nav</span> <span class="p">{</span>
</span><span class='line'> <span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
</span><span class='line'> <span class="k">width</span><span class="o">:</span> <span class="m">10em</span><span class="p">;</span>
</span><span class='line'> <span class="k">background</span><span class="o">:</span> <span class="m">#CCC</span><span class="p">;</span>
</span><span class='line'> <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">4px</span> <span class="m">0</span> <span class="m">0</span> <span class="m">4px</span><span class="p">;</span>
</span><span class='line'> <span class="k">border-right</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">gray</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-nav</span> <span class="nt">li</span> <span class="p">{</span>
</span><span class='line'> <span class="k">clear</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
</span><span class='line'> <span class="k">width</span><span class="o">:</span> <span class="m">100</span><span class="o">%</span><span class="p">;</span>
</span><span class='line'> <span class="k">margin</span><span class="o">:</span> <span class="m">0.2em</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'> <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">gray</span><span class="p">;</span>
</span><span class='line'> <span class="k">border-width</span><span class="o">:</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">1px</span><span class="p">;</span>
</span><span class='line'> <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">4px</span> <span class="m">0</span> <span class="m">0</span> <span class="m">4px</span><span class="p">;</span>
</span><span class='line'> <span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
</span><span class='line'> <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
</span><span class='line'> <span class="k">right</span><span class="o">:</span> <span class="m">-2px</span><span class="p">;</span>
</span><span class='line'> <span class="k">z-index</span><span class="o">:</span> <span class="m">2</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-nav</span> <span class="nt">li</span> <span class="nt">a</span> <span class="p">{</span>
</span><span class='line'> <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
</span><span class='line'> <span class="k">width</span><span class="o">:</span> <span class="m">100</span><span class="o">%</span><span class="p">;</span>
</span><span class='line'> <span class="k">padding</span><span class="o">:</span> <span class="m">0.6em</span> <span class="m">1em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-nav</span> <span class="nt">li</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span>
</span><span class='line'> <span class="k">cursor</span><span class="o">:</span> <span class="k">pointer</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-nav</span> <span class="nt">li</span><span class="nc">.ui-tabs-active</span> <span class="p">{</span>
</span><span class='line'> <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">0.2em</span><span class="p">;</span>
</span><span class='line'> <span class="k">padding-bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'> <span class="k">border-right</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">white</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-nav</span> <span class="nt">li</span><span class="nd">:last-child</span> <span class="p">{</span>
</span><span class='line'> <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.ui-tabs.ui-tabs-vertical</span> <span class="nc">.ui-tabs-panel</span> <span class="p">{</span>
</span><span class='line'> <span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
</span><span class='line'> <span class="k">width</span><span class="o">:</span> <span class="m">28em</span><span class="p">;</span>
</span><span class='line'> <span class="k">border-left</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">gray</span><span class="p">;</span>
</span><span class='line'> <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'> <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
</span><span class='line'> <span class="k">left</span><span class="o">:</span> <span class="m">-1px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>It only relies on a class of <code>ui-tabs-vertical</code> being applied to the elements the <code>tabs</code> widget is created on.</p>

<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;tabs&#39;</span><span class="p">).</span><span class="nx">tabs</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;ui-tabs-vertical&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>And here&#8217;s the result:</p>

<div class="code_example">
<h6>
Demo - jQuery UI Vertical Tabs
<a href="/demos/2012-11-08/verticalTabs.html" target="_blank">Open in New Window</a>
</h6>
<iframe style="width: 100%; height: 265px;" frameborder="0" src="/demos/2012-11-08/verticalTabs.html"></iframe>
</div>


<p>Please poke around in the source to see how it was made. Feel free to use this or modify it to your liking.</p>
Expand Down

0 comments on commit 1dafb20

Please sign in to comment.