Difference between revisions of "Template:Freiburg/Menubar"

Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<style>
 
<style>
−
 
 
     /********************************* 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 */
−
 
+
   
 
     .clearfix:after {
 
     .clearfix:after {
−
         display:block;
+
         display: block;
−
         clear:both;
+
         clear: both;
 
     }
 
     }
−
 
 
     /*----- Menu Outline -----*/
 
     /*----- Menu Outline -----*/
 +
   
 
     .menu-wrap {
 
     .menu-wrap {
−
      /* width:100%;*/
 
−
/*        box-shadow:0px 1px 3px rgba(255, 197, 0, 0.2);*/
 
 
         color: #3e0a11;
 
         color: #3e0a11;
 
     }
 
     }
−
 
+
   
 
     .menu {
 
     .menu {
 
         /*width:1500px;*/
 
         /*width:1500px;*/
−
         padding:10px 16px;
+
         padding: 10px 16px;
 
         /*margin-left:20%;*/
 
         /*margin-left:20%;*/
 
     }
 
     }
−
 
+
   
 
     .menu li {
 
     .menu li {
−
         margin:20x;
+
         margin: 20x;
−
         list-style:none;
+
         list-style: none;
−
         padding:4px 4px;
+
         padding: 4px 4px;
−
 
+
 
     }
 
     }
−
 
+
   
 
     .menu a {
 
     .menu a {
−
         font-size:20px;
+
         font-size: 20px;
 
         font-family: 'Bad Script', cursive;
 
         font-family: 'Bad Script', cursive;
 
         font-weight: bold;
 
         font-weight: bold;
 
         letter-spacing: 3px;
 
         letter-spacing: 3px;
−
         transition:all linear 0.15s;
+
         transition: all linear 0.15s;
−
         color:white;
+
         color: white;
 
         background-color: #bca8ab;
 
         background-color: #bca8ab;
−
         text-decoration:none;
+
         text-decoration: none;
−
/*        -webkit-border-radius: 10px 10px 10px 10px;*/
+
 
         border-radius: 15px 15px 15px 15px;
 
         border-radius: 15px 15px 15px 15px;
 
     }
 
     }
−
 
+
   
−
     .menu li:hover > a, .menu .current-item > a {
+
     .menu li:hover > a,
−
         text-decoration:none;
+
    .menu .current-item > a {
 +
         text-decoration: none;
 
         color: #be740d;
 
         color: #be740d;
 
     }
 
     }
−
 
+
   
 
     .menu .arrow {
 
     .menu .arrow {
−
         font-size:10px;
+
         font-size: 10px;
−
         line-height:0%;
+
         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:12px;
+
         font-size: 12px;
−
/*        color: black;*/
+
−
       
+
 
     }
 
     }
−
 
+
   
 
     .menu > ul > li > a {
 
     .menu > ul > li > a {
−
         padding:12px 22px;
+
         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;
+
         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:600px;
+
         width: 600px;
−
         font-size:20px;
+
         font-size: 20px;
−
         position:absolute;
+
         position: absolute;
−
         top:30px;
+
         top: 30px;
−
         left:-150px;
+
         left: -150px;
−
         z-index:-1;
+
         z-index: -1;
−
         opacity:0;
+
         opacity: 0;
−
         transition:opacity linear 0.15s;
+
         transition: opacity linear 0.15s;
−
/*        box-shadow:0px 2px 3px rgba(0,0,0,0.2);*/
+
−
/*        background:#2e2728;*/
+
 
     }
 
     }
−
 
+
   
 
     .sub-menu li {
 
     .sub-menu li {
−
         display:inline-block;
+
         display: inline-block;
−
         padding:20px 2px;
+
         padding: 20px 2px;
−
 
+
 
     }
 
     }
−
 
+
   
 
     .sub-menu li a {
 
     .sub-menu li a {
−
         padding:6px 15px;
+
         padding: 6px 15px;
−
         display:inline-block;
+
         display: inline-block;
 
         background: #a08488;
 
         background: #a08488;
−
 
−
        /*padding:12px 22px;*/
 
 
     }
 
     }
−
 
+
   
−
     .sub-menu li a:hover, .sub-menu .current-item a {
+
     .sub-menu li a:hover,
−
/*       background:#3e3436;*/
+
    .sub-menu .current-item a {}
 +
    /*----- sub-subMenu Level -----*/
 +
   
 +
    .sub-menu li:hover .sub-sub-menu {
 +
        z-index: 1;
 +
        opacity: 1;
 +
    }
 +
   
 +
    .sub-sub-menu {
 +
        width: 600px;
 +
        font-size: 20px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: -150px;
 +
        z-index: -1;
 +
        opacity: 0;
 +
        transition: opacity linear 0.15s;
 
     }
 
     }
−
 
+
   
−
 
+
    .sub-sub-menu li {
−
 
+
        display: inline-block;
 +
        padding: 20px 2px;
 +
    }
 +
   
 +
    .sub-sub-menu li a {
 +
        padding: 6px 15px;
 +
        display: inline-block;
 +
        background: #a08488;
 +
    }
 +
   
 +
    .sub-sub-menu li a:hover,
 +
    .sub-sub-menu .current-item a {}
 
