Difference between revisions of "Template:ElanVitalKorea"

 
(58 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
<head>
 
<head>
 
<style>
 
<style>
 +
  html, body, .wrapper{       
 +
        width: 100%;
 +
        height: 100%;
 +
        background-color: transparent;
 +
    }
  
 +
    #cssmenu
 +
    {
 +
    padding: 0;
 +
    margin: 0; border: 0;
 +
    text-align:center;
 +
    }
  
−
#cssmenu {padding: 0; margin: 0; border: 0; text-align:center;}
+
    #cssmenu ul, #cssmenu li
−
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
+
    {
−
#cssmenu ul {position: relative; z-index: 597; display:inline-block; list-style:none;}
+
    list-style: none;
−
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
+
    margin: 0;
−
#cssmenu ul li.hover,
+
    padding: 0;
−
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
+
    }
−
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
+
−
#cssmenu ul ul li {float: none;}
+
−
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
+
−
#cssmenu ul li:hover > ul { visibility: visible;}
+
−
#cssmenu ul ul {bottom: 0; left: 0;}
+
−
#cssmenu ul ul {margin-top: 0; }
+
−
#cssmenu ul ul li {font-weight: normal;}
+
−
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
+
  
−
#cssmenu li {
+
    #cssmenu ul
−
text-align:left;
+
    {
−
}
+
    position: relative;
 +
    z-index: 597;
 +
    display:inline-block;
 +
    list-style:none;
 +
    }
  
−
#cssmenu {
+
    #cssmenu ul li
−
  background: #333;
+
    {
−
  border-bottom: 4px solid #1b9bff;
+
    float: left;
−
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
+
    min-height: 1px;
−
  font-size: 12px;
+
    vertical-align: middle;
−
}
+
    }
  
−
  #cssmenu > ul { *display: inline-block; }
+
    #cssmenu ul li.hover,
 +
    #cssmenu ul li:hover
 +
    {
 +
    position: relative;
 +
    z-index: 599;
 +
    cursor: default;
 +
    }
  
−
  #cssmenu:after, #cssmenu ul:after {
+
    #cssmenu ul ul
−
     content: '';
+
    {
−
     display: block;
+
     visibility: hidden;
−
     clear: both;
+
     position: absolute;
−
}
+
     top: 100%;
 +
    left: 0;
 +
    z-index: 598;
 +
    width: 100%;
 +
    }
  
−
#cssmenu a {
+
    #cssmenu ul ul li
−
     background: #333;
+
     {
−
     color: #CBCBCB;
+
     float: none;
−
     padding: 0 20px;
+
     }
−
}
+
−
#cssmenu ul { text-transform: uppercase; }
+
  
−
     #cssmenu ul ul {
+
     #cssmenu ul ul ul
−
      border-top: 4px solid #1b9bff;
+
    {
−
      text-transform: none;
+
    top: 0;
−
      min-width: 190px;
+
    left: auto;
−
}
+
    right: -99.5%;
−
      #cssmenu ul ul a {
+
    }
−
        background: #1b9bff;
+
−
        color: #FFF;
+
−
        border: 1px solid #0082e7;
+
−
        border-top: 0 none;
+
−
        line-height: 150%;
+
−
        padding: 16px 20px;
+
−
}
+
−
      #cssmenu ul ul ul { border-top: 0 none; }
+
  
−
      #cssmenu ul ul li { position: relative }
+
    #cssmenu ul li:hover > ul
 +
    {
 +
    visibility: visible;
 +
    }
  
−
#cssmenu > ul > li > a { line-height: 48px; }
+
    #cssmenu ul ul
 +
    {bottom: 0; left: 0;
 +
    }
  
−
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
+
    #cssmenu ul ul
−
        #cssmenu ul ul li:hover > a { background: #35a6ff; }
+
    {margin-top: 0;
 +
    }
  
−
        #cssmenu ul ul li:last-child > a {
+
    #cssmenu ul ul li
−
          border-radius: 0 0 3px 3px;
+
    {
−
          box-shadow: 0 1px 0 #1b9bff;
+
    font-weight: normal;
−
}
+
    }
−
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
+
  
−
        #cssmenu ul ul li.has-sub > a:after {
+
    #cssmenu a
−
          content: '+';
+
    {
−
          position: absolute;
+
    display: block; line-height: 1em; text-decoration: none;
−
          top: 50%;
+
    }
−
          right: 15px;
+
−
          margin-top: -8px;
+
−
}
+
  
−
     #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
+
     #cssmenu li
−
      background: #1b9bff;
+
    {
−
      color: #FFF;
+
     text-align:left;
−
}
+
     }
−
     #cssmenu ul li.has-sub > a:after {
+
−
      content: '+';
+
−
      margin-left: 5px;
+
−
}
+
−
     #cssmenu ul li.last ul {
+
−
      left: auto;
+
−
      right: 0;
+
−
}
+
−
      #cssmenu ul li.last ul ul {
+
−
        left: auto;
+
−
        right: 99.5%;
+
−
}
+
  
−
#center {
+
    #cssmenu
−
  /*Centering Method 2*/
