Team:Aalto-Helsinki/sidebar

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
p {
-
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
/* font-size:50px; */
-
<div id= "sidebar-wrapper">
+
}
-
<nav>
+
-
<ul class="sidebar-nav">
+
-
<li>
+
-
<a class="home" href="https://2014.igem.org/Team:Aalto-Helsinki">
+
-
Home
+
-
</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Team">
+
-
Team
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Team-About">About us</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Team-Members">Members</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Team-Attributions">Attributions</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Team-Cooperation">Cooperation</a>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project">
+
-
Project
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project-Abstract">Abstract</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project-Introduction">Introduction</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project-Methods">Methods</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project-Results">Results</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project-Discussion">Discussion</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Project-Parts">Parts</a>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Modeling">
+
-
Modeling
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Modeling-Scent">Scent-Nuffusion</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Modeling-Time">Time Spent</a>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Software">
+
-
Software
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Modeling-Seeker">BioBrick Seeker</a>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Notes">
+
-
Notes
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Notes-Notebook">Notebook</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Notes-Safety">Safety</a>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Human-Practices">
+
-
Human Practices
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Human-Practices-Heureka">Heureka</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Human-Practices-SoS">SoS</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Human-Practices-Teaching-Videos">Teaching Videos</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Human-Practices-Social-Media">Social Media</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Human-Practices-Synthetic-Biology-For-Dummies">SynBio For Dummies</a>
+
-
</li>
+
-
</ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Qualifications">
+
-
Qualifications
+
-
</a>
+
-
<ul>
+
-
<li>
+
-
<a href="https://2014.igem.org/Team:Aalto-Helsinki/Qualifications-Medals">Medals</a>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
</li>
+
-
<a href="https://2014.igem.org/Main_Page">
+
-
<img src="https://static.igem.org/mediawiki/2014/5/5d/Aalto-helsinki-igem-black-100.png" width="55px">
+
-
</a>
+
-
</ul>
+
-
</nav>
+
-
</div>
+
-
<script>
+
-
$(document).ready(function() {
+
-
if(location.pathname != "/Team:Aalto-Helsinki") {
+
a,a:visited {
-
$('#sidebar-wrapper a[href^="https://2014.igem.org' + location.pathname + '"]').addClass('active');
+
  color:#999999;
-
} else $('#sidebar-wrapper a.home').addClass('active');
+
}
-
$('.sidebar-nav li ul li').hide();
+
.navbar td{
-
console.log($('.sidebar-nav li a.active'));
+
text-align:center;
-
$('.sidebar-nav li a.active').parent().show();
+
}
-
$('.sidebar-nav li ul li a.active').parent().siblings().show();
+
 
-
$('.sidebar-nav li ul li a.active').addClass("submenu");
+
.navbar .menu-link {
-
});
+
border:1px solid black;
-
</script>
+
height:45px;
-
</html>
+
background-color: #e7e7e7;
 +
}
 +
 
 +
.menu-link a {
 +
color:#000000;
 +
}
 +
 
 +
.navbar td:hover{
 +
background-color: #d3d3d3;
 +
}
 +
 
 +
#pagecontent {
 +
margin: 0 auto;
 +
margin-top: 5em;
 +
width: 50%;
 +
padding: 1em;
 +
border-radius: 10px;
 +
}
 +
 
 +
#welcomepage {
 +
margin: 0 auto;
 +
margin-top: 5em;
 +
width: 50%;
 +
padding: 1em;
 +
border-radius: 10px;
 +
color: white;
 +
background-color: gray;
 +
}
 +
 
 +
#top-section {
 +
  height: 0px;
 +
  border: none;
 +
  width: 980px;
 +
  margin: 0 auto;
 +
  padding: 0 0 0 0;
 +
  background-color: transparent;
 +
  overflow: hide;
 +
  position: initial;
 +
}
 +
 
 +
#menubar a {
 +
  color:#999999;
 +
}
 +
 
 +
#menubar{
 +
  margin-left:245px;
 +
}
 +
 
 +
