Difference between revisions of "Template:Freiburg/Menubar"

(links added)
(New navigation with dropdown submenu)
Line 5: Line 5:
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
  
−
 
−
<!-- Begin CSS Stylesheet -->
 
 
         <style>
 
         <style>
−
 
−
 
 
/* ============= BEGIN: Stylesheet for navigation menu ============= */
 
/* ============= BEGIN: Stylesheet for navigation menu ============= */
  
Line 16: Line 12:
 
/* Begin General Settings */
 
/* Begin General Settings */
 
body {
 
body {
−
     font-family: Candara, Calibri, sans-serif;
+
     margin: 0px;
 
}
 
}
  
 
#header {
 
#header {
 
     height: 113px;
 
     height: 113px;
−
     background-color: #F9F9F9;
+
     /*background-color: aquamarine;*/
 
}
 
}
 
/* End General Settings */
 
/* End General Settings */
Line 28: Line 24:
 
#naviconwrapper {
 
#naviconwrapper {
 
     margin: 0px ;    /*auto centers wrapper*/
 
     margin: 0px ;    /*auto centers wrapper*/
−
     height: 96px;
+
     height: 60px;
 
     width: 100%;
 
     width: 100%;
 
     min-width: 900px;
 
     min-width: 900px;
 
     padding-top: 16px;
 
     padding-top: 16px;
 
     z-index: -100;
 
     z-index: -100;
−
     background-color: #0051A2;
+
     border: 2px solid #008631;
 
}
 
}
  
Line 58: Line 54:
 
     width: 720px;
 
     width: 720px;
 
     height: 60px;
 
     height: 60px;
−
     z-index: -10;
+
     background-color: #0051A2;
−
     background-color: #FFF;     /*defines color behind icons */  
+
     z-index: -20;   /*defines color behind icons */  
 
}
 
}
  
Line 79: Line 75:
 
     font-family: sans-serif;
 
     font-family: sans-serif;
 
     font-size: 12px;
 
     font-size: 12px;
 +
    background-color: #FFF;
 
     /*border: 1px solid #5781BD;*/
 
     /*border: 1px solid #5781BD;*/
−
     z-index: 4;
+
     z-index: 100;
 
}
 
}
  
Line 91: Line 88:
 
     text-align: center;
 
     text-align: center;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
−
     z-index: 5;
+
     z-index: 50;
 
}
 
}
  
Line 103: Line 100:
 
#home {
 
#home {
 
     background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;  
 
     background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;  
−
     height: 60px;
+
     height: 60px;;
 
     background-position: center;
 
     background-position: center;
 
}
 
}
Line 271: Line 268:
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     padding: 0px;
 
     padding: 0px;
−
     top: -35px;
+
     top: -2px;
 
     height: 24px;
 
     height: 24px;
 
     width: 920px;
 
     width: 920px;
 
     position: relative;
 
     position: relative;
 +
    /*border: 2px solid #000;*/
 
}
 
}
  
 
#navtext {
 
#navtext {
 
     text-align: center;
 
     text-align: center;
−
     font-family: Candara,sans-serif;
+
     font-family: Roboto,sans-serif;
 
     font-size: 16px;
 
     font-size: 16px;
 
}
 
}
Line 286: Line 284:
 
     margin: 0px auto;
 
     margin: 0px auto;
 
     padding: 0px;
 
     padding: 0px;
−
     position: relative;
+
     position: absolute;
 
}
 
}
  
 
#navtext li {
 
#navtext li {
−
     margin: -2px auto;        /*centers text*/
+
     margin: 0px auto;        /*centers text*/
 +
    width: 120px;
 
     list-style: none;
 
     list-style: none;
−
     display: inline-block;        /*makes items go horizontal and centers them*/
+
     display: block;        /*makes items go horizontal and centers them*/
 
     /*float: left;*/                /*makes items go horizontal*/
 
     /*float: left;*/                /*makes items go horizontal*/
 
     position: relative;
 
     position: relative;
Line 298: Line 297:
  
 
#navtext ul li a {
 