+
    {
−
  margin: 10% 0 10% 0%;
+
    background: #333;
−
  left: 50%;
+
    border-bottom: 4px solid #1b9bff;
−
  top: 50%;
+
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
−
}
+
    font-size: 16px;
 +
    }
  
 +
    #cssmenu > ul
 +
    {
 +
    *display: inline-block;
 +
    }
  
−
img.displayed {
+
    #cssmenu:after, #cssmenu ul:after
 +
    {
 +
    content: '';
 
     display: block;
 
     display: block;
−
     margin-left: auto;
+
     clear: both;
−
     margin-right: auto;
+
     }
−
}
+
  
−
h4 {
+
    #cssmenu a
−
color:white;
+
    {
−
letter-spacing:2px;
+
    background: #333;
−
font-size: 24px;
+
    color: #CBCBCB;
−
}
+
    padding: 0 20px;
 +
    }
  
−
a:link {
+
    #cssmenu ul
−
     text-decoration: none;
+
    {
−
}
+
     text-transform: uppercase;
 +
    }
  
−
a:visited {
+
    #cssmenu ul ul
−
     text-decoration: none;
+
    {
−
}
+
    border-top: 4px solid #1b9bff;
 +
     text-transform: none;
 +
    min-width: 190px;
 +
    }
  
−
a:hover {
+
    #cssmenu ul ul a
−
     text-decoration: none;
+
    {
−
}
+
     background: #1b9bff;
 +
    color: #FFF;
 +
    border: 1px solid #0082e7;
 +
    border-top: 0 none;
 +
    line-height: 150%;
 +
    padding: 16px 20px;
 +
    }
  
−
a:active {
+
    #cssmenu ul ul ul
−
     text-decoration: none;
+
    {
−
}
+
     border-top: 0 none;
 +
    }
  
−
body {
+
    #cssmenu ul ul li
−
  /* Location of the image */
+
    {
−
background-image: url("https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png");
+
    position: relative
−
+
    }
−
  /* Background image is centered vertically and horizontally at all times */
+
−
  background-position: center center;
+
−
+
−
  /* Background image doesn't tile */
+
−
  background-repeat: no-repeat;
+
−
+
−
  /* Background image is fixed in the viewport so that it doesn't move when
+
−
    the content's height is greater than the image's height */
+
−
  background-attachment: fixed;
+
−
+
−
  /* This is what makes the background image rescale based
+
−
    on the container's size */
+
−
  background-size: cover;
+
−
}
+
  
 +
    #cssmenu > ul > li > a
 +
    {
 +
    line-height: 48px;
 +
    }
  
−
</style>
+
    #cssmenu ul ul li:first-child > a
 +
    {
 +
    border-top: 1px solid #0082e7;
 +
    }
 +
 
 +
    #cssmenu ul ul li:hover > a
 +
    {
 +
    background: #35a6ff;
 +
    }
 +
 
 +
    #cssmenu ul ul li:last-child > a
 +
    {
 +
    border-radius: 0 0 3px 3px;
 +
    box-shadow: 0 1px 0 #1b9bff;
 +
    }
  
−
<script>
+
    #cssmenu ul ul li:last-child:hover > a
−
/**
+
    {
−
* SmoothScroll
+
    border-radius: 0 0 0 3px;
−
* This helper script created by DWUser.com.  Copyright 2012 DWUser.com. 
+
    }
−
* Dual-licensed under the GPL and MIT licenses. 
+
−
* All individual scripts remain property of their copyrighters.
+
−
* Date: 10-Sep-2012
+
−
* Version: 1.0.1
+
−
*/
+
−
if (!window['jQuery']) alert('The jQuery library must be included before the smoothscroll.js file.  The plugin will not work propery.');
+
  
−
/**
+
    #cssmenu ul ul li.has-sub > a:after
−
* jQuery.ScrollTo - Easy element scrolling using jQuery.
+
    {
−
* Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+
    content: '+';
−
* Dual licensed under MIT and GPL.
+
    position: absolute;
−
* @author Ariel Flesler
+
    top: 50%;
−
* @version 1.4.3.1
+
    right: 15px;
−
*/
+
    margin-top: -8px;
−
;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
+
    }
  
−
/**
+
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a
−
* jQuery.LocalScroll
+
    {
−
* Copyright (c) 2007-2010 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+
    background: #1b9bff;
−
* Dual licensed under MIT and GPL.
+
    color: #FFF;
−
* Date: 05/31/2010
+
    }
−
* @author Ariel Flesler
+
−
* @version 1.2.8b
+
−
**/
+
−
;(function(b){function g(a,e,d){var h=e.hash.slice(1),f=document.getElementById(h)||document.getElementsByName(h)[0];if(f){a&&a.preventDefault();var c=b(d.target);if(!(d.lock&&c.is(":animated")||d.onBefore&&!1===d.onBefore(a,f,c))){d.stop&&c._scrollable().stop(!0);if(d.hash){var a=f.id==h?"id":"name",g=b("<a> </a>").attr(a,h).css({position:"absolute",top:b(window).scrollTop(),left:b(window).scrollLeft()});f[a]="";b("body").prepend(g);location=e.hash;g.remove();f[a]=h}c.scrollTo(f,d).trigger("notify.serialScroll",
+
−
[f])}}}var i=location.href.replace(/#.*/,""),c=b.localScroll=function(a){b("body").localScroll(a)};c.defaults={duration:1E3,axis:"y",event:"click",stop:!0,target:window,reset:!0};c.hash=function(a){if(location.hash){a=b.extend({},c.defaults,a);a.hash=!1;if(a.reset){var e=a.duration;delete a.duration;b(a.target).scrollTo(0,a);a.duration=e}g(0,location,a)}};b.fn.localScroll=function(a){function e(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,"")==i&&(!a.filter||b(this).is(a.filter))}
+
−
a=b.extend({},c.defaults,a);return a.lazy?this.bind(a.event,function(d){var c=b([d.target,d.target.parentNode]).filter(e)[0];c&&g(d,c,a)}):this.find("a,area").filter(e).bind(a.event,function(b){g(b,this,a)}).end().end()}})(jQuery);
+
  