.left-menu:hover {
 +
    color: #999999;
 +
    background-color: transparent;
 +
}
 +
 
 +
.right-menu li {
 +
    background-color: transparent;
 +
}
 +
.right-menu li a {
 +
    color: #999999;
 +
    background-color: transparent;
 +
}
 +
 
 +
/*SIDEBAAAAAAAAARRRRRRR  STYYYYLEEEEEES  sidebar.css*/
 +
 
 +
#sidebar.affix-top{
 +
position: static;
 +
margin-top:30px;
 +
width:228px;
 +
}
 +
 
 +
#sidebar.affix {
 +
position: fixed;
 +
top:70px;
 +
width:228px;
 +
}
 +
 
 +
#wrapper {
 +
  padding-left: 250px;
 +
  transition: all 0.4s ease 0s;
 +
}
 +
 
 +
#sidebar-wrapper {
 +
  margin-left: -250px;
 +
  left: 250px;
 +
  width: 250px;
 +
  position: fixed;
 +
  height: 100%;
 +
  overflow-y: auto;
 +
  z-index: 1000;
 +
  transition: all 0.4s ease 0s;
 +
}
 +
 
 +
#page-content-wrapper {
 +
  width: 100%;
 +
}
 +
 
 +
.sidebar-nav {
 +
  position: absolute;
 +
  top: 0;
 +
  width: 250px;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
.sidebar-nav li {
 +
  line-height: 40px;
 +
  text-indent: 20px;
 +
}
 +
 
 +
.sidebar-nav li a {
 +
  color: #999999;
 +
  display: block;
 +
  text-decoration: none;
 +
}
 +
 
 +
.sidebar-nav li ul li{
 +
  list-style: none;
 +
}
 +
 
 +
.sidebar-nav img {
 +
  margin-left:20px;
 +
}
 +
 
 +
.sidebar-nav li a:hover, .sidebar-nav li ul li a:hover{
 +
  color: white;
 +
  text-decoration: none;
 +
  background-color: #cccccc;
 +
}
 +
 
 +
.sidebar-nav li a:hover{
 +
}
 +
 
 +
.sidebar-nav li a.active{
 +
  background-color: #999999;
 +
  color:white;
 +
}
 +
 
 +
.sidebar-nav li ul li a.active{
 +
  background-color:white;
 +
  color:#999999
 +
}
 +
 
 +
.sidebar-nav li a:active,
 +
.sidebar-nav li a:focus {
 +
  text-decoration: none;
 +
}
 +
 
 +
.sidebar-nav > .sidebar-brand {
 +
  height: 65px;
 +
  line-height: 60px;
 +
  font-size: 18px;
 +
}
 +
 
 +
.sidebar-nav > .sidebar-brand a {
 +
  color: #999999;
 +
}
 +
 
 +
.sidebar-nav > .sidebar-brand a:hover {
 +
  color: #fff;
 +
  background: none;
 +
}
 +
 
 +
.content-header {
 +
  height: 65px;
 +
  line-height: 65px;
 +
}
 +
 
 +
.content-header h1 {
 +
  margin: 0;
 +
  margin-left: 20px;
 +
  line-height: 65px;
 +
  display: inline-block;
 +
}
 +
 
 +
#menu-toggle {
 +
  display: none;
 +
}
 +
 
 +
.inset {
 +
  padding: 20px;
 +
}
 +
 
 +
@media (max-width:767px) {
 +
 
 +
#wrapper {
 +
  padding-left: 0;
 +
}
 +
 
 +
#sidebar-wrapper {
 +
  left: 0;
 +
}
 +
 
 +
#wrapper.active {
 +
  position: relative;
 +
  left: 250px;
 +
}
 +
 
 +
#wrapper.active #sidebar-wrapper {
 +
  left: 250px;
 +
  width: 250px;
 +
  transition: all 0.4s ease 0s;
 +
}
 +
 
 +
#menu-toggle {
 +
  display: inline-block;
 +
}
 +
 
 +
