Difference between revisions of "Template:Freiburg/Menubar"

(Code added (sb))
Line 1: Line 1:
<!-- doctype html -->
+
<!--doctype html-->
 
<html>
 
<html>
 
     <head>
 
     <head>
         <title>DiaCHIP</title>
+
         <title>""</title>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="idee_nav3.css">
+
 
  
 
<!-- Begin CSS Stylesheet -->
 
<!-- Begin CSS Stylesheet -->
<style>
+
        <style>
  
 
/* ============= Resetting css coming from wiki itself ============= */
 
/* ============= Resetting css coming from wiki itself ============= */
Line 102: Line 102:
  
  
/* Navigation Bar style sheet */
+
/* ============= BEGIN: Stylesheet for navigation menu ============= */
  
/* Begin horizontal menubar */
+
/*Stylesheet for Navigation Bar*/
#navmenu {
+
 
     margin: 10px 0;
+
/* Begin General Settings */
 +
body {
 +
    font-family: Candara, Calibri, sans-serif;
 +
}
 +
/* End General Settings */
 +
 
 +
 
 +
#naviconwrapper {
 +
    margin: 0px ;    /*auto centers wrapper*/
 +
    height: 96px;
 +
    width: 100%;
 +
    min-width: 900px;
 +
    padding-top: 16px;
 +
    z-index: -100;
 +
    background-color: #0051A2;
 +
}
 +
 
 +
#naviconbar {
 +
     margin: 0px auto;
 
     padding: 0px;
 
     padding: 0px;
 +
    width: 100%;
 +
    min-width: 900px;
 +
    background-color: #0051A2;
 +
    border-top-color: #FFF;
 +
    border-top-width: 1px;
 +
    border-top-style: inset;
 +
    border-bottom-color: #FFF;
 +
    border-bottom-width: 1px;
 +
    border-bottom-style: outset;
 +
    z-index: -60;
 
}
 
}
 +
   
  
#navmenu ul {
+
/*Begin Settings Main Menu Icons*/
     margin: 0px;
+
#navicons {
     padding: 0px;  
+
     margin: 0px auto;
     line-height: 30px;
+
     padding: 0px;
     list-style: none;
+
     width: 720px;
 +
    height: 60px;
 +
     z-index: -10;
 +
    background-color: #FFF;    /*defines color behind icons */
 
}
 
}
  
#navmenu li {
+
#navicons ul {
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    width: 720px;
 +
    position: relative;  /*makes chip go directly behind home from left corner*/
 +
}
 +
 
 +
#navicons ul li {
 
     margin: 0px;
 
     margin: 0px;
 
     padding: 0px;
 
     padding: 0px;
     list-style-type: none;
+
     list-style: none;
 +
    /*display: block;*/
 
     float: left;
 
     float: left;
 
     position: relative;
 
     position: relative;
 
+
    line-height: 106px;
 +
    font-family: sans-serif;
 +
    font-size: 12px;
 +
    /*border: 1px solid #5781BD;*/
 +
    z-index: 4;
 
}
 
}
  
#navmenu ul li a { /* targets the size of the link area --> now not just the text but the whole box can be clicked */
+
#navicons ul li a {
     height: 30px;
+
     height: 60px;
     width: 150px;
+
     width: 120px;
    text-align: center;
+
    text-decoration: none;
+
 
     display: block;
 
     display: block;
 +
    text-decoration: none;
 
     color: #FFF;
 
     color: #FFF;
     background: #000;  /*putting the background here just affects the link area */
+
     text-align: center;
    border: 1px;
+
     text-transform: uppercase;
    border-color: aquamarine;
+
     z-index: 5;
     border-style: solid;
+
     border-radius: 10px;  /* makes round corners to box formed link */
+
    text-shadow: 1px /*horizontal */ 0px /*vertical*/  0px  /*blur*/;
+
 
}
 
}
  
/*Subitem Level 1*/
+
#navicons ul a:hover {
#navmenu ul ul {
+
    ;
     position: absolute;  /*ordnet Unterpunkte untereinander an */
+
}   
     visibility: hidden;
+
/*End Settings Main Menu Icons*/
     top: 32px; /*make it +2px than ul li a to make the corners of the blocks fit perfectly together because you added a border of 1px at each side */
+
 
 +
 
 +
/* classes for icons */
 +
