Team:Glendale CC AZ/css.main

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style>
<style>
 +
body
 +
{
 +
  background: url('http://uploadfa.net/uploads/13490193031.png') repeat;
 +
}
 +
 +
aside
 +
{
 +
  margin-left: 139px;
 +
  width: 220px;
 +
  height: 270px;
 +
  background-color: #fff;
 +
  border: solid thin rgb(223,223,223);
 +
  padding-top: 38px;
 +
  margin-top: 23px;
 +
  font-family: Arial;
 +
}
 +
 +
li
 +
{
 +
  padding: 9px 0 8px 26px;
 +
  margin: 10px 0 9px 0;
 +
  cursor: pointer;
 +
  color: #000;
 +
  transition: color .3s linear;
 +
  -webkit-transition: color .3s linear;
 +
  -moz-transition: color .3s linear;
 +
  -o-transition: color .3s linear;
 +
}
 +
 +
li:not(.active):hover
 +
{
 +
  color: rgb(1,185,255);
 +
}
 +
 +
a
 +
{
 +
  text-decoration: none;
 +
  color: inherit;
 +
}
 +
 +
.active
 +
{
 +
  background-color: rgb(1,185,255);
 +
  background-position: left center;
 +
  border-left: solid 15px rgb(0,149,205);
 +
  position: relative;
 +
  left: -15px;
 +
  color: #fff;
 +
}
</style>
</style>
<head>
<head>
Line 9: Line 57:
<body>
<body>
 +
<aside>
 +
  <ul>
 +
    <li class="active"><a href="#">Profile Settings</a></li>
 +
    <li><a href="#">Connected Networks</a></li>
 +
    <li><a href="#">Email Settings</a></li>
 +
    <li><a href="#">Privacy Settings</a></li>
 +
    <li><a href="#">Authurized Sites</a></li>
 +
  </ul>
 +
</aside>
</body>
</body>
 +
<script>
 +
//binding click event on li elements to having good active element
 +
$("li").click(function(){
 +
  $("li").removeAttr("class");
 +
  $(this).addClass("active");
 +
});
 +
</script>
</html>
</html>

Revision as of 07:23, 12 August 2013

Test

Retrieved from "http://2013.igem.org/Team:Glendale_CC_AZ/css.main"