#navtext ul li a {
 +
    margin-top: 2px;
 
     height: 24px;
 
     height: 24px;
−
     padding-right: 15%;
+
     width: 120px;
−
    padding-left: 15%;
+
−
    line-height: 50px;
+
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: #FFF;
 
     color: #FFF;
 
     display: block;
 
     display: block;
 
     text-align: center;
 
     text-align: center;
−
 
+
    border-radius: 8px;
 
}
 
}
  
Line 316: Line 314:
 
#project-sub {
 
#project-sub {
 
     display: none;
 
     display: none;
 +
    left: 220px;
 
}
 
}
  
Line 321: Line 320:
 
     /*background-color: #ac34fe;*/
 
     /*background-color: #ac34fe;*/
 
     display: none;
 
     display: none;
 +
    left: 340px;
 
}
 
}
  
 
#results-sub{
 
#results-sub{
 
     display: none;
 
     display: none;
 +
    left: 460px;
 
}
 
}
  
 
#policy-sub{
 
#policy-sub{
 
     display: none;
 
     display: none;
 +
    left: 582px;
 
}
 
}
  
 
#notebook-sub{
 
#notebook-sub{
 
     display: none;
 
     display: none;
 +
    left: 704px;
 
}
 
}
−
/*End Settings Submenu Level 1*/
 
  
 +
.chip_gap {
 +
    content: none;
 +
}
  
−
/* Begin Settings Submenu Level 2 */
+
.navsub1 {
−
.navsub2 {
+
     background-color: #0051A2;
−
     visibility: hidden;
+
 
}
 
}
−
/* End Settings Submenu Level 2 */
+
   
 +
/*End Settings Submenu Level 1*/
  
 +
/* ============= BEGIN: Stylesheet for navigation menu ============= */ 
 
     </style>
 
     </style>
  
−
<!------------- END: Stylesheet for navigation menu ------------->
 
  
 
<!------------- BEGIN: jQuery ------------->
 
<!------------- 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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
 
         <script type="text/javascript">
 
         <script type="text/javascript">
 
             $(function() {
 
             $(function() {
−
                 $("document").ready(function(){                       <!-- make submenus appear -->
+
                 $("document").ready(function(){
 +
// make submenus appear //
 
                     $("#home").hover(function(){
 
                     $("#home").hover(function(){
 
                         $("#team-sub") .hide();
 
                         $("#team-sub") .hide();
Line 366: Line 371:
 
                         $("#policy-sub") .hide();
 
                         $("#policy-sub") .hide();
 
                         $("#notebook-sub") .hide();
 
                         $("#notebook-sub") .hide();
−
                    },
 
−
                                    function(){
 
−
                        $("#project-sub") .delay('8000').fadeOut();
 
 
                     });
 
                     });
 
                      
 
                      
Line 377: Line 379:
 
                         $("#policy-sub") .hide();
 
                         $("#policy-sub") .hide();
 
                         $("#notebook-sub") .hide();
 
                         $("#notebook-sub") .hide();
−
                    },
 
−
                                    function(){
 
−
                        $("#team-sub") .delay('8000').fadeOut();
 
 
                     });
 
                     });
 
                      
 
                      
Line 388: Line 387:
 
                         $("#policy-sub") .hide();
 
                         $("#policy-sub") .hide();
 
                         $("#notebook-sub") .hide();
 
                         $("#notebook-sub") .hide();
−
                    },
 
−
                                    function(){
 
−
                        $("#results-sub") .delay('8000').fadeOut();
 
 
                     });
 
                     });
 
                      
 
                      
Line 399: Line 395:
 
                         $("#results-sub") .hide();
 
                         $("#results-sub") .hide();
 
                         $("#notebook-sub") .hide();
 
                         $("#notebook-sub") .hide();
−
                    },
 
−
                                    function(){
 
−
                        $("#policy-sub") .delay('8000').fadeOut();
 
 
                     });
 
                     });
 
                      
 
                      
