Team:UCLondon/Templates/Navigation

From 2012e.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 19: Line 19:
   <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 38: Line 38:
         width: 100%;
         width: 100%;
         color: rgb(199, 214, 217);  
         color: rgb(199, 214, 217);  
-
         height: 41px;
+
         height: 26px;
         text-align: center;
         text-align: center;
         padding-top: 15px;
         padding-top: 15px;
Line 44: Line 44:
         // -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-image: url(http://db.tt/73dOABGc);
         background-image: url(http://db.tt/73dOABGc);
Line 65: Line 65:
         }
         }
   
   
-
       #navigation a:visited{
+
       .menu a:visited{
           color: rgb(199, 214, 217);
           color: rgb(199, 214, 217);
         }
         }
 +
       #navigation a:hover{
       #navigation a:hover{
Line 98: Line 99:
             position: absolute;
             position: absolute;
             z-index: 2147483647;
             z-index: 2147483647;
-
             width: 100px;
+
             width: 140px;
             top: 15px;
             top: 15px;
             left: 10px;
             left: 10px;
             border: solid 1px #b4b4b4;
             border: solid 1px #b4b4b4;
-
             background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(207, 207, 207));
+
             background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
-
             background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(207, 207, 207));
+
             background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
-
             background-image: -ms-linear-gradient(top, rgb(255, 255, 255), rgb(207, 207, 207));
+
             background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
-
             background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(207, 207, 207));
+
             background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
-
             background-image: linear-gradient(top, rgb(255, 255, 255), rgb(207, 207, 207));
+
             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;
             border-radius: 10px;
Line 117: Line 119:
     .icons li:hover > .hidden-menu  { display: block; }
     .icons li:hover > .hidden-menu  { display: block; }
-
     .hidden-menu a {  text-decoration: none; text-align:left; }
+
     .hidden-menu a {  text-decoration: none; height: 17px; padding-top:3px; padding-bottom: 3px;  }
-
     .hidden-menu li { padding: 0; padding-left:0; padding-right:0; width: 100px;}
+
      #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; }
Line 138: Line 142:
     .hidden-menu li:hover > a {
     .hidden-menu li:hover > a {
-
             background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(4, 172, 236)), to(rgb(1, 134, 186)) );
+
             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(4, 172, 236), rgb(1, 134, 186));
+
             background-image: -webkit-linear-gradient(top,rgb(153, 153, 153), rgb(179, 179, 179) );
-
             background-image: -moz-linear-gradient(top, rgb(4, 172, 236), rgb(1, 134, 186));
+
             background-image: -moz-linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179)) ;
-
             background-image: -ms-linear-gradient(top, rgb(4, 172, 236), rgb(1, 134, 186));
+
             background-image: -ms-linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
-
             background-image: -o-linear-gradient(top, rgb(4, 172, 236), rgb(1, 134, 186));
+
             background-image: -o-linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
-
             background-image: linear-gradient(top, rgb(4, 172, 236), rgb(1, 134, 186));
+
             background-image: linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
             color: #444;
             color: #444;
Line 149: Line 153:
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-
            text-shaddow: 0, 1px, 0, rgba(255, 255, 255, 1);
+
              text-shadow: rgb(0, 0, 0) 1px 1px 2px;
   }
   }
Line 162: Line 166:
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript">
   <script type="text/javascript">
-
       $("#action").html($(".left-menu > ul").html() + $(".right-menu > ul").html() );
+
       //$("#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>
   </script>
</html>
</html>

Latest revision as of 19:07, 24 September 2012