Team:KAIST Korea/Team KAIST
From 2012.igem.org
(Difference between revisions)
Line 103: | Line 103: | ||
+ | /* Lined Tab Navigation */ | ||
+ | .tab.line{padding:0 0 35px 0} | ||
+ | .tab.line ul{position:relative;margin:0;padding:0;list-style:none;border-bottom:1px solid #ccc;font-family:Tahoma, Sans-serif;font-size:12px;*zoom:1} | ||
+ | .tab.line ul:after{content:"";display:block;clear:both} | ||
+ | .tab.line li{float:left;margin-bottom:-1px} | ||
+ | .tab.line li a{position:relative;float:left;text-decoration:none;border:1px solid #eee;border-bottom-color:#ccc;background:#fafafa;color:#333} | ||
+ | .tab.line li a span{display:inline-block;height:14px;padding:6px 25px 6px 25px;letter-spacing:-1px;cursor:pointer} | ||
+ | .tab.line li ul{width:100%;position:absolute;top:40px;left:0;list-style:none;border:0;margin:0;padding:0;white-space:nowrap;overflow:hidden;*zoom:1} | ||
+ | .tab.line li ul:after{content:"";display:block;clear:both} | ||
+ | .tab.line li li{position:relative;left:-1px;padding:0 10px;border-left:1px solid #ddd;overflow:visible} | ||
+ | .tab.line li li a{padding:0;margin:0;border:0 !important;color:#666 !important;font-weight:normal;background:transparent;letter-spacing:normal} | ||
+ | .tab.line li.active a{border:1px solid #ccc;border-bottom:1px solid #fff;margin-top:-1px;background:transparent} | ||
+ | .tab.line li.active a span{padding-top:7px;font-weight:bold} | ||
+ | .tab.line li li a:hover, | ||
+ | .tab.line li li a:active, | ||
+ | .tab.line li li a:focus, | ||
+ | .tab.line li li.active a{font-weight:bold;letter-spacing:-1px;color:#333 !important} | ||
+ | .tab.line.jx{padding:0} | ||
+ | .tab.line.jx ul{border:0} | ||
+ | .tab.line.jx li{float:none} | ||
+ | .tab.line.jx li a{float:none;display:block;font-weight:bold;color:#333;border:1px solid #eee !important;border-bottom-color:#ccc !important;background:#fafafa !important} | ||
+ | .tab.line.jx li ul{position:static;display:block;padding:5px 0;left:0;top:0} | ||
+ | .tab.line.jx li li{display:inline} | ||
+ | .tab.line.jx li li a{display:inline;letter-spacing:normal;border:0 !important;font-weight:normal !important;color:#666 !important;background:none !important} | ||
+ | .tab.line.jx li li a:hover, | ||
+ | .tab.line.jx li li a:active, | ||
+ | .tab.line.jx li li a:focus{text-decoration:underline} | ||
</style> | </style> | ||
Line 126: | Line 153: | ||
<div id="kaistcontent"> | <div id="kaistcontent"> | ||
+ | <div class="tab line jx"> | ||
+ | <ul> | ||
+ | <li><a href="#"><span>Activity 1</span></a> | ||
+ | </br> 안녕하세용</br> hi</br> | ||
+ | </li> | ||
+ | <li><a href="#"><span>Activity 2</span></a> | ||
+ | <ul> | ||
+ | <li><a href="#">Menu 2-1</a></li> | ||
+ | <li><a href="#">Menu 2-2</a></li> | ||
+ | <li><a href="#">Menu 2-3</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#"><span>Activity 3</span></a> | ||
+ | <ul> | ||
+ | <li><a href="#">메뉴 3-1</a></li> | ||
+ | <li><a href="#">메뉴 3-2</a></li> | ||
+ | <li><a href="#">메뉴 3-3</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
</br> | </br> | ||
</br> | </br> | ||
Line 135: | Line 183: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | jQuery(function($){ | ||
+ | // Lined Tab Navigation | ||
+ | var tab_line = $('div.tab.line'); | ||
+ | var tab_line_i = tab_line.find('>ul>li'); | ||
+ | var tab_line_ii = tab_line.find('>ul>li>ul>li'); | ||
+ | tab_line.removeClass('jx'); | ||
+ | tab_line_i.find('>ul').hide(); | ||
+ | tab_line_i.find('>ul>li[class=active]').parents('li').attr('class','active'); | ||
+ | tab_line.find('>ul>li[class=active]').find('>ul').show(); | ||
+ | function lineTabMenuToggle(event){ | ||
+ | var t = $(this); | ||
+ | tab_line_i.find('>ul').hide(); | ||
+ | t.next('ul').show(); | ||
+ | tab_line_i.removeClass('active'); | ||
+ | t.parent('li').addClass('active'); | ||
+ | return false; | ||
+ | } | ||
+ | function lineTabSubMenuActive(){ | ||
+ | tab_line_ii.removeClass('active'); | ||
+ | $(this).parent(tab_line_ii).addClass('active'); | ||
+ | return false; | ||
+ | }; | ||
+ | tab_line_i.find('>a[href=#]').click(lineTabMenuToggle).focus(lineTabMenuToggle); | ||
+ | tab_line_ii.find('>a[href=#]').click(lineTabSubMenuActive).focus(lineTabSubMenuActive); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
</body> | </body> | ||
</html> | </html> | ||
{{:Team:KAIST_Korea/footer}} | {{:Team:KAIST_Korea/footer}} |
Revision as of 09:49, 30 August 2012
2012 KAIST Korea
Mail : kaist.igem.2012@gmail.com
Twitter : twitter.com/KAIST_iGEM_2012
Facebook : www.facebook.com/KAISTiGEM2012
aaaa