#home {
 +
     background: url(images/Freiburg_icon_home.png) no-repeat;
 +
     height: 60px;
 +
     background-position: center;
 
}
 
}
  
#navmenu ul li:hover ul { /*makes sublist items appear when hovering the mother item */
+
#project {
     visibility: visible;
+
    background: url(images/Freiburg_icon_project.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
#team {
 +
    background: url(images/Freiburg_icon_team.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
#results {
 +
    background: url(images/Freiburg_icon_results.png) no-repeat;
 +
    height: 60px;
 +
     background-position: center;
 
}
 
}
  
/*Subitem Level 2*/
+
#policy {
#navmenu ul ul ul {
+
    background: url(images/Freiburg_icon_policy.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
 
 +
#notebook {
 +
    background: url(images/Freiburg_icon_notebook.png) no-repeat;
 +
    height: 60px;
 +
    background-position: center;
 +
}
 +
/* End classes for icons */
 +
 
 +
 
 +
/*Begin running chip */
 +
/*Begin Chip Design*/
 +
#runningchip {
 
     position: absolute;
 
     position: absolute;
     display: none;
+
     width: 90px;
     left: 152px;
+
     height: 60px;
     top: 0px;
+
     top: -15px;
 +
    left: 2.1%;
 +
    -webkit-transition: all 300ms ease-out;
 +
    -moz-transition: all 300ms ease-out;
 +
    transition: all 300ms ease-out;
 +
    z-index: 0;
 
}
 
}
  
#navmenu ul ul li:hover ul {
+
#runningchip-back{ 
     display: block;
+
  width:100%;
 +
  height: 85px;
 +
  position: absolute;
 +
  background:#C5162F;
 +
  border-radius:5px;
 +
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
 +
  border-top: 2px solid rgba(255,255,255,0.1);
 +
  border-color: #0051A2;
 +
}   
 +
 
 +
#top-arrow{ /* arrow like element above slider  */
 +
  position:absolute;
 +
  overflow:hidden;
 +
     color: #C5162F;
 +
  width:100%;
 +
  height:14px;
 +
  top: 2px;
 +
  left:0;
 +
  z-index:2;
 +
    background-color: #C5162F;
 +
    border-top-right-radius: 5px;
 +
    border-top-left-radius: 5px;
 +
}
 +
 
 +
#top-arrow:before{
 +
  content:"";
 +
  position:absolute;
 +
  width:80%;
 +
  height:10px;
 +
  top:-12px;
 +
  left:10%;
 +
  border-radius:20%;
 +
  box-shadow:0 0 10px black;
 
}
 
}
  
#navmenu li:hover a:hover { /*wenn man nur a macht, dann ist der ganze Block farbig. Macht man a:hover ist es nur das einzelne Fels */
+
#top-arrow:after{   /* little blue arrow */
    background-color: deepskyblue;
+
  content:"";
 +
  position:absolute;
 +
  width:0;
 +
  height:0px;
 +
  top:0px;
 +
  border-top:8px solid #C5162F;
 +
  border-left:6px solid transparent;
 +
  border-right:6px solid transparent;
 +
  margin-left:-6px;
 +
  left:50%;
 
}
 
}
  
#navmenu a:hover { /* makes text change colour when hovering over it */
+
#bottom-arrow{       /* arrow like element beneath slider */
     color: chartreuse;
+
  position:absolute;
 +
  overflow:hidden;
 +
  width:100%;
 +
  height:15px;
 +
  bottom: -30px;
 +
  left:0;
 +
  z-index:2;
 +
     background-color: #C5162F;
 +
    border-bottom-right-radius: 5px;
 +
    border-bottom-left-radius: 5px;
 
}
 
}
  
#navmenu ul li:hover ul li a:hover { /* attributes a colour to subitem when hovering it while the mother item stays in the colour of li:hover */
+
#bottom-arrow:before{
    background-color: fuchsia;
+
  content:"";
    color: #000;
+
  position:absolute;
 +
  width:80%;
 +
  height:10px;
 +
  bottom:-12px;
 +
  left:10%;
 +
  border-radius:20%;
 +
  box-shadow:0 0 10px black;
 
}
 
}
  
#navmenu ul li:hover > a /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
#bottom-arrow:after{
    background-color: burlywood;
