Difference between revisions of "Template:Freiburg/Menubar"

 
(138 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<style>
 
<style>
−
 
−
    /********************************* DEFAULT WIKI SETTINGS  ********************************/
 
−
 
−
    #sideMenu, #top_title {display:none;}
 
−
    #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 
−
    body {background-color:white; }
 
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
−
 
 
     /********************************* MENU ********************************/
 
     /********************************* MENU ********************************/
 
     /* Wrapper for the menu */
 
     /* Wrapper for the menu */
−
 
 
     /* Remove margins and padding from the list, and add a black background color */
 
     /* Remove margins and padding from the list, and add a black background color */
−
     body {
+
      
−
        /*background:white;*/
+
/*
−
    /*url('body-bg.jpg');*/
+
−
    }
+
−
 
+
 
     .clearfix:after {
 
     .clearfix:after {
−
         display:block;
+
         display: block;
−
         clear:both;
+
         clear: both;
 
     }
 
     }
−
 
+
*/
 
     /*----- Menu Outline -----*/
 
     /*----- Menu Outline -----*/
 +
   
 
     .menu-wrap {
 
     .menu-wrap {
−
         /*width:100%;*/
+
         display: flex;
−
         box-shadow:0px 1px 3px rgba(255, 197, 0, 0.2);
+
         justify-content: center;
−
         color: #3e0a11;
+
         background-color: #893939;   /*this is the color behind menu buttons */
 
     }
 
     }
−
 
+
   
 
     .menu {
 
     .menu {
−
         /*width:1000px;*/
+
         /*width:1500px;*/
 +
        /*margin-left:20%;*/
 +
        margin:0px auto;
  
−
        margin:0px auto;
 
 
     }
 
     }
−
 
+
   
 
     .menu li {
 
     .menu li {
 +
        /*        margin: 20x;*/
 
         margin:0px;
 
         margin:0px;
−
         list-style:none;
+
         list-style: none;
−
         /*font-family:'Ek Mukta';*/
+
         padding: 20px 4px;
 
     }
 
     }
−
 
+
   
 
     .menu a {
 
     .menu a {
−
         transition:all linear 0.15s;
+
        font-size: 22px;
−
         color:#919191;
+
        font-family: 'Days One', sans-serif;
−
         background-color: black;
+
        font-weight: bold;
 +
        letter-spacing: 3px;
 +
         transition: all linear 0.15s;
 +
      /*  color: #aba5aa; this is the color of menu text */
 +
         color: #be740d;
 +
         background-color: #893939;    /*this is the color of menu buttons */
 +
        text-decoration: none;
 +
/*      border-radius: 15px 15px 15px 15px;*/
 
     }
 
     }
 +
   
 +
    .menu li:hover > a,
 +
    .menu .current-item > a {
 +
        text-decoration: none;
 +
/*        color: #be740d;*/
 +
                color: orangered;
  
−
    .menu li:hover > a, .menu .current-item > a {
 
−
        text-decoration:none;
 
−
        color: #be740d;
 
 
     }
 
     }
−
 
+
      
−
     .menu .arrow {
+
−
        font-size:11px;
+
−
        line-height:0%;
+
−
    }
+
−
 
+
 
     /*----- Top Level -----*/
 
     /*----- Top Level -----*/
 +
   
 
     .menu > ul > li {
 
     .menu > ul > li {
−
         float:left;
+
         float: left;
−
         display:inline-block;
+
         display: inline-block;
−
         position:relative;
+
         position: relative;
−
         font-size:16px;
+
         font-size: 12px;
−
        color: black;
+
 
     }
 
     }
−
 
+
   
 
     .menu > ul > li > a {
 
     .menu > ul > li > a {
−
         padding:10px 40px;
+
         padding: 12px 22px;
−
         display:inline-block;
+
         display: inline-block;
−
        text-shadow:0px 1px 0px rgba(0,0,0,0.4);
+
 
     }
 
     }
−
 
+
   
−
     .menu > ul > li:hover > a, .menu > ul > .current-item > a {
+
     .menu > ul > li:hover > a,
−
         background:#2e2728;
+
    .menu > ul > .current-item > a {
 +
         margin-bottom: -5px;
 
     }
 
     }
−
 
+
     /*----- SubMenu Level -----*/
−
     /*----- Bottom Level -----*/
+
   
 
     .menu li:hover .sub-menu {
 
     .menu li:hover .sub-menu {
−
         z-index:1;
+
         z-index: 1;
−
         opacity:1;
+
         opacity: 1;
 
     }
 
     }
−
 
+
   
 
     .sub-menu {
 
     .sub-menu {
−
        width:120%;
+
/*        font-size: 10px;*/
−
        padding:5px 0px;
+
         position: absolute;
−
         position:absolute;
+
         top: 60px;
−
         top:100%;
+
         left: -20px;
−
         left:0px;
+
         z-index: -1;
−
         z-index:-1;
+
         opacity: 0;
−
         opacity:0;
+
         transition: opacity linear 0.15s;
−
         transition:opacity linear 0.15s;
+
         padding: 0px;
−
         box-shadow:0px 2px 3px rgba(0,0,0,0.2);
+
/*        display: flex;*/
−
        background:#2e2728;
+
/*        justify-content: center;*/
 
     }
 
     }
−
 
+
   
 
     .sub-menu li {
 
     .sub-menu li {
−
         display:block;
+
/*        width: 100%;*/
−
         font-size:14px;
+
/*        font-size: 10px;*/
 +
         display: inline-block;
 +
         text-align: center;
 +
        padding: 2px 2px;
 
     }
 
     }
−
 
+
   
 
     .sub-menu li a {
 
     .sub-menu li a {
−
         padding:10px 30px;
+
        /*font-family: 'Farsan', cursive;*/
−
         display:block;
+
        font-size: 16px;
 +
         padding: 4px;
 +
         display: block;
 +
        background: #893939;                  /* color of submenu */
 +
      /* background: #1b8b91; */
 
     }
 
     }
 +
    li li{
 +
        width: 100%;
 +
    }
 +
   
 +
    .sub-menu li a:hover,
 +
    .sub-menu .current-item a {}
  
−
     .sub-menu li a:hover, .sub-menu .current-item a {
+
     .menuSmall{
−
         background:#3e3436;
+
         display: none;
 
     }
 
     }
  
 +
@media screen and (max-width : 560px){
 +
 
 +
    .menu-wrap {
 +
        display:none;
 +
    }
  
 +
    .menuSmall{
 +
        display: block;
 +
    }
  
−
</style>
+
}
  
 +
   
 +
@font-face {
 +
    font-family: 'Londrina Sketch';
 +
    src: url(https://static.igem.org/mediawiki/2016/a/a5/T--Freiburg--Font_LondrinaSketch.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
  
 +
@font-face {
 +
    font-family: 'Gloria Hallelujah';
 +
    src: url(https://static.igem.org/mediawiki/2016/f/f1/T--Freiburg--Font-Gloria_Hallelujah.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
  
 +
@font-face {
 +
    font-family: 'Baloo Paaji';
 +
    src: url(https://static.igem.org/mediawiki/2016/b/b1/T--Freiburg--Fonts_BalooPaani.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
@font-face {
 +
    font-family: 'Farsan';
 +
    src: url(https://static.igem.org/mediawiki/2016/6/61/T--Freiburg--Font-Farsan.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
  
 +
@font-face {
 +
    font-family: 'Days One';
 +
    src: url(https://static.igem.org/mediawiki/2016/5/52/T--Freiburg--Fonts_DaysOne.ttf)  format('truetype');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
  
 +
 +
</style>
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 
<!-- This tells the browser that your page is responsive -->
 
<!-- This tells the browser that your page is responsive -->
  
−
<head>
+
<div class="menuSmall">
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <h5> <a href=" https://2016.igem.org/Team:Freiburg/sitemap">  Menu  </a> </h5>
−
</head>
+
</div>
  
−
 
+
<div class="menu-wrap">
−
 
+
−
 
+
−
<div class="menu-wrap" >
+
 
     <nav class="menu">
 
     <nav class="menu">
 +
        <ul class="clearfix">
 +
            <!--li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg">Home </a> </li-->
 +
            <li class="menu_item"> <a href=" https://2016.igem.org/Team:Freiburg/Team"> Team </a>
 +
                <ul class="sub-menu">
 +
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Attributions">  Attributions </a> </li>
 +
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Achievements">  Achievements </a> </li>
 +
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Pictures">  Pictures </a> </li>
 +
                        <li> <a href="https://2016.igem.org/Team:Freiburg/GiantJamboree"> Giant Jamboree </a> </li>
  
  
−
    <ul class="clearfix">
 
  
−
        <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg">HOME </a> </li>
+
                </ul>
−
 
+
            </li>
−
 
+
            <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Overview"> Project </a>
−
        <li class="menu_item">
+
                <ul class="sub-menu">
−
            <a href="#"> TEAM <span class="arrow">&#9660;</span></a>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Motivation"> Motivation </a></li>
−
            <ul class="sub-menu">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Goals_Approach"> Approach </a></li>
−
                <li> <a href=" https://2016.igem.org/Team:Freiburg/Team"> Team  </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/B_subtilis"> B. subtilis </a>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Collaborations">*  Collaborations </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Surface_Display"> Microbial surface display
−
            </ul>
+
</a>
−
        </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Targeted Drug Delivery"> Targeted Drug Delivery</a> </ul>
−
 
+
                 </li>
−
        <li class="menu_item">
+
                 <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Lab"> Lab </a>
−
            <a href="#">  PROJECT <span class="arrow">&#9660;</span> </a>
+
                    <ul class="sub-menu">
−
            <ul class="sub-menu">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Methods </a></li>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Description"> *  Description </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Journal </a></li>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Design"> * Design </a></li>
+
                </ul>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Experiments </a></li>
+
                </li>
−
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Proof"> * Proof of Concept </a></li>
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results</a>
−
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Demonstrate"> * Demonstrate </a></li>
+
                    <ul class="sub-menu">
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Proof"> Proof of Concept </a></li>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Notebook </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Binding"> Binding </a></li>
−
            </ul>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Delivery"> Delivery </a></li>
−
        </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Production_Nanocillus"> Nanocillus </a></li>
−
 
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Biobricks"> Biobricks </a></li>
−
        <li class="menu_item">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Shampoo"> Extra </a></li>
−
            <a href="#"> PARTS <span class="arrow">&#9660;</span></a>
+
                    </ul>
−
            <ul class="sub-menu">
+
                </li>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Parts">Parts </a></li>
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Safety"> Safety </a>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Basic_Part"> * Basic Parts </a></li>
+
                    <ul class="sub-menu">
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Composite_Part"> * Composite Parts </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Knockouts"> Knock Outs </a></li>
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Part_Collection"> * Part Collection </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Killswitch"> Kill Switch </a></li>
−
            </ul>
+
                    </ul>
−
        </li>
+
                </li>
−
 
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/PR"> Public relations </a>
−
 
+
                    <ul class="sub-menu">
−
        <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Safety"> SAFETY </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> Human Practice </a></li>
−
 
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Integrated_Practices"> Integrated </a></li>
−
 
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Collaborations"> Collaborations </a></li>
−
        <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Attributions">*  ATTRIBUTIONS </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Poster"> Poster </a></li>
−
 
+
                    </ul>
−
 
+
                </li>
−
        <li class="menu_item">
+
        </ul>
−
            <a href="#"> HUMAN PRACTICES <span class="arrow">&#9660;</span> </a>
+
    </nav>
−
            <ul class="sub-menu">
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> Human Practices </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/HP/Silver">* Silver </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/HP/Gold">* Gold </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Integrated_Practices"> * Integrated Practices </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Engagement">* Engagement </a></li>
+
−
            </ul>
+
−
        </li>
+
−
 
+
−
 
+
−
        <li class="menu_item">
+
−
            <a href="#"> AWARDS <span class="arrow">&#9660;</span> </a>
+
−
            <ul class="sub-menu">
+
−
                <li><a href="https://2016.igem.org/Team:Freiburg/Entrepreneurship"> * Entrepreneurship </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Hardware"> * Hardware </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Software">* Software </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Measurement">*  Measurement </a></li>
+
−
                <li> <a href="https://2016.igem.org/Team:Freiburg/Model">* Model </a></li>
+
−
 
+
−
            </ul>
+
−
        </li>
+
−
    </ul>
+
−
</nav>
+
 
</div>
 
</div>
−
 
−
 
−
 
−
 
−
 
−
<div class="content_wrapper">
 
−
 
−
    <!--<h1 id="team_name">  </h1>-->
 
−
    <!--<h4 id="page_name">  </h4>-->
 
−
 
−
 
−
</div>
 
−
 
−
 
−
 
−
 
−
    <script>
 
−
 
−
        // This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
−
 
−
 
−
 
−
 
−
    </script>
 
−
 
  
 
</html>
 
</html>

Latest revision as of 10:35, 3 November 2016

Menu