Difference between revisions of "Template:UCopenhagen-header/CSS"

 
(45 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
<html>
  
−
<html lang="en">
+
<script>
  
−
    <meta charset="utf-8">
+
// This is the jquery part of your template. 
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
// Try not modify any of this code too much since it makes your menu work.
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <meta name="description" content="UCPH - iGEM">
+
−
    <meta name="author" content="InCell">
+
  
−
    <!-- Bootstrap Core CSS -->
+
$(document).ready(function() {
−
    <link href="https://2017.igem.org/wiki/index.php?title=Template:BOKU-Vienna-bootstrap.css&action=raw&ctype=text/css" rel="stylesheet"/>
+
  
−
<head>
+
$("#HQ_page").attr('id','');
−
<title>inCell</title>
+
−
<link rel="stylesheet" type="text/css" href="style.css">
+
−
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=open+Sans">
+
−
</head>
+
  
−
<body>
+
// call the functions that control the menu  
−
<nav class="menu">
+
menu_functionality();
−
+
hide_show_menu();
−
<ul id="rmenu">
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen"> HOME</a>
+
−
+
−
</li>
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Team">TEAM</a>
+
−
<div class="sub-content">
+
−
<div class="sub-drop">
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:UCopenhagen/Team" class="sub-item">The Team</a></li>
+
−
<li><a href="#" class="sub-item">Team Attribution</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</li>
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Project">PROJECT</a>
+
−
<div class="sub-content">
+
−
<div class="sub-drop">
+
−
<ul>
+
  
  
−
<li><a href="https://2017.igem.org/Team:UCopenhagen/Project" class="sub-item">The Project</a></li>
 
−
<li><a href="#" class="sub-item">Modeling</a>
 
−
<ul id="subx-menu">
 
−
<li><a href="#" class="subx-item">Genetic stability</a></li>
 
−
<li><a href="#" class="subx-item">Glyoxylate Shunt</a></li>
 
−
<li><a href="#" class="subx-item">Biosensor</a></li>
 
−
<li><a href="#" class="subx-item">Transporter</a></li>
 
−
</ul>
 
  
−
</li>
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
function menu_functionality() {
  
 +
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 +
$(".menu_button").click(function(){
  
−
</ul>
+
// add or remove the class "open" , this class holds the "-"
−
</div>
+
$(this).children().toggleClass("open");
−
</div>
+
// show or hide the submenu
 +
$(this).next('.submenu_wrapper').fadeToggle(400);
 +
});
  
−
</li>
+
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Parts">PARTS</a>
+
$("#display_menu_control").click(function(){
−
<div class="sub-content">
+
$('#menu_content').fadeToggle(400);
−
<div class="sub-drop">
+
});
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Amsterdam/News" class="sub-item">The news</a></li>
+
−
<li><a href="#" class="sub-item">Newsletters</a></li>
+
−
<li><a href="#" class="sub-item">Online articles</a></li>
+
−
<li><a href="#" class="sub-item">Magazines</a></li>
+
−
<li><a href="#" class="sub-item">Platforms</a></li>
+
−
</ul>
+
−
</div>
+
−
</div> </li>
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Outreach">OUTREACH</a> </li>
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Sponsors">SPONSORS</a> </li>
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Safety">SAFETY</a>
+
−
<div class="sub-content">
+
−
<div class="sub-drop">
+
−
<ul>
+
−
<li><a href="#" class="sub-item">Parts</a></li>
+
−
<li><a href="#" class="sub-item">Labjournal</a></li>
+
−
<li><a href="#" class="sub-item">Protocols</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</li>
+
−
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Achievements">ACHIEVEMENTS</a> </li>
+
−
<li> <a class="menu-item" href="#">SAFETY</a> </li>
+
−
+
−
+
−
+
−
</ul>
+
−
</nav>
+
−
+
  
−
</body>
+
// call the current page highlight function
 +
highlight_current_page();
 +
}
  
−
<!-- //////////////////////////////////////////// -->
 
  
 +
// call the highlight current page function to show it on the menu with a different background color
 +
function highlight_current_page() {
  
−
<style>
+
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
−
* {
+
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
−
margin: 0;
+
−
padding: 0;
+
−
font: 1em "Tahoma", Geneva, sans-serif;
+
−
}
+
−
body {
+
  
−
background-color: transparent;
+
// now that the current_page class has been added to a menu item, make the submenu fade in
−
}
+
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 +
// change the +/- symbol of the corresponding menu button
 +
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 +
 +
}
  
−
/*.....................................*/
 
  
−
a:link {
 
−
    color: white;
 
−
    background-color: transparent;
 
−
    text-decoration: none;
 
−
}
 
  
−
a:visited {
+
// allow button on the black menu bar to show/hide the side menu
−
    color: white;
+
function hide_show_menu() {
−
    background-color: transparent;
+
−
    text-decoration: none;
+
−
}
+
−
 
+
−
 
+
−
/*.....................................*/
+
−
 
+
−
.menu {
+
−
position: fixed;
+
−
left: 0;
+
−
top: 0;
+
−
border-top: 0;
+
−
z-index: 100;
+
−
box-shadow: -1px 15px 1px rgba(0,0,0,0.3);
+
−
width: 100%;
+
−
background-color: #264653;
+
−
        color: white;
+
−
height: 60px; 
+
−
}
+
−
.myimg {
+
−
width: 100px;
+
−
float: left;
+
−
height: 30px;
+
−
padding: 15px 30px;
+
−
}
+
−
.menu #logo {
+
−
float: left;
+
−
height: 30px;
+
−
padding: 15px 30px;
+
−
font-size: 1.2em;
+
−
line-height: 30px;
+
−
display: none;
+
−
}
+
−
.menu > ul {
+
−
margin: 0;
+
−
padding: 0;
+
−
float: left;
+
−
list-style-type: none;
+
−
}
+
−
 
+
−
.menu > ul > li {
+
−
      overflow: hidden;
+
−
float: left;
+
−
}
+
−
 
+
−
 
+
−
.menu-item {
+
−
display: inline-block;
+
−
padding: 15px 10px;
+
−
height: 30px;
+
−
line-height: 30px;
+
−
color: #fff;
+
−
text-decoration: none;
+
−
}
+
−
 
+
−
.menu-item:hover {
+
−
 
+
−
background-color: #2a9d8f;
+
−
}
+
−
 
+
−
 
+
−
/*................STYLING SUB.....................*/
+
−
 
+
−
.sub-content {
+
 
 
−
position: absolute;
+
// in case you preview mode is selected, the menu is hidden for better visibility
−
top: 100%;
+
if (window.location.href.indexOf("submit") >= 0) {
−
overflow: hidden;
+
$(".igem_2017_menu_wrapper").hide();
−
background-color: #333;
+
}
−
max-height: 0;
+
−
}
+
  
−
.sub-content a {
+
// if the black menu bar has been loaded
−
color: #fff;
+
  if (document.getElementById('bars_item')) {
−
text-decoration: none;
+
−
}
+
  
−
.sub-drop {
+
// when the "bars_item" has been clicked
 +
$("#bars_item").click(function() {
 +
$("#sideMenu").hide();
  
−
padding: 0;
+
// show/hide the menu wrapper
−
}
+
$(".igem_2017_menu_wrapper").fadeToggle("100");
 +
});
 +
  }  
  
−
.sub-drop ul {
+
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
−
width: 100%;
+
else {
−
padding: 0;
+
    setTimeout(hide_show_menu, 15);
−
margin: 0;
+
}
−
list-style-type: none;
+
}
−
}
+
  
−
.sub-drop ul li a {
 
−
display: inline-block;
 
−
padding: 10px 20px;
 
−
}
 
  
−
.sub-drop ul li:hover {
+
});
−
+
−
background-color: #ff0055;
+
−
}
+
  