</style>
 
</style>
−
 
−
 
−
 
−
 
 
<!--- THIS IS WHERE THE HTML BEGINS --->
 
<!--- 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>
 
<head>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
−
  <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">
+
    <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet"> </head>
−
</head>
+
−
 
+
−
 
+
 
<p style="text-align: center">
 
<p style="text-align: center">
−
 
+
    <div class="menu-wrap">
−
 
+
        <nav class="menu">
−
<div class="menu-wrap" >
+
            <ul class="clearfix">
−
    <nav class="menu">
+
                <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">
−
        <ul class="clearfix">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Team">  Team </a> </li>
−
 
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Attributions">  Attributions </a> </li>
−
            <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg">Home </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>
−
 
+
                    </ul>
−
            <li class="menu_item" >
+
                </li>
−
                <a href=" https://2016.igem.org/Team:Freiburg/Team"> Team  </a>
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Description"> Project <span class="arrow"></span></a>
−
                <ul class="sub-menu">
+
                    <ul class="sub-menu">
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Team">  Team </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Description"> Project </a></li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Attributions">  Attributions </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Motivation"> Motivation </a></li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Achievements">  Achievements </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Goals"> Goals </a></li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Pictures">  Pictures </a> </li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Outreach"> Outreach </a></li>
−
 
+
                    </ul>
−
                </ul>
+
                </li>
−
            </li>
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Methods"> Methods <span class="arrow"></span></a>
−
 
+
                    <ul class="sub-menu">
−
            <li class="menu_item">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Methods"> Methods </a></li>
−
                <a href="https://2016.igem.org/Team:Freiburg/Description"> Project <span class="arrow"></span></a>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/B_subtilis"> Bacillus subtilis </a></li>
−
                <ul class="sub-menu">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Protocols </a></li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Description"> Project </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Journal </a></li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Motivation"> Motivation </a></li>
+
                    </ul>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Goals"> Goals </a></li>
+
                </li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Outreach"> Outreach </a></li>
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results <span class="arrow"></span></a>
−
                </ul>
+
                    <ul class="sub-menu">
−
            </li>
+
                        <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 class="menu_item">
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Data"> Data </a></li>
−
              <a href="https://2016.igem.org/Team:Freiburg/Methods"> Methods <span class="arrow"></span></a>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Biobricks"> Biobricks </a></li>
−
                <ul class="sub-menu">
+
                    </ul>
−
 
+
                </li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Methods"> Methods </a></li>
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Safety"> Safety <span class="arrow"></span></a>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/B_subtilis"> Bacillus subtilis </a></li>
+
                    <ul class="sub-menu">
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Protocols </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Safety"> General </a></li>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Journal </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/Killswitch"> Kill Switch </a>
−
       
+
                            <ul class="sub-sub-menu">
−
                </ul>
+
                                <li> <a href="https://2016.igem.org/Team:Freiburg/Safety"> General </a></li>
−
            </li>
+
                                <li> <a href="https://2016.igem.org/Team:Freiburg/Knockouts"> Knock Outs </a></li>
−
 
+
                                <li> <a href="https://2016.igem.org/Team:Freiburg/Killswitch"> Kill Switch </a></li>
−
            <li class="menu_item">
+
                            </ul>
−
                <a href="https://2016.igem.org/Team:Freiburg/Results"> Results <span class="arrow"></span></a>
+
                        </li>
−
                <ul class="sub-menu">
+
                    </ul>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results </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/Human_Practices"> Human Practices <span class="arrow"></span> </a>
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Data"> Data </a></li>
+
                    <ul class="sub-menu">
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Biobricks"> Biobricks </a></li>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> General </a></li>
−
                 
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Integrated_Practices"> Integrated </a></li>
−
                </ul>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Collaborations"> Collaborations </a></li>
−
            </li>
+
                    </ul>
−
 
+
                </li>
−
 
+
            </ul>
−
            <li class="menu_item">
+
        </nav>
−
                <a href="https://2016.igem.org/Team:Freiburg/Safety"> Safety <span class="arrow"></span></a>
+
    </div>
−
                <ul class="sub-menu">
+
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Safety"> General </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/Killswitch"> Kill Switch </a></li>
+
−
 
+
−
                </ul>
+
−
            </li>
+
−
 
+
−
 
+
−
            <li class="menu_item">
+
−
                <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> Human Practices <span class="arrow"></span> </a>
+
−
                <ul class="sub-menu">
+
−
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Human_Practices"> General </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>
+
−
                </ul>
+
−
            </li>
+
−
 
+
−
        </ul>
+
−
    </nav>
+
−
</div>
+
 
</p>
 
</p>
−
 
−
 
 
<script>
 
<script>
−
 
 
     // This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
     // This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
−
 
−
 
−
 
−
 
 
</script>
 
</script>
−
 
  
 
</html>
 
</html>

Revision as of 02:26, 1 September 2016