Line 410: Line 403:
 
                         $("#results-sub") .hide();
 
                         $("#results-sub") .hide();
 
                         $("#policy-sub") .hide();
 
                         $("#policy-sub") .hide();
−
                    },
 
−
                                    function(){
 
−
                        $("#notebook-sub") .delay('8000').fadeOut();
 
 
                     });
 
                     });
−
 
+
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
−
<!-- make chip stay over main menu point when its submenu appears -->
+
 
                     $("#project-sub") .hover(function(){
 
                     $("#project-sub") .hover(function(){
 
                         $("#runningchip") .css('left','18.6%');
 
                         $("#runningchip") .css('left','18.6%');
 +
                        $("#project-sub") .show();
 
                     },
 
                     },
 
                                             function(){
 
                                             function(){
 
                         $("#runningchip") .css('left','');
 
                         $("#runningchip") .css('left','');
 +
                        $("#project-sub") .hide();
 
                     });
 
                     });
 
                     $("#team-sub") .hover(function(){
 
                     $("#team-sub") .hover(function(){
 
                         $("#runningchip") .css('left','35.5%');
 
                         $("#runningchip") .css('left','35.5%');
 +
                        $("#team-sub") .show();
 
                     },
 
                     },
 
                                             function(){
 
                                             function(){
 
                         $("#runningchip") .css('left','');
 
                         $("#runningchip") .css('left','');
 +
                        $("#team-sub") .hide();
 
                     });
 
                     });
 
                     $("#results-sub") .hover(function(){
 
                     $("#results-sub") .hover(function(){
 
                         $("#runningchip") .css('left','52%');
 
                         $("#runningchip") .css('left','52%');
 +
                        $("#results-sub") .show();
 
                     },
 
                     },
 
                                             function(){
 
                                             function(){
 
                         $("#runningchip") .css('left','');
 
                         $("#runningchip") .css('left','');
 +
                        $("#results-sub") .hide();
 
                     });
 
                     });
 
                     $("#policy-sub") .hover(function(){
 
                     $("#policy-sub") .hover(function(){
 
                         $("#runningchip") .css('left','68.9%');
 
                         $("#runningchip") .css('left','68.9%');
 +
                        $("#policy-sub") .show();
 
                     },
 
                     },
 
                                             function(){
 
                                             function(){
 
                         $("#runningchip") .css('left','');
 
                         $("#runningchip") .css('left','');
 +
                        $("#policy-sub") .hide();
 
                     });
 
                     });
 
                     $("#notebook-sub") .hover(function(){
 
                     $("#notebook-sub") .hover(function(){
 
                         $("#runningchip") .css('left','85.5%');
 
                         $("#runningchip") .css('left','85.5%');
 +
                        $("#notebook-sub") .show();
 
                     },
 
                     },
 
                                             function(){
 
                                             function(){
 
                         $("#runningchip") .css('left','');
 
                         $("#runningchip") .css('left','');
 +
                        $("#notebook-sub") .hide();
 
                     });
 
                     });
 
                 });
 
                 });
Line 456: Line 455:
  
 
<!------------- BEGIN: Body content =------------->
 
<!------------- BEGIN: Body content =------------->
−
 
+
    <body>
−
<body>
+
      <div id="header">
−
       
+
−
        <div id="header">
+
 
<!-- Begin navigation menu icons -->
 
<!-- Begin navigation menu icons -->
 
             <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
 
             <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
Line 465: Line 462:
 
                 <div id="navicons"> <!-- only icons -->
 
                 <div id="navicons"> <!-- only icons -->
 
                     <ul>
 
                     <ul>
−
                         <li id="home"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
+
                         <li id="home" ><a href="#">Home</a>
 
                         </li>
 
                         </li>
−
                         <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
+
                         <li id="project"><a href="#">Project</a>
 
                         </li>
 
                         </li>
−
                         <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
+
                         <li id="team"><a href="#">Team</a>
 
                         </li>
 
                         </li>
−
                         <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
+
                         <li id="results"><a href="#">Results</a>
 
                         </li>
 
                         </li>