−
/*...............Sub-sub Menu.....................*/
 
  
−
ul#subx-menu {
+
</script>
−
position: absolute;
+
−
top: 36px;
+
−
left: 99px;
+
−
background-color: #333;
+
−
overflow: hidden;
+
−
max-width: 0;
+
−
}
+
  
−
ul#subx-menu {
 
−
width: 130px;
 
−
}
 
  
−
.sub-drop ul li:hover > ul#subx-menu {
 
−
max-width: 400px;
 
−
transition: max-width 0.5s ease-in;
 
−
-webkit-transition: max-height 0.3s ease-in;
 
−
-moz-transition: max-height 0.3s ease-in;
 
−
}
 
  
  
−
/*...............Sub Drop.....................*/
 
  
 +
<style>
  
  
−
.sub-drop > ul {
+
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
overflow: hidden;
+
/* Clear the default wiki settings */
−
visibility: hidden;
+
#home_logo, #sideMenu { display:none; }
−
opacity: 0;
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
.menu ul li:hover .sub-drop ul{
+
/********************************* HTML STYLING  *********************************/
−
visibility: visible;
+
−
opacity: 1;
+
−
transition: visibility 0s, opacity 0.3s ease-in;
+
−
}
+
  
 +
*/body{font-family:Lora,'Helvetica Neue',Helvetica,Arial,sans-serif;position:relative;width:100%;height:100%;color:#fff;background-color:#000}html{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:0 0 35px;letter-spacing:1px;text-transform:uppercase}p{font-size:16px;line-height:1.5;margin:0 0 25px}@media (min-width:768px){p{font-size:18px;line-height:1.6;margin:0 0 35px}}a{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;color:#42dca3}a:focus,a:hover{text-decoration:none;color:#1d9b6c}#mainNav{font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;margin-bottom:0;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.3);background-color:#000}#mainNav .navbar-toggler{font-size:14px;padding:11px;color:#fff;border:1px solid #fff}#mainNav .navbar-brand{font-weight:700}#mainNav a{color:#fff}#mainNav .navbar-nav .nav-item{-webkit-transition:background .3s ease-in-out;-moz-transition:background .3s ease-in-out;transition:background .3s ease-in-out}#mainNav .navbar-nav .nav-item:hover{color:fade(white,80%);outline:0;background-color:transparent}#mainNav .navbar-nav .nav-item:active,#mainNav .navbar-nav .nav-item:focus{outline:0;background-color:transparent}@media (min-width:992px){#mainNav{padding-top:20px;padding-bottom:20px;-webkit-transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;-moz-transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;letter-spacing:1px;border-bottom:none;background:0 0}#mainNav.navbar-shrink{padding-top:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.3);background:#000}#mainNav .nav-link.active{outline:0;background-color:rgba(255,255,255,.3)}#mainNav .nav-link.active:hover{color:#fff}}.masthead{display:table;width:100%;height:auto;padding:200px 0;text-align:center;color:#fff;background:url(../img/intro-bg.jpg) no-repeat bottom center scroll;background-color:#000;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.masthead .intro-body{display:table-cell;vertical-align:middle}.masthead .intro-body .brand-heading{font-size:50px}.masthead .intro-body .intro-text{font-size:18px}@media (min-width:768px){.masthead{height:100%;padding:0}.masthead .intro-body .brand-heading{font-size:100px}.masthead .intro-body .intro-text{font-size:22px}}.btn-circle{font-size:26px;width:55px;height:55px;margin-top:15px;line-height:38px;-webkit-transition:background .3s ease-in-out;-moz-transition:background .3s ease-in-out;transition:background .3s ease-in-out;color:#fff;border:2px solid #fff;border-radius:100%!important;background:0 0}.btn-circle:focus,.btn-circle:hover{color:#fff;outline:0;background:rgba(255,255,255,.1)}.content-section{padding-top:150px;padding-bottom:150px}.download-section{color:#fff;background:url(../img/downloads-bg.jpg) no-repeat center center scroll;background-color:#000;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#map{width:100%;height:300px}@media (min-width:992px){.content-section{padding-top:200px;padding-bottom:200px}#map{height:350px}}.btn{font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;text-transform:uppercase;border-radius:0}.btn-default{color:#42dca3;border:1px solid #42dca3;background-color:transparent}.btn-default:focus,.btn-default:hover{color:#000;border:1px solid #42dca3;outline:0;background-color:#42dca3}ul.banner-social-buttons{margin-top:0}@media (max-width:1199px){ul.banner-social-buttons{margin-top:15px}}@media (max-width:767px){ul.banner-social-buttons li{display:block;margin-bottom:20px;padding:0}ul.banner-social-buttons li:last-child{margin-bottom:0}}footer{padding:50px 0}footer p{font-size:14px;margin:0}::-moz-selection{background:#fcfcfc;background:rgba(255,255,255,.2);text-shadow:none}::selection{background:#fcfcfc;background:rgba(255,255,255,.2);text-shadow:none}img::selection{background:0 0}img::-moz-selection{background:0 0}body{-webkit-tap-highlight-color:rgba(255,255,255,.2)}
  
−
/*................Controling.....................*/
+
</style>
  
−
 
+
</html>
−
.menu-item:focus {
+
−
 
+
−
background-color: #ff0055;
+
−
}
+
−
 
+
−
.menu ul li:hover .sub-content {
+
−
max-height: 400px;
+
−
overflow: visible;
+
−
transition: max-height 0.3s ease-in;
+
−
-webkit-transition: max-height 0.3s ease-in;
+
−
-moz-transition: max-height 0.3s ease-in;
+
−
}
+
−
 
+
−
#rmenu {
+
−
+
−
float:right;
+
−
}
+
−
 
+
−
#sideMenu {
+
−
    display: none;
+
−
}
+
−
#top_title {
+
−
    display: none;
+
−
}
+
−
 
+
−
#content {
+
−
    width:100%;
+
−
      height: 100%;
+
−
      padding: 0px; 
+
−
      margin-top:-30px;
+
−
      margin-left:0px;
+
−
      background-color: #e76f51;
+
−
      color: #264653;
+
−
      font-family: Tahoma, Geneva, sans-serif;
+
−
    }
+
−
 
+
−
#globalWrapper{
+
−
    height: 100%; }
+
−
    body { background-color: #2A9D8F; height: 100%; }
+
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
 
+
−
#top_menu_under {
+
−
    height: 12px;
+
−
      background: black;
+
−
 
+
−
}
+
−
 
+
−
#top_menu_inside {
+
−
      border-left: 0px;
+
−
      border-right: 0px;
+
−
      width: 100%;
+
−
    }
+
−
 
+
−
 
+
−
ul {
+
−
    list-style-image: none; //removes the iGEM wiki bullets
+
−
}
+
−
 
+
−
</style>
+

Latest revision as of 18:24, 24 August 2017