Team:UCLondon/Templates/Navigation

From 2012e.igem.org

(Difference between revisions)
 
(163 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
   <div id="navigation">
   <div id="navigation">
 +
      <ul class="menu">
 +
              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon">Home</a></li>
 +
              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Opportunity">The Opportunity</a></li>
 +
              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Summary">Executive Summary</a></li>
 +
              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Team">Team</a></li>
 +
              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Source_Data">Source Data</a></li>
 +
      </ul> 
 +
 +
 +
      <ul class="menu icons">
 +
              <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul> </li>
 +
      </ul>
 +
     
 +
     
 +
     
   </div><!-- end navigation div-->
   </div><!-- end navigation div-->
   <style type="text/css">
   <style type="text/css">
-
       body { background-color: white;  }
+
       //body { background-color: white;  }
       #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
       #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; height:100%;}
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; height:100%;}
Line 10: Line 25:
       #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
       #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
       #p-logo { height:1px; overflow:hidden; display: none;}
       #p-logo { height:1px; overflow:hidden; display: none;}
 +
      #footer-box { border: none; }
 +
 +
      //p { border: none }
        
        
-
       #content { padding-top: 50px; }
+
       #content { padding-top: 56px; }
   
   
       #navigation {
       #navigation {
Line 19: Line 37:
         left: 0;
         left: 0;
         width: 100%;
         width: 100%;
-
         color: #ffffff;
+
         color: rgb(199, 214, 217);  
-
         height: 35px;
+
         height: 26px;
         text-align: center;
         text-align: center;
         padding-top: 15px;
         padding-top: 15px;
         /* Adds shadow to the bottom of the bar */
         /* Adds shadow to the bottom of the bar */
-
        -webkit-box-shadow: 0px 0px 8px 0px #000000;
+
        // -webkit-box-shadow: 0px 0px 8px 0px #000000;
-
         -moz-box-shadow: 0px 0px 8px 0px #000000;
+
         //-moz-box-shadow: 0px 0px 8px 0px #000000;
-
         box-shadow: 0px 0px 8px 0px #000000;
+
         //box-shadow: 0px 0px 8px 0px #000000;
         /* Adds the transparent background */
         /* Adds the transparent background */
-
         background-color: rgba(1, 1, 1, 0.8);
+
         background-image: url(http://db.tt/73dOABGc);
-
         color: rgba(1, 1, 1, 0.8);
+
         color: rgb(199, 214, 217);
         }
         }
-
  </style>
 
 +
      #navigation a{
 +
        display: block;
 +
        padding-left: 15px;
 +
        padding-right: 15px;
 +
        padding-top: 2px
 +
        padding-bottom:2px;
 +
 +
        text-decoration: none;
 +
        font-family: 'Gill Sans', Arial, sans-serif;
 +
        font-size: 14px;
 +
        line-height: 14px;
 +
        color: rgb(199, 214, 217);
 +
        text-shadow: rgb(0, 0, 0) 1px 1px 2px;
 +
        }
 +
 +
      .menu a:visited{
 +
          color: rgb(199, 214, 217);
 +
        }
 +
 +
 +
      #navigation a:hover{
 +
        color: white;
 +
       
 +
        }
 +
 +
      .menu{
 +
            margin: 0;
 +
            padding:0;
 +
            margin-left: 100px;
 +
            list-style-type: none;
 +
            list-style-image: none;
 +
      }
 +
 +
      .menu li{ float: left; display: list-item; }
 +
 +
    .icons{
 +
            position: absolute;
 +
            right:200px;
 +
            margin-left: 100px; 
 +
      }
 +
 +
    .hidden-menu {
 +
            display: none;
 +
         
 +
     
 +
            margin: 0;
 +
            padding: 0;
 +
            position: absolute;
 +
            z-index: 2147483647;
 +
            width: 140px;
 +
            top: 15px;
 +
            left: 10px;
 +
            border: solid 1px #b4b4b4;
 +
            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 +
            background-image: -moz-linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 +
            background-image: -ms-linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 +
            background-image: -o-linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 +
            background-image: linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 +
            background-color: rgb(240,240,240);
 +
 +
            border-radius: 10px;
 +
            box-shadow: 0 1px 3px rgba(0,0,0, .3);
 +
 +
            list-style-type: none;
 +
            list-style-image: none;
 +
 +
      }
 +
 +
    .icons li:hover > .hidden-menu  { display: block; }
 +
    .hidden-menu a {  text-decoration: none; height: 17px; padding-top:3px; padding-bottom: 3px;  }
 +
      #action a, a:visited { color: black; text-shadow: none; }
 +
    //.hidden-menu li:not(a) { display: none; }
 +
    .hidden-menu li { padding: 0 !important; padding-left:0 !important; padding-right:0; width: 140px;  text-align:left; height: 20px;  }
 +
 +
 +
    .hidden-menu li:first-child > a {
 +
            -webkit-border-top-left-radius: 9px;
 +
            -webkit-border-top-right-radius: 9px;
 +
 +
            -moz-border-radius-topleft: 9px;
 +
            -moz-border-radius-topright: 9px;
 +
      }
 +
 +
    .hidden-menu li:last-child > a {
 +
            -webkit-border-bottom-left-radius: 9px;
 +
            -webkit-border-bottom-right-radius: 9px;
 +
 +
            -moz-border-radius-bottomleft: 9px;
 +
            -moz-border-radius-bottomright: 9px;
 +
      }
 +
 +
    .hidden-menu li:hover > a {
 +
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(153, 153, 153)), to(rgb(179, 179, 179) ) );
 +
            background-image: -webkit-linear-gradient(top,rgb(153, 153, 153), rgb(179, 179, 179) );
 +
            background-image: -moz-linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179)) ;
 +
            background-image: -ms-linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
 +
            background-image: -o-linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
 +
            background-image: linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
 +
 +
            color: #444;
 +
            border-top: solid 1px #f8f8f8;
 +
 +
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 +
              text-shadow: rgb(0, 0, 0) 1px 1px 2px;
 +
  }
 +
 +
 +
 +
 +
           
 +
 +
  </style>
 +
 +
 +
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 +
  <script type="text/javascript">
 +
      //$("#action").html( $(".left-menu > ul").children().has('a') );
 +
 +
      var str = "";
 +
      var i = 0;
 +
      for (i = 0; i <$(".left-menu > ul").children().has('a').length; ++i){
 +
            str += $(".left-menu > ul").children().has('a')[i].outerHTML;
 +
      }
 +
      $("#action").html(str + $(".right-menu > ul").html() );
 +
 +
      $("#top-section").css('display', 'none');
 +
 +
   
 +
  </script>
</html>
</html>

Latest revision as of 19:07, 24 September 2012

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/Navigation"