Welcome to our blog! We are Diana & Damaris. We'll blog about our Styles, Music & Life together. Living in Stockholm, Sweden.


 › Diana's

 › Tumblr
 › Instagram
 › Twitter


 › Damaris

 › Tumblr
 › Instagram
 › Twitter


 › HOME

Organic Tabs

2013-06-30 › 20:48:30 › Category › Allmänt

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="http://home.no/bloggdesignet/design/nr11/organictabs.js"></script>

 

----------------------------------------------

 

<script type="text/javascript" src="http://home.no/bloggdesignet/design/nr11/organictabs.js"></script>
<script type='text/javascript'>
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
</script>

 

 ----------------------------------------------

<div id="example-one">

<ul class="nav">
<li class="nav-one"><a href="#one" class="current">ONE NAME</a></li>
<li class="nav-two"><a href="#two">TWO NAME</a></li>
<li class="nav-three"><a href="#three">THREE NAME</a></li>
<li class="nav-four last"><a href="#four">FOUR NAME</a></li>
</ul>

<div class="list-wrap">

<ul id="one">
<li>Stuff in here!one</li>
</ul>

<ul id="two" class="hide">
<li>Stuff in here!two</li>
</ul>

<ul id="three" class="hide">
<li>Stuff in here!three</li>
</ul>

<ul id="four" class="hide">
<li>Stuff in here!four</li>
</ul>

</div> <!-- END List Wrap -->

 

CSS -------------------------------------------------------------

 


/* Specific to example one */

#example-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover, #example-one ul li a:focus { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }

#example-one li.nav-one a.current, ul.featured li a:hover { background-color: #0575f4; color: white; }
#example-one li.nav-two a.current, ul.core li a:hover { background-color: #d30000; color: white; }
#example-one li.nav-three a.current, ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#example-one li.nav-four a.current, ul.classics li a:hover { background-color: #FE4902; color: white; }

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }

 

 



</div> <!-- END Organic Tabs (Example One) -->

 

 





Name:

E-mail: (Will not be published.)

URL/Blog:

What's on your mind?: