Template:Team:DukeMBar/CSS

From 2014.igem.org

(Difference between revisions)
Line 6: Line 6:
-
<!--<style type="text/css">
+
<style type="text/css">
-
.nav ul {
+
#navbar ul, #navbar li { list-style: none;
-
background: #efefef;  
+
        list-style-position:inside;
-
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
+
    margin:0px 0px;
-
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
+
    padding:0;
-
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);  
+
-
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
+
-
padding: 0 20px;
+
-
border-radius: 10px; 
+
-
list-style: none;
+
-
position: relative;
+
-
display: inline-table;
+
-
}
+
-
nav ul:after {
+
-
content: ""; clear: both; display: block;
+
-
}
+
-
.nav ul ul {
+
-
display: none;
+
-
}
+
-
nav ul li:hover > ul {
+
    }
-
display: block;
+
 
-
}
+
    #navbar ul{
-
</style>-->
+
    display:none;
 +
    position:absolute;
 +
    left:0px;
 +
    width:100%;
 +
      background-color:#40CC9D;
 +
 
 +
    }
 +
 
 +
 
 +
    #navbar li{
 +
    float:left;
 +
    padding:10px 0px;
 +
    position:relative;
 +
    width:16.666%
 +
    }
 +
 
 +
    #navbar > li >ul{
 +
    margin: 10px 0px;
 +
    }
 +
 
 +
    #navbar{
 +
    text-align:center;
 +
      /*height: 43px;*/
 +
      background-color:#40CC9D;
 +
margin: 0px 0px 40px 0px;
 +
    }
 +
 
 +
    #navbar a{
 +
    text-decoration:none;
 +
    color:white;
 +
    font-family:raleway;
 +
font-size:16px;
 +
    }
 +
 
 +
#navbar li li{
 +
  width:100%;
 +
}
 +
</style>
Line 35: Line 58:
<body>
<body>
-
<div class="nav">
+
<script>
-
<ul>
+
 
-
<li><a href="#">Home</a></li>
+
$(document).ready(function(){
-
<li><a href="#">Project</a>
+
  $('#navbar > li').hover(function() {
-
                        <ul>
+
$(this).find('ul').slideToggle("slow");
-
<li><a href="#">Photoshop</a></li>
+
});
-
<li><a href="#">Illustrator</a></li>
+
 
-
<li><a href="#">Web Design</a></li>
+
 
-
</ul>
+
$('#navbar > li > ul > li').mouseover(function(){
-
              </li>
+
  $(this).css("background-color","#5F9C87");
-
<li><a href="#">Team</a></li>
+
});
-
<li><a href="#">Notebook</a></li>
+
 
-
</ul>
+
$('#navbar li').hover(function(){
-
</div>
+
  $(this).css("background-color","#40CC9D");
 +
});
 +
 
 +
 
 +
$('#navbar > li > a').hover(function(){$(this).parent().css("background-color","#5F9C87");}, function(){$(this).parent().css("background-color","#40CC9D");});
 +
});
 +
  </script>
 +
 
 +
<ul id="navbar">
 +
        <li>
 +
            <a href="https://2014.igem.org/Team:Virginia">Home</a>
 +
        </li>
 +
 
 +
        <li>
 +
            <a href="https://2014.igem.org/Team:Virginia/Team">Team</a>
 +
 
 +
            <ul>
 +
                <li>
 +
                    <a href="https://2014.igem.org/Team:Virginia/Gallery">Gallery</a>
 +
                </li>
 +
 
 +
                <li>
 +
                    <a href="https://igem.org/Team.cgi?year=2014&amp;team_name=Virginia">Official Team Profile</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
     
 +
 
 +
        <li>
 +
            <a href="https://2014.igem.org/Team:Virginia/Project">Project</a>
 +
 
 +
            <ul>
 +
                          <li><a href=
 +
        "https://2014.igem.org/Team:Virginia/Notebook">Notebook</a></li>
 +
             
 +
                <li>
 +
                    <a href="https://2014.igem.org/Team:Virginia/Parts">Parts</a>
 +
                </li>
 +
             
 +
                              <li>
 +
                    <a href="https://2014.igem.org/Team:Virginia/Modeling">Modeling</a>
 +
                </li>
 +
             
 +
 +
                              <li>
 +
                    <a href="https://2014.igem.org/Team:Virginia/Safety">Safety</a>
 +
                </li>
 +
            </ul>
 +
      </li>
 +
     
 +
              <li>
 +
            <a href="https://2014.igem.org/Team:Virginia/HumanPractices">Human Practices</a>
 +
        </li>
 +
        <li>
 +
            <a href="https://2014.igem.org/Team:Virginia/Attributions">Attributions</a>
 +
        </li>
 +
     
 +
          <li><a href="https://2014.igem.org/"><img src = "http://i.imgur.com/rLFTkAP.png" height="17px"></a></li>
 +
      <div style="clear: both;"></div>
 +
    </ul>
 +
 
</body>
</body>
</html>
</html>

Revision as of 14:52, 15 October 2014

Retrieved from "http://2014.igem.org/Template:Team:DukeMBar/CSS"