Difference between revisions of "Template:Freiburg/Menubar"

(Created page with "<html> <style> →‎******************************** DEFAULT WIKI SETTINGS *******************************: #sideMenu, #top_title {display:none;} #content { padd...")
 
Line 5: Line 5:
 
     /********************************* DEFAULT WIKI SETTINGS  ********************************/
 
     /********************************* DEFAULT WIKI SETTINGS  ********************************/
  
−
     #sideMenu, #top_title {display:none;}
+
     /*#sideMenu, #top_title {display:none;}*/
−
     #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
     /*#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}*/
−
     body {background-color:white; }
+
     /*body {background-color:white; }*/
−
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
     /*#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }*/
  
 
     /********************************* MENU ********************************/
 
     /********************************* MENU ********************************/
Line 14: Line 14:
  
 
     /* 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');*/
 +
    }
  
−
     nav {
+
     .clearfix:after {
−
        display: block;
+
−
        text-align: center;
+
−
    }
+
−
    nav ul {
+
−
        margin: 0;
+
−
        padding:0;
+
−
        list-style: none;
+
−
    }
+
−
    .nav a {
+
 
         display:block;
 
         display:block;
−
         background: #111;
+
         clear:both;
−
        color: #fff;
+
−
        text-decoration: none;
+
−
        padding: 0.8em 1.8em;
+
−
        text-transform: uppercase;
+
−
        font-size: 80%;
+
−
        letter-spacing: 2px;
+
−
        text-shadow: 0 -1px 0 #000;
+
−
        position: relative;
+
 
     }
 
     }
−
     .nav{
+
 
−
         vertical-align: top;
+
    /*----- Menu Outline -----*/
−
        display: inline-block;
+
     .menu-wrap {
−
         box-shadow:
+
         /*width:100%;*/
−
                1px -1px -1px 1px #000,
+
         box-shadow:0px 1px 3px rgba(255, 197, 0, 0.2);
−
                -1px 1px -1px 1px #fff,
+
         color: #3e0a11;
−
                0 0 6px 3px #fff;
+
−
         border-radius:6px;
+
 
     }
 
     }
−
     .nav li {
+
 
−
         position: relative;
+
     .menu {
 +
         /*width:1000px;*/
 +
 
 +
        margin:0px auto;
 
     }
 
     }
−
     .nav > li {
+
 
−
         float: left;
+
     .menu li {
−
         border-bottom: 4px #aaa solid;
+
         margin:0px;
−
         margin-right: 1px;
+
         list-style:none;
 +
         /*font-family:'Ek Mukta';*/
 
     }
 
     }
−
     .nav > li > a {
+
 
−
         margin-bottom: 1px;
+
     .menu a {
−
         box-shadow: inset 0 2em .33em -0.5em #555;
+
         transition:all linear 0.15s;
 +
         color:#919191;
 +
        background-color: black;
 
     }
 
     }
−
     .nav > li:hover,
+
 
−
    .nav > li:hover > a {
+
     .menu li:hover > a, .menu .current-item > a {
−
         border-bottom-color: orange;
+
         text-decoration:none;
 +
        color: #be740d;
 
     }
 
     }
−
     .nav li:hover > a {
+
 
−
         color:orange;
+
     .menu .arrow {
 +
         font-size:11px;
 +
        line-height:0%;
 
     }
 
     }
−
     .nav > li:first-child {
+
 
−
         border-radius: 4px 0 0 4px;
+
    /*----- Top Level -----*/
 +
     .menu > ul > li {
 +
        float:left;
 +
        display:inline-block;
 +
         position:relative;
 +
        font-size:16px;
 +
        color: black;
 
     }
 
     }
−
     .nav > li:first-child > a {
+
 
−
         border-radius: 4px 0 0 0;
+
     .menu > ul > li > a {
 +
         padding:10px 40px;
 +
        display:inline-block;
 +
        text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 
     }
 
     }
−
     .nav > li:last-child {
+
 
−
         border-radius: 0 0 4px 0;
+
     .menu > ul > li:hover > a, .menu > ul > .current-item > a {
−
        margin-right: 0;
+
         background:#2e2728;
 
     }
 
     }
−
     .nav > li:last-child > a {
+
 
−
         border-radius: 0 4px 0 0;
+
    /*----- Bottom Level -----*/
 +
     .menu li:hover .sub-menu {
 +
         z-index:1;
 +
        opacity:1;
 
     }
 
     }
