Difference between revisions of "Template:Freiburg/Menubar"

(Undo revision 113011 by Zad67 (talk))
Line 4: Line 4:
 
     /* 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 -----*/
 
      
 
      
Line 19: Line 21:
 
     .menu {
 
     .menu {
 
         /*width:1500px;*/
 
         /*width:1500px;*/
−
        padding: 10px 16px;
+
/*        padding: 10px 16px;*/
 
         /*margin-left:20%;*/
 
         /*margin-left:20%;*/
 +
        margin:0px auto;
 +
 
     }
 
     }
 
      
 
      
 
     .menu li {
 
     .menu li {
−
         margin: 20x;
+
         /*        margin: 20x;*/
 +
        margin:0px;
 
         list-style: none;
 
         list-style: none;
 
         padding: 4px 4px;
 
         padding: 4px 4px;
Line 30: Line 35:
 
      
 
      
 
     .menu a {
 
     .menu a {
−
         font-size: 25px;
+
         font-size: 22px;
 
         font-family: 'Cabin Sketch', cursive;
 
         font-family: 'Cabin Sketch', cursive;
 
         font-weight: bold;
 
         font-weight: bold;
Line 47: Line 52:
 
     }
 
     }
 
      
 
      
−
    .menu .arrow {
 
−
        font-size: 10px;
 
−
        line-height: 0%;
 
−
    }
 
−
 
 
     /*----- Top Level -----*/
 
     /*----- Top Level -----*/
 
      
 
      
Line 70: Line 70:
 
         margin-bottom: -5px;
 
         margin-bottom: -5px;
 
     }
 
     }
−
 
 
     /*----- SubMenu Level -----*/
 
     /*----- SubMenu Level -----*/
−
 
+
   
 
     .menu li:hover .sub-menu {
 
     .menu li:hover .sub-menu {
 
         z-index: 1;
 
         z-index: 1;
Line 79: Line 78:
 
      
 
      
 
     .sub-menu {
 
     .sub-menu {
−
        width: 1200px;
+
/*        font-size: 10px;*/
−
        font-size: 20px;
+
 
         position: absolute;
 
         position: absolute;
−
         top: 30px;
+
         top: 60px;
−
         left: -150px;
+
         left: 0px;
 
         z-index: -1;
 
         z-index: -1;
 
         opacity: 0;
 
         opacity: 0;
 
         transition: opacity linear 0.15s;
 
         transition: opacity linear 0.15s;
 +
        padding: 0px;
 +
/*        display: flex;*/
 +
/*        justify-content: center;*/
 
     }
 
     }
 
      
 
      
 
     .sub-menu li {
 
     .sub-menu li {
 +
/*        width: 100%;*/
 +
/*        font-size: 10px;*/
 
         display: inline-block;
 
         display: inline-block;
−
         padding: 20px 2px;
+
        text-align: center;
 +
         padding: 2px 2px;
 
     }
 
     }
 
      
 
      
 
     .sub-menu li a {
 
     .sub-menu li a {
−
         padding: 6px 15px;
+
/*        text-align: center*/
−
         display: inline-block;
+
        font-size: 16px;
 +
         padding: 6px 5px;
 +
         display: block;
 
         background: #a08488;
 
         background: #a08488;
 +
    }
 +
    li li{
 +
        width: 100%;
 
     }
 
     }
 
      
 
      
 
     .sub-menu li a:hover,
 
     .sub-menu li a:hover,
 
     .sub-menu .current-item a {}
 
     .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: 80px;
 
−
        z-index: -1;
 
−
        opacity: 0;
 
−
        transition: opacity linear 0.15s;
 
−
    }
 
−
   
 
−
    .sub-sub-menu li {
 
−
        display: inline-block;
 
−
        padding: 30px 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 --->
Line 141: Line 117:
 
<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=Cabin+Sketch" rel="stylesheet">   </head>
+
    <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet"> </head>
 
<!-- <div style="display: flex;justify-content: center;"> -->
 
<!-- <div style="display: flex;justify-content: center;"> -->
−
    <div class="menu-wrap">
+
<div class="menu-wrap">
−
        <nav class="menu">
+
    <nav class="menu">
−
            <ul class="clearfix">
+
        <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">Home </a> </li-->
−
                <li class="menu_item"> <a href=" https://2016.igem.org/Team:Freiburg/Team"> Team </a>
+
            <li class="menu_item"> <a href=" https://2016.igem.org/Team:Freiburg/Team"> Team </a>
−
                    <ul class="sub-menu">
+
                <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/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/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/Pictures">  Pictures </a> </li>
+
                </ul>
−
                    </ul>
+
            </li>
−
                </li>
+
            <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Description"> Project </a>
−
                <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Description"> Project </a>
+
                <ul class="sub-menu">
−
                    <ul class="sub-menu">
+
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Motivation"> Motivation </a></li>
−
 
+
                    <li> <a href="https://2016.igem.org/Team:Freiburg/Goals_Approach"> Approach </a></li>
−
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Motivation"> Motivation </a></li>
+
                    <li> <a href="https://2016.igem.org/Team:Freiburg/B_subtilis"> Probiotics </a>
−
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Goals_Approach"> Approach </a></li>
+
−
                        <li> <a href="https://2016.igem.org/Team:Freiburg/B_subtilis"> Probiotics </a>
+
 
                         <li> <a href="https://2016.igem.org/Team:Freiburg/Surface_Display"> Surface Display </a>
 
                         <li> <a href="https://2016.igem.org/Team:Freiburg/Surface_Display"> Surface Display </a>
−
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Targeted Drug Delivery"> Targeted Drug Delivery</a>
+
                            <li> <a href="https://2016.igem.org/Team:Freiburg/Targeted Drug Delivery"> Targeted Drug Delivery</a> </ul>
−
 
+
−
                    </ul>
+
 
                 </li>
 
                 </li>
 
                 <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Lab"> Lab </a>
 
                 <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Lab"> Lab </a>
−
                     <ul class="sub-menu"> </li>
+
                     <ul class="sub-menu">
−
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Methods </a></li>
+
                </li>
−
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Journal </a></li>
+
                <li> <a href="https://2016.igem.org/Team:Freiburg/Experiments"> Methods </a></li>
−
                    </ul>
+
                <li> <a href="https://2016.igem.org/Team:Freiburg/Notebook"> Journal </a></li>
 +
                </ul>
 
                 </li>
 
                 </li>
 
                 <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results</a>
 
                 <li class="menu_item"> <a href="https://2016.igem.org/Team:Freiburg/Results"> Results</a>
 
                     <ul class="sub-menu">
 
                     <ul class="sub-menu">
−
 
+
                         <li> <a href="https://2016.igem.org/Team:Freiburg/Targeting"> Targeting </a></li>
−
                         <li> <a href="https://2016.igem.org/Team:Freiburg/Proof"> Proof of Concept </a>
+
                        <li> <a href="https://2016.igem.org/Team:Freiburg/Delivery"> Delivery </a></li>
−
                            <ul class="sub-sub-menu">
+
−
                                <li> <a href="https://2016.igem.org/Team:Freiburg/Targeting"> Targeting </a></li>
+
−
                                <li> <a href="https://2016.igem.org/Team:Freiburg/Delivery"> Delivery </a></li>
+
−
                            </ul>
+
−
                        </li>
+
 
                         <li> <a href="https://2016.igem.org/Team:Freiburg/Production_Nanocillus"> Nanocillus </a></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> <a href="https://2016.igem.org/Team:Freiburg/Biobricks"> Biobricks </a></li>
Line 200: Line 168:
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
−
            </ul>
+
        </ul>
−
        </nav>
+
    </nav>
−
    </div>
+
</div>
 
<!-- </div> -->
 
<!-- </div> -->
 
<script>
 
<script>

Revision as of 23:02, 8 September 2016