−
                         <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/PaP">Human Practice</a>
+
                         <li id="policy" style="font-size:11px"><a href="#">Human Practice</a>
 
                         </li>
 
                         </li>
−
                         <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
+
                         <li id="notebook"><a href="#">Notebook</a>
 
                         </li>
 
                         </li>
 
                     <div id="runningchip">
 
                     <div id="runningchip">
Line 493: Line 490:
 
                 <div id="navtext">
 
                 <div id="navtext">
 
                     <ul id="project-sub">
 
                     <ul id="project-sub">
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Overview</a></li>
+
                        <li class="chip_gap"><a></a></li>
 +
                         <li><a class="navsub1" href="#">Overview</a></li>
 
                         <li><a class="navsub1" href="#">Background</a></li>
 
                         <li><a class="navsub1" href="#">Background</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Diagnostics">Diagnostics today</a></li>
+
                         <li><a class="navsub1" href="#">Diagnostics today</a></li>
 
                         <li><a class="navsub1" href="#">Methods</a></li>
 
                         <li><a class="navsub1" href="#">Methods</a></li>
 
                     </ul>
 
                     </ul>
 
                     <ul id="team-sub">
 
                     <ul id="team-sub">
 +
                        <li class="chip_gap"><a></a></li>
 
                         <li><a class="navsub1" href="#">Members</a></li>
 
                         <li><a class="navsub1" href="#">Members</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
+
                         <li><a class="navsub1" href="#">Acknowledgements</a></li>
 
                         <li><a class="navsub1" href="#">Partners</a></li>
 
                         <li><a class="navsub1" href="#">Partners</a></li>
 
                         <li><a class="navsub1" href="#">Collaborations</a></li>
 
                         <li><a class="navsub1" href="#">Collaborations</a></li>
 
                     </ul>
 
                     </ul>
 
                     <ul id="results-sub">
 
                     <ul id="results-sub">
 +
                        <li class="chip_gap"><a></a></li>
 
                         <li><a class="navsub1" href="#">The DiaCHIP</a></li>
 
                         <li><a class="navsub1" href="#">The DiaCHIP</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Modeling">Modeling</a></li>
+
                         <li><a class="navsub1" href="#">Modeling</a></li>
 
                         <li><a class="navsub1" href="#">Own Device</a></li>
 
                         <li><a class="navsub1" href="#">Own Device</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">Biobricks</a></li>
+
                         <li><a class="navsub1" href="#">Biobricks</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
+
                         <li><a class="navsub1" href="#">Interlab Study</a></li>
 
                     </ul>  
 
                     </ul>  
 
                     <ul id="policy-sub">
 
                     <ul id="policy-sub">
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/ScienceFair">Science Fair</a></li>
+
                        <li class="chip_gap"><a></a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/TheatreProject">Theatre Project</a></li>
+
                         <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="#">Survey</a></li>
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/PaP/LAS">Liberal </a></li>
+
                         <li><a class="navsub1" href="#">Liberal </a></li>
 
                     </ul>
 
                     </ul>
 
                     <ul id="notebook-sub">
 
                     <ul id="notebook-sub">
−
                         <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
+
                         <li class="chip_gap"><a></a></li>
−
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournal</a>
+
                        <li><a class="navsub1" href="#">Protocols</a></li>
−
                          <!-- <ul>
+
                        <li><a class="navsub1" href="#">Labjournal</a>
−
                                <li><a class="navsub2" href="#">Cloning</a></li>
+
                        </li>
−
                                <li><a class="navsub2" href="#">Protein Purification</a></li>
+
                         <li><a class="navsub1" href="#">Safety</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><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
+
 
                             </ul>  
 
                             </ul>  
 
                         </li>
 
                         </li>
Line 536: Line 531:
 
<!-- End of navigation submenu -->
 
<!-- End of navigation submenu -->
 
         </div>
 
         </div>
−
<!-- End of header -->
+
<!-- End of header -->    
−
       
+
 
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 16:26, 3 September 2015

""