+
   content:"";
 +
  position:absolute;
 +
  width:0;
 +
  height:0;
 +
  bottom:0;
 +
  border-bottom:12px solid #C5162F;
 +
  border-left:8px solid transparent;
 +
  border-right:8px solid transparent;
 +
  margin-left:-8px;
 +
  left:50%;
 
}
 
}
 +
/*End Chip Design*/
  
  
/*#navmenu ul li:after {
+
/*Begin Chip Movement*/
 +
#home:hover ~ #runningchip {
 +
    left: 2.1%;
 
}
 
}
#navmenu ul ul li {
+
 
     display: block; /* damit sind submenupunkte untereinander */
+
#project:hover ~ #runningchip {
 +
     left: 18.6%;
 
}
 
}
  
/*End of horizontal menubar */
+
#team:hover ~ #runningchip {
 +
    left: 35.5%;
 +
}
  
/* classes for icons */
+
#results:hover ~ #runningchip {
.home {
+
     left: 52%;
     background: url(images/icon_home_new2.png);
+
 
}
 
}
</style>
+
 
<!-- End CSS STylesheet -->
+
#policy:hover ~ #runningchip {
 +
    left: 68.9%;
 +
}
 +
 
 +
#notebook:hover ~ #runningchip {
 +
    left: 85.5%;
 +
}
 +
/*End Chip Movment*/
 +
/*End running chip*/
 +
 
 +
 
 +
/*Begin Settings Submenu Level 1*/
 +
#navtextwrapper {                /*define background box*/
 +
    margin: 0 auto;
 +
    padding: 0px;
 +
    top: -35px;
 +
    height: 24px;
 +
    width: 920px;
 +
    position: relative;
 +
}
 +
 
 +
#navtext {
 +
    text-align: center;
 +
    font-family: Candara,sans-serif;
 +
    font-size: 16px;
 +
}
 +
 
 +
#navtext ul {
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    position: relative;
 +
}
 +
 
 +
#navtext li {
 +
    margin: -2px auto;        /*centers text*/
 +
    list-style: none;
 +
    display: inline-block;        /*makes items go horizontal and centers them*/
 +
    /*float: left;*/                /*makes items go horizontal*/
 +
    position: relative;
 +
}   
 +
 
 +
#navtext ul li a {
 +
    height: 24px;
 +
    padding-right: 15%;
 +
    padding-left: 15%;
 +
    line-height: 50px;
 +
    text-decoration: none;
 +
    color: #FFF;
 +
    display: block;
 +
    text-align: center;
 +
 
 +
}
 +
 
 +
#navtext ul li:hover > a {
 +
  /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
 +
    color: #ecdc18;
 +
}
 +
 
 +
#project-sub {
 +
    display: none;
 +
}
 +
 
 +
#team-sub {
 +
    /*background-color: #ac34fe;*/
 +
    display: none;
 +
}
 +
 
 +
#results-sub{
 +
    display: none;
 +
}
 +
 
 +
#policy-sub{
 +
    display: none;
 +
}
 +
 
 +
#notebook-sub{
 +
    display: none;
 +
}
 +
/*End Settings Submenu Level 1*/
 +
 
 +
 
 +
/* Begin Settings Submenu Level 2 */
 +
.navsub2 {
 +
    visibility: hidden;
 +
}
 +
/* End Settings Submenu Level 2 */
 +
 
 +
    </style>
 +
 
 +
<!------------- END: Stylesheet for navigation menu ------------->
 +
 
 +