−
// Initialize all .smoothScroll links
+
    #cssmenu ul li.has-sub > a:after
−
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });
+
    {
−
</script>
+
    content: '+';
 +
    margin-left: 5px;
 +
    }
  
−
</head>
+
    #cssmenu ul li.last ul
 +
    {
 +
    left: auto;
 +
    right: 0;
 +
    }
 +
    #cssmenu ul li.last ul ul
 +
    {
 +
    left: auto;
 +
    right: 99.5%;
 +
    }
  
 +
</style>
 +
</head>
 
<body>
 
<body>
  
Line 202: Line 222:
 
     <li class='has-sub'><a href='#'>Team</a>
 
     <li class='has-sub'><a href='#'>Team</a>
 
         <ul>
 
         <ul>
−
           <li><a href='#'>Members</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Members'>Members</a>
−
           <li><a href='#'>Attribution</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Attributions'>Attributions</a>
 
         </ul>
 
         </ul>
 
     <li class='has-sub'><a href='#'>Project</a>
 
     <li class='has-sub'><a href='#'>Project</a>
 
         <ul>
 
         <ul>
−
           <li><a href='#'>Project Overview</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Project_Overview'>Project Overview</a>
−
           <li><a href='#'>Background Information</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Design'>Plasmids Design</a>
−
          <li class='has-sub '><a>Method & Materials</a>
+
          <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Background'>Background Information</a>
−
              <ul>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Parts'>Parts</a>
−
                <li><a href='#'>Plasmid Design</a></li>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Result'>Result</a>
−
                <li><a href='#'>Protocols</a></li>
+
−
              </ul>
+
−
          <li><a href='#'>Result</a>
+
−
           <li><a href='#'>Conclusions</a>
+
−
           <li><a href='#'>Future Plans</a>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 222: Line 237:
 
     <li class='has-sub'><a href='#'>Wetlab</a>
 
     <li class='has-sub'><a href='#'>Wetlab</a>
 
         <ul>
 
         <ul>
−
           <li><a href='#'>Notebook</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Protocol'>Protocol</a>
−
           <li><a href='#'>Protocal</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Notebook'>Notebook</a>
−
           <li><a href='#'>Safety</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Safety'>Safety</a>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 230: Line 245:
 
     <li class='has-sub'><a href='#'>Human Practice</a>
 
     <li class='has-sub'><a href='#'>Human Practice</a>
 
         <ul>
 
         <ul>
−
           <li><a href='#'>Focus</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Practices'>Practices</a>
−
          <li><a href='#'>Korea Youth Expo</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Collaborations'>Collaborations</a>
−
          <li><a href='#'>Education & Public Awareness</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Video'>Video</a>
−
          <li><a href='#'>Policy Recommendations</a>
+
−
          <li><a href='#'>Blog</a>
+
−
           <li><a href='#'>Interview</a>
+
−
          <li><a href='#'>Regional Meet-ups</a>
+
−
           <li><a href='#'>Articles</a>
+
−
          <li><a href='#'>Video</a>
+
−
          <li><a href='#'>Presentations</a>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
−
 
 
     <li class='has-sub'><a href='#'>iGEM Resource</a>
 
     <li class='has-sub'><a href='#'>iGEM Resource</a>
 
         <ul>
 
         <ul>
−
           <li><a href='#'>Medal Requirement</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Medal_Requirement'>Medal Requirement</a>
−
          <li><a href='#'>Module Description</a>
+
 
   </ul>
 
   </ul>
 
</li>
 
</li>
 
</div>
 
</div>
  
−
<div id="center">
 
−
<a href=#"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"></a>
 
  
−
<br>
+
</body>
−
<br>
+
−
<br>
+
−
<br>
+
−
<br>
+
  
−
<h4 style="text-align:center;">
 
−
MEMBERS <br>
 
−
</h4>
 
−
 
−
 
−
<a href="#" class="smoothScroll"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png" width="1.8%;" height="1.8%;" ></a>
 
−
</div>
 
−
 
−
<br>
 
−
<br>
 
−
<br>
 
−
 
−
</body>
 
 
</html>
 
</html>

Latest revision as of 23:33, 18 September 2015