Template:Fatih-header
From 2012.igem.org
(Difference between revisions)
(56 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> | ||
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script> | <script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script> | ||
- | + | <script type="text/javascript" src="http://xoomla.googlecode.com/files/jquery.easing.1.3.js"></script> | |
- | + | <script type="text/javascript" src="http://xoomla.googlecode.com/files/jquery.animate-colors-min.js"></script> | |
- | <script>$(function(){$('.sf-menu').superfish()})</script> | + | <script type="text/javascript" src="http://xoomla.googlecode.com/files/jquery.skitter.min.js"></script> |
+ | |||
+ | <script> | ||
+ | $(function(){$('.sf-menu').superfish()}); | ||
+ | $(function(){$('.box_skitter_large').skitter();}); | ||
+ | </script> | ||
<style> | <style> | ||
Line 13: | Line 18: | ||
/* superfish.css */ | /* superfish.css */ | ||
- | .sf-menu{text-transform:capitalize;font-size:0;line-height:0;float: | + | .sf-menu{text-transform:capitalize;font-size:0;line-height:0;float:left;padding:10px 23px 0;} |
.sf-menu ul{position:absolute;top:-999em;min-width:124px;background:#232321;padding:13px 0px 10px 22px;left:0;display:none;border-radius:7px;} | .sf-menu ul{position:absolute;top:-999em;min-width:124px;background:#232321;padding:13px 0px 10px 22px;left:0;display:none;border-radius:7px;} | ||
.sf-menu li{position:relative;} | .sf-menu li{position:relative;} | ||
Line 21: | Line 26: | ||
.sf-menu>li>a{color:#fff;padding:12px 22px 20px;display:block;} | .sf-menu>li>a{color:#fff;padding:12px 22px 20px;display:block;} | ||
.sf-menu>li.current>a,.sf-menu>li>a:hover,.sf-menu>li.sfHover>a{color:#636053;} | .sf-menu>li.current>a,.sf-menu>li>a:hover,.sf-menu>li.sfHover>a{color:#636053;} | ||
- | .sf-menu li:hover ul,.sf-menu li.sfHover ul{top:55px;z-index: | + | .sf-menu li:hover ul,.sf-menu li.sfHover ul{top:55px;z-index:120;} |
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} | .sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} | ||
.sf-menu>li.current,.sf-menu>li:hover,.sf-menu>li.sfHover{background:#f0f0f0;} | .sf-menu>li.current,.sf-menu>li:hover,.sf-menu>li.sfHover{background:#f0f0f0;} | ||
Line 52: | Line 57: | ||
fieldset{border:none;padding:0;margin:0;} | fieldset{border:none;padding:0;margin:0;} | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/* style.css */ | /* style.css */ | ||
Line 151: | Line 122: | ||
.flash-1{height:416px;width:950px;overflow:hidden;background:#fff;} | .flash-1{height:416px;width:950px;overflow:hidden;background:#fff;} | ||
.flash{height:499px;width:1000px;margin-left:-25px;overflow:hidden;margin-top:-7px} | .flash{height:499px;width:1000px;margin-left:-25px;overflow:hidden;margin-top:-7px} | ||
- | .icons{overflow:hidden;float:right;padding:23px | + | .icons{overflow:hidden;float:right;padding:15px 23px 0px 0;} |
.icons li{float:left;margin:0 5px 0 0;} | .icons li{float:left;margin:0 5px 0 0;} | ||
/********************** Content ************************/ | /********************** Content ************************/ | ||
Line 293: | Line 264: | ||
dl dd span{display:inline-block;width:104px;} | dl dd span{display:inline-block;width:104px;} | ||
dl dd a{color:#5d5d60;} | dl dd a{color:#5d5d60;} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/* Information box */ | /* Information box */ | ||
Line 419: | Line 384: | ||
/* reset igem wiki css */ | /* reset igem wiki css */ | ||
- | |||
#content {width:100%; padding:0px; background: none; border: none; } | #content {width:100%; padding:0px; background: none; border: none; } | ||
#footer-box { display: none; } | #footer-box { display: none; } | ||
Line 426: | Line 390: | ||
#contentSub {margin: 0px; } | #contentSub {margin: 0px; } | ||
div#bodyContent p {margin: 0px; } | div#bodyContent p {margin: 0px; } | ||
+ | |||
+ | #top-section { | ||
+ | background-color: black; | ||
+ | opacity: .3; | ||
+ | border: medium none; | ||
+ | height: 15px; | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | z-index: 20; | ||
+ | overflow: hidden; | ||
+ | font-size: small; | ||
+ | } | ||
+ | #top-section .left-menu { | ||
+ | padding-top: 3px; | ||
+ | padding-left: 50px; | ||
+ | } | ||
+ | #top-section .right-menu { | ||
+ | padding-right: 50px; | ||
+ | padding-top: 3px; | ||
+ | } | ||
+ | #top-section:hover { | ||
+ | opacity: .8; | ||
+ | } | ||
+ | |||
+ | #p-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | #search-controls { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* skitter.css */ | ||
+ | /* =Skitter styles | ||
+ | ----------------------------------------------- */ | ||
+ | .box_skitter {position:relative;width:900px;height:400px;background:#000;} | ||
+ | .box_skitter img { max-width:none; } /* Tip for stildv */ | ||
+ | .box_skitter ul {display:none;} | ||
+ | .box_skitter .container_skitter {overflow:hidden;position:relative;} | ||
+ | .box_skitter .image {overflow:hidden;} | ||
+ | .box_skitter .image img {display:none;} | ||
+ | |||
+ | /* =Box clone | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .box_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;} | ||
+ | .box_skitter .box_clone img {position:absolute;top:0;left:0;z-index:20;} | ||
+ | |||
+ | /* =Navigation | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .prev_button {position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/5/5a/Skitter-Prev.png") no-repeat left top;} | ||
+ | .box_skitter .next_button {position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/b/b7/Skitter-Next.png") no-repeat left top;} | ||
+ | |||
+ | /* =Numbers | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;} | ||
+ | .box_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;} | ||
+ | .box_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;} | ||
+ | |||
+ | /* =Thumbs | ||
+ | Change width and height to customization dimension thumb | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .container_thumbs { position:relative;overflow:hidden;height:50px; } | ||
+ | .box_skitter .info_slide_thumb { height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:auto;top:0;left:0;padding:0 !important;opacity:1.0; } | ||
+ | .box_skitter .info_slide_thumb .image_number { overflow:hidden;width:100px;height:50px;position:relative;margin:0 !important; padding:0 !important; -moz-border-radius:0 !important;-webkit-border-radius:0 !important;border-radius:0 !important;} | ||
+ | .box_skitter .info_slide_thumb .image_number img { position:absolute;top:-30px;left:-30px;height:100px;} | ||
+ | .box_skitter .box_scroll_thumbs { padding:0; } | ||
+ | .box_skitter .box_scroll_thumbs .scroll_thumbs { position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101; cursor:pointer;border:0px solid #333; } | ||
+ | |||
+ | /* =Dots | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;} | ||
+ | .box_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;} | ||
+ | .box_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;} | ||
+ | |||
+ | /* =Loading | ||
+ | -------------------------------------------------------------- */ | ||
+ | .loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url("") no-repeat left top;width:32px;height:32px;} | ||
+ | |||
+ | /* =Label | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .label_skitter { z-index:150;position:absolute;bottom:0px;left:0px;display:none; } | ||
+ | .box_skitter .label_skitter { z-index:150;position:absolute;bottom:0px;left:0px;color:#fff;display:none;opacity:0.8;background:#000; } | ||
+ | .box_skitter .label_skitter p { padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px; } | ||
+ | .box_skitter .info_slide * { font-family:Consolas,arial,tahoma !important; } | ||
+ | .box_skitter .progressbar { background:#000; position:absolute; top:5px;left:15px;height:5px; width: 200px; z-index:99; border-radius:20px; } | ||
+ | |||
+ | /* =Preview slide | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter .preview_slide { display:none; position:absolute; z-index:152; bottom:30px; left:-40px; width:100px; height:100px; background:#fff; border:1px solid #222; -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; overflow:hidden; } | ||
+ | .box_skitter .preview_slide ul { height:100px; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0; } | ||
+ | .box_skitter .preview_slide ul li { width:100px; height:100px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block; } | ||
+ | .box_skitter .preview_slide ul li img { position:absolute; top:0; left:0; height:150px; width:auto; } | ||
+ | |||
+ | /* =Focus | ||
+ | -------------------------------------------------------------- */ | ||
+ | #overlay_skitter { position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000; } | ||
+ | |||
+ | .box_skitter .focus_button {position:absolute;top:50%;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/a/ac/Focus-button.png") no-repeat left top;opacity:0;} | ||
+ | .box_skitter .play_pause_button {position:absolute;top:50%;z-index:151;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url("https://static.igem.org/mediawiki/2012/d/d9/Pause-button.png") no-repeat left top;opacity:0;} | ||
+ | .box_skitter .play_pause_button.play_button {background:url("https://static.igem.org/mediawiki/2012/4/49/Skitter-Play-button.png") no-repeat left top;} | ||
+ | |||
+ | /* =Example for dimenions | ||
+ | -------------------------------------------------------------- */ | ||
+ | .box_skitter_large {width:900px;height:400px;} | ||
+ | .box_skitter_small {width:200px;height:100px;} | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $("#menubar a").css('background','none'); | ||
+ | $("#top-section a").css("color", "white"); | ||
+ | $("#menubar ul").css('background', 'black'); | ||
+ | $(".left-menu").css('background', 'none'); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</head> | </head> | ||
Line 435: | Line 514: | ||
<header> | <header> | ||
<div class="main"> | <div class="main"> | ||
- | + | <map id="imgmap20129273659" name="imgmap20129273659"><area shape="rect" alt="" title="" coords="531,4,753,170" href="https://2012.igem.org/Main_Page" target="" /><area shape="rect" alt="" title="" coords="270,4,509,193" href="https://2012.igem.org/Team:Fatih-Medical/Project" target="" /><area shape="rect" alt="" title="" coords="6,1,237,170" href="https://2012.igem.org/Team:Fatih-Medical" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map> | |
- | + | ||
- | + | <img usemap="#imgmap20129273659" style="margin-left: 96px;" src="https://static.igem.org/mediawiki/2012/archive/f/f7/20120926021353!Sherlocoli_Overview_%281%29.png"> | |
- | + | ||
- | + | <nav style="margin-top: -65px;"> | |
- | <nav> | + | |
<ul class="sf-menu"> | <ul class="sf-menu"> | ||
<li><a href="https://2012.igem.org/Team:Fatih-Medical">Home</a></li> | <li><a href="https://2012.igem.org/Team:Fatih-Medical">Home</a></li> | ||
Line 446: | Line 524: | ||
<ul> | <ul> | ||
<li><a href="https://2012.igem.org/Team:Fatih-Medical/Project">Overall Project</a></li> | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Project">Overall Project</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Sherlocoli">Sherlocoli</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Fatih-Medical/DJcoli">DJcoli</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Dracoli">Dracoli</a></li> | ||
<li><a href="https://2012.igem.org/Team:Fatih-Medical/Project/Parts">Parts</a></li> | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Project/Parts">Parts</a></li> | ||
- | <li><a href="https://2012.igem.org/Team:Fatih-Medical/ | + | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Future_Work">Future Work</a></li> |
- | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Data_Page">Data Page</a></li> | + | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Data_Page">Data Page</a></li> |
- | <li><a href=" | + | <li><a href="#">Lab Garage</a> |
<ul> | <ul> | ||
- | |||
<li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Diary">Diary</a></li> | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Diary">Diary</a></li> | ||
<li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Gallery">Gallery</a></li> | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Lab/Gallery">Gallery</a></li> | ||
Line 464: | Line 543: | ||
<a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice">Human Practice</a> | <a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice">Human Practice</a> | ||
<ul> | <ul> | ||
- | <a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice | + | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice">Overall Outreach</a></li> |
- | <a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice/Secret_Book">Secret Book of FM</a> | + | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice/Secret_Book">Secret Book of FM</a></li> |
- | <a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice/Collaborations">Collaborations</a> | + | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Survey">Survey</a></li> |
+ | <li><a href="https://2012.igem.org/Team:Fatih-Medical/Human_Practice/Collaborations">Collaborations</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 472: | Line 552: | ||
</li> | </li> | ||
</ul> | </ul> | ||
+ | |||
+ | <ul class="icons"> | ||
+ | <li><a class="normatip" title="Twitter" href="http://twitter.com/FatihMedical"><img src="https://static.igem.org/mediawiki/2012/d/df/Fatih-Icon1.png" alt=""></a></li> | ||
+ | <li><a class="normatip" title="Fecebook" href="http://www.facebook.com/FatihMedical"><img src="https://static.igem.org/mediawiki/2012/d/d8/Fatih-Icon3.png" alt=""></a></li> | ||
+ | </ul> | ||
+ | |||
<div class="bottom"></div> | <div class="bottom"></div> | ||
</nav> | </nav> |
Latest revision as of 02:01, 27 September 2012