<!------------- BEGIN: jQuery ------------->
 +
 
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 +
        <script type="text/javascript">
 +
            $(function() {
 +
                $("document").ready(function(){                        <!-- make submenus appear -->
 +
                    $("#home").hover(function(){
 +
                        $("#team-sub") .hide();
 +
                        $("#project-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    });
 +
                    $("#project").hover(function(){
 +
                        $("#project-sub") .show();
 +
                        $("#team-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                    function(){
 +
                        $("#project-sub") .delay('3000').fadeOut();
 +
                    });
 +
                   
 +
                    $("#team").hover(function(){
 +
                        $("#team-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                    function(){
 +
                        $("#team-sub") .delay('3000').fadeOut();
 +
                    });
 +
                   
 +
                    $("#results").hover(function(){
 +
                        $("#results-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#team-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                    function(){
 +
                        $("#results-sub") .delay('3000').fadeOut();
 +
                    });
 +
                   
 +
                    $("#policy").hover(function(){
 +
                        $("#policy-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#team-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#notebook-sub") .hide();
 +
                    },
 +
                                    function(){
 +
                        $("#policy-sub") .delay('3000').fadeOut();
 +
                    });
 +
                   
 +
                    $("#notebook").hover(function(){
 +
                        $("#notebook-sub") .show();
 +
                        $("#project-sub") .hide();
 +
                        $("#team-sub") .hide();
 +
                        $("#results-sub") .hide();
 +
                        $("#policy-sub") .hide();
 +
                    },
 +
                                    function(){
 +
                        $("#notebook-sub") .delay('2500').fadeOut();
 +
                    });
 +
 
 +
<!-- make chip stay over main menu point when its submenu appears -->
 +
                    $("#project-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','18.6%');
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                    });
 +
                    $("#team-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','35.5%');
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                    });
 +
                    $("#results-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','52%');
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                    });
 +
                    $("#policy-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','68.9%');
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                    });
 +
                    $("#notebook-sub") .hover(function(){
 +
                        $("#runningchip") .css('left','85.5%');
 +
                    },
 +
                                            function(){
 +
                        $("#runningchip") .css('left','');
 +
                    });
 +
                });
 +
            })
 +
        </script>
 +
 
 +
<!------------- END: jQuery ------------->
  
 
     </head>
 
     </head>
  
  
    <body>
+
<!------------- BEGIN: Body content =------------->
         <div id="globalwrapper">
+
 
        <div id="navmenu">
+
<body>
      <ul>
+
       
<li class="home"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a></li>
+
         <div id="header">
        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
+
<!-- Begin navigation menu icons -->
            <ul>
+
            <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
                <li><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Overview</a></li>
+
                <div id="naviconbar">
                <li><a href="https://2015.igem.org/Team:Freiburg/Project/Background">Background</a></li>
+
                <div id="navicons"> <!-- only icons -->
                <li><a href="https://2015.igem.org/Team:Freiburg/Diagnostics">Diagnostics today</a></li>
+
                    <ul>
                <li><a href="#">Methodology</a>
+
                        <li id="home"><a href="#">Home</a>
                    <ul>
+
                        </li>
                        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Methods/Cloning">Cloning</a></li>
+
                        <li id="project"><a href="#">Project</a>
                        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Methods/ProtPur">Protein Purification</a></li>
+
                        </li>
                        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Methods/Cellfree">Cell-free Expression</a></li>
+
                        <li id="team"><a href="#">Team</a>
                        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Methods/SurChem">Surface Chemistry</a></li>
+
                        </li>
                        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Methods/irif">iRIf</a></li>
+
                        <li id="results"><a href="#">Results</a>
                        <li><a href="https://2015.igem.org/Team:Freiburg/Project/Diseases">Diseases</a></li>
+
                        </li>
                    </ul>
+
                        <li id="policy" style="font-size:11px"><a href="#">Human Practice</a>
                </li>
+
                        </li>
            </ul>
+
                        <li id="notebook"><a href="#">Notebook</a>
        </li>
+
                        </li>
        <li><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
+
                    <div id="runningchip">
            <ul>
+
                                <div id="top-arrow"></div>
                <li><a href="Team">Members</a></li>
+
                                <div id="runningchip-back"></div>
                <li><a href="#">Acknowledgements</a></li>
+
                                <div id="bottom-arrow"></div>
                <li><a href="#">Partners</a></li>
+
                    </div>
                <li><a href="#">Collaborations</a></li>
+
                    </ul>
            </ul>
+
                </div>
        </li>
+
                </div>
<li><a href="#">Results</a>
+
            </div>
<ul>
+
<!-- End navigation menu icons -->
<li><a href="#">The DiaCHIP</a>
+
 
                                    <ul>
+
           
                                        <li><a href="#">DNA on PDMS</a></li>
+
<!-- Begin navigation submenu -->
                                        <li><a href="#">Cell-free expression</a></li>
+
            <div id="navtextwrapper"> <!-- only names of elements -->
                                        <li><a href="#">Binding on Surface</a></li>
+
                <div id="navtext">
                                        <li><a href="#">Diagnostics</a></li>
+
                    <ul id="project-sub">
                                    </ul>
+
                        <li><a class="navsub1" href="#">Overview</a></li>
 +
                        <li><a class="navsub1" href="#">Background</a></li>
 +
                        <li><a class="navsub1" href="#">Diagnostics today</a></li>
 +
                        <li><a class="navsub1" href="#">Methods</a></li>
 +
                    </ul>
 +
                    <ul id="team-sub">
 +
                        <li><a class="navsub1" href="#">Members</a></li>
 +
                        <li><a class="navsub1" href="#">Acknowledgements</a></li>
 +
                        <li><a class="navsub1" href="#">Partners</a></li>
 +
                        <li><a class="navsub1" href="#">Collaborations</a></li>
 +
                    </ul>
 +
                    <ul id="results-sub">
 +
                        <li><a class="navsub1" href="#">The DiaCHIP</a></li>
 +
                        <li><a class="navsub1" href="#">Modeling</a></li>
 +
                        <li><a class="navsub1" href="#">Own Device</a></li>
 +
                        <li><a class="navsub1" href="#">Biobricks</a></li>
 +
                        <li><a class="navsub1" href="#">Interlab Study</a></li>
 +
                    </ul>  
 +
                    <ul id="policy-sub">
 +
                        <li><a class="navsub1" href="#">Science Fair</a></li>
 +
                        <li><a class="navsub1" href="#">Theatre Project</a></li>
 +
                        <li><a class="navsub1" href="#">Survey</a></li>
 +
                        <li><a class="navsub1" href="#">Liberal </a></li>
 +
                    </ul>
 +
                    <ul id="notebook-sub">
 +
                        <li><a class="navsub1" href="#">Protocols</a></li>
 +
                        <li><a class="navsub1" href="#">Labjournal</a>
 +
                          <!-- <ul>
 +
                                <li><a class="navsub2" href="#">Cloning</a></li>
 +
                                <li><a class="navsub2" href="#">Protein Purification</a></li>
 +
                                <li><a class="navsub2" href="#">Cell-free Expression</a></li>
 +
                                <li><a class="navsub2" href="#">Surface Chemistry</a></li>
 +
                                <li><a class="navsub2" href="#">iRIf</a></li>
 +
                            </ul> -->
 
                                 </li>
 
                                 </li>
<li><a href="#">Modeling</a></li>
+
                        <li><a class="navsub1" href="#">Safety</a></li>
                                <li><a href="#">Own Device</a></li>
+
                            </ul>  
<li><a href="#">Biobricks</a></li>
+
                        </li>
<li><a href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
+
                    </ul>
</ul>
+
                 </div>
</li>  
+
             </div>  
        <li><a href="#">Human Practice</a>
+
<!-- End of navigation submenu -->
            <ul>
+
                 <li><a href="https://2015.igem.org/Team:Freiburg/PaP/ScienceFair">Science Fair</a></li>
+
                <li><a href="https://2015.igem.org/Team:Freiburg/PaP/TheatreProject">Theatre Project</a></li>
+
                <li><a href="https://2015.igem.org/Team:Freiburg/PaP/Survey">Survey</a></li>
+
                <li><a href="https://2015.igem.org/Team:Freiburg/PaP/LAS">Liberal Arts &amp; Sciences</a></li>
+
                <li><a href="#">Ethics</a></li>
+
             </ul>
+
        </li>
+
    <li><a href="#">Notebook</a>
+
    <ul>
+
<li><a href="#">Protocols</a></li>
+
<li><a href="#">Labjournal</a>
+
<ul>
+
<li><a href="https://2015.igem.org/Team:Freiburg/Labjournals/Cloning">Cloning</a></li>
+
                                                <li><a href="https://2015.igem.org/Team:Freiburg/Labjournals/ProtPur">Protein Purification</a></li>
+
                                                <li><a href="https://2015.igem.org/Team:Freiburg/Labjournals/Cellfree">Cell-free Expression</a></li>
+
                                                <li><a href="https://2015.igem.org/Team:Freiburg/Labjournals/SurChem">Surface Chemistry</a></li>
+
<li><a href="https://2015.igem.org/Team:Freiburg/Labjournals/irif">iRIf</a></li>
+
</ul>
+
</li>
+
                                <li><a href="#">Materials</a></li>
+
        <li><a href="#">Safety</a></li>
+
</ul>
+
        </li>
+
            </ul>
+
        <br class="clearfloat">
+
 
         </div>
 
         </div>
        </div>
+
<!-- End of header -->
   
+
       
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 05:31, 3 September 2015

""