.inset {
 +
  padding: 15px;
 +
}

Revision as of 09:30, 18 June 2014

p { /* font-size:50px; */ }

a,a:visited { 

 color:#999999;

}

.navbar td{ text-align:center; }

.navbar .menu-link { border:1px solid black; height:45px; background-color: #e7e7e7; }

.menu-link a { color:#000000; }

.navbar td:hover{ background-color: #d3d3d3; }

  1. pagecontent {

margin: 0 auto; margin-top: 5em; width: 50%; padding: 1em; border-radius: 10px; }

  1. welcomepage {

margin: 0 auto; margin-top: 5em; width: 50%; padding: 1em; border-radius: 10px; color: white; background-color: gray; }

  1. top-section { 
 height: 0px;
 border: none;
 width: 980px;
 margin: 0 auto;
 padding: 0 0 0 0;
 background-color: transparent;
 overflow: hide;
 position: initial;

}

  1. menubar a { 
 color:#999999;

}

  1. menubar{ 
 margin-left:245px;

}

.left-menu:hover { 

   color: #999999;
   background-color: transparent;

}

.right-menu li { 

   background-color: transparent;

} .right-menu li a { 

   color: #999999;
   background-color: transparent;

}

/*SIDEBAAAAAAAAARRRRRRR STYYYYLEEEEEES sidebar.css*/

  1. sidebar.affix-top{

position: static; margin-top:30px; width:228px; }

  1. sidebar.affix {

position: fixed; top:70px; width:228px; }

  1. wrapper { 
 padding-left: 250px;
 transition: all 0.4s ease 0s;

}

  1. sidebar-wrapper { 
 margin-left: -250px;
 left: 250px;
 width: 250px;
 position: fixed;
 height: 100%;
 overflow-y: auto;
 z-index: 1000;
 transition: all 0.4s ease 0s;

}

  1. page-content-wrapper { 
 width: 100%;

}

.sidebar-nav { 

 position: absolute;
 top: 0;
 width: 250px;
 list-style: none;
 margin: 0;
 padding: 0;

}

.sidebar-nav li { 

 line-height: 40px;
 text-indent: 20px;

}

.sidebar-nav li a { 

 color: #999999;
 display: block;
 text-decoration: none;

}

.sidebar-nav li ul li{ 

 list-style: none;

}

.sidebar-nav img { 

 margin-left:20px;

}

.sidebar-nav li a:hover, .sidebar-nav li ul li a:hover{ 

 color: white;
 text-decoration: none;
 background-color: #cccccc;

}

.sidebar-nav li a:hover{ }

.sidebar-nav li a.active{ 

 background-color: #999999;
 color:white;

}

.sidebar-nav li ul li a.active{ 

 background-color:white;
 color:#999999

}

.sidebar-nav li a:active, .sidebar-nav li a:focus { 

 text-decoration: none;

}

.sidebar-nav > .sidebar-brand { 

 height: 65px;
 line-height: 60px;
 font-size: 18px;

}

.sidebar-nav > .sidebar-brand a { 

 color: #999999;

}

.sidebar-nav > .sidebar-brand a:hover { 

 color: #fff;
 background: none;

}

.content-header { 

 height: 65px;
 line-height: 65px;

}

.content-header h1 { 

 margin: 0;
 margin-left: 20px;
 line-height: 65px;
 display: inline-block;

}

  1. menu-toggle { 
 display: none;

}

.inset { 

 padding: 20px;

}

@media (max-width:767px) {

  1. wrapper { 
 padding-left: 0;

}

  1. sidebar-wrapper { 
 left: 0;

}

  1. wrapper.active { 
 position: relative;
 left: 250px;

}

  1. wrapper.active #sidebar-wrapper { 
 left: 250px;
 width: 250px;
 transition: all 0.4s ease 0s;

}

  1. menu-toggle { 
 display: inline-block;

}

.inset { 

 padding: 15px;

}

Retrieved from "http://2014.igem.org/Team:Aalto-Helsinki/sidebar"