−
     .nav li li a {
+
 
−
         margin-top: 1px;
+
     .sub-menu {
 +
         width:120%;
 +
        padding:5px 0px;
 +
        position:absolute;
 +
        top:100%;
 +
        left:0px;
 +
        z-index:-1;
 +
        opacity:0;
 +
        transition:opacity linear 0.15s;
 +
        box-shadow:0px 2px 3px rgba(0,0,0,0.2);
 +
        background:#2e2728;
 
     }
 
     }
  
 +
    .sub-menu li {
 +
        display:block;
 +
        font-size:14px;
 +
    }
  
−
     .nav li a:first-child:nth-last-child(2):before {
+
     .sub-menu li a {
−
         content: "";
+
         padding:10px 30px;
−
        position: absolute;
+
         display:block;
−
        height: 0;
+
−
        width: 0;
+
−
        border: 5px solid transparent;
+
−
        top: 50% ;
+
−
         right:5px;
+
 
     }
 
     }
  
−
    /* submenu positioning*/
+
     .sub-menu li a:hover, .sub-menu .current-item a {
−
     .nav ul {
+
         background:#3e3436;
−
        position: absolute;
+
−
        white-space: nowrap;
+
−
        border-bottom: 5px solid  orange;
+
−
        z-index: 1;
+
−
        left: -99999em;
+
−
    }
+
−
    .nav > li:hover > ul {
+
−
        left: auto;
+
−
        margin-top: 5px;
+
−
        min-width: 100%;
+
−
    }
+
−
    .nav > li li:hover > ul {
+
−
        left: 100%;
+
−
        margin-left: 1px;
+
−
        top: -1px;
+
−
    }
+
−
    /* arrow hover styling */
+
−
    .nav > li > a:first-child:nth-last-child(2):before {
+
−
        border-top-color: #aaa;
+
−
    }
+
−
    .nav > li:hover > a:first-child:nth-last-child(2):before {
+
−
         border: 5px solid transparent;
+
−
        border-bottom-color: orange;
+
−
        margin-top:-5px
+
−
    }
+
−
    .nav li li > a:first-child:nth-last-child(2):before {
+
−
        border-left-color: #aaa;
+
−
        margin-top: -5px
+
−
    }
+
−
    .nav li li:hover > a:first-child:nth-last-child(2):before {
+
−
        border: 5px solid transparent;
+
−
        border-right-color: orange;
+
−
        right: 10px;
+
 
     }
 
     }
 +
  
  
Line 147: Line 130:
  
  
−
<div class="menu_wrapper" >
+
<div class="menu-wrap" >
−
     <nav>
+
     <nav class="menu">
  
−
    <!--<div class="collapsable_menu_control"> MENU </div>-->
 
  
−
     <ul id="menu" class="nav">
+
     <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"> <div class="icon plus"></div> TEAM
+
         <li class="menu_item">
−
             <ul class="submenu">
+
            <a href="#"> TEAM <span class="arrow">&#9660;</span></a>
 +
             <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/Team"> Team  </a> </li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Collaborations">*  Collaborations </a> </li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Collaborations">*  Collaborations </a> </li>
Line 164: Line 147:
 
         </li>
 
         </li>
  
−
         <li class="menu_item"> <div class="icon plus"></div> PROJECT
+
         <li class="menu_item">
−
             <ul class="submenu">
+
            <a href="#">  PROJECT <span class="arrow">&#9660;</span> </a>
 +
             <ul class="sub-menu">
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Description"> *  Description </a></li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Description"> *  Description </a></li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Design"> * Design </a></li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Design"> * Design </a></li>
Line 176: Line 160:
 
         </li>
 
         </li>
  
−
         <li class="menu_item"> <div class="icon plus"></div> PARTS
+
         <li class="menu_item">
−
             <ul class="submenu">
+
            <a href="#"> PARTS <span class="arrow">&#9660;</span></a>
 +
             <ul class="sub-menu">
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Parts">Parts </a></li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Parts">Parts </a></li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Basic_Part"> * Basic Parts </a></li>
 
                 <li> <a href="https://2016.igem.org/Team:Freiburg/Basic_Part"> * Basic Parts </a></li>
Line 192: Line 177:
  
  
−
         <li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
         <li class="menu_item">
−
             <ul class="submenu">
+
            <a href="#"> HUMAN PRACTICES <span class="arrow">&#9660;</span> </a>
 +
             <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/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/Silver">* Silver </a></li>
Line 203: Line 189:
  
  
−
         <li class="menu_item"> <div class="icon plus"></div> AWARDS
+
         <li class="menu_item">
−
             <ul class="submenu">
+
            <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/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/Hardware"> * Hardware </a></li>

Revision as of 13:30, 27 July 2016