Team:Penn/css/navigation

From 2012.igem.org

(Difference between revisions)
Line 38: Line 38:
/* The main navigation links */
/* The main navigation links */
 +
.nav>li>a  
.nav>li>a  
{
{
Line 70: Line 71:
/* Changing the background on hover */
/* Changing the background on hover */
-
.nav>li>a:hover, .nav>li:hover>a {
+
.nav>li>a:hover, .nav>li:hover>a  
-
background: rgba(0, 0, 0, .15);
+
{
-
background: #414141;
+
  background:rgba(0, 0, 0, .15);
 +
  background:#414141;
}
}
-
.nav>li:first-child a {
+
.nav>li:first-child a  
-
border-top-left-radius: 3px;
+
{
 +
  border-top-left-radius:3px;
}
}
/* The pointer arrow */
/* The pointer arrow */
 +
.arrow {
.arrow {
-
cursor: pointer;
+
  cursor:pointer;
-
    height: 0px;
+
  height:0px;
-
    border: 3px solid transparent;
+
  border:3px solid transparent;
-
    border-bottom-color: #fff;
+
  border-bottom-color:#fff;
-
    left: 100px;
+
  left:100px;
-
    position: absolute;
+
  position:absolute;
-
    bottom: 0px;
+
  bottom:0px;
-
    width: 0;
+
  width:0;
-
    z-index: 5;
+
  z-index:5;
-
    -moz-transition: all .3s ease;
+
  -moz-transition:all .3s ease;
-
    -ms-transition: all .3s ease;
+
  -ms-transition:all .3s ease;
-
    -o-transition: all .3s ease;
+
  -o-transition:all .3s ease;
-
    -webkit-transition: all .3s ease;
+
  -webkit-transition:all .3s ease;
-
    transition: all .3s ease;
+
  transition:all .3s ease;
}
}
-
.arrow:hover {
+
.arrow:hover  
-
    -moz-transition-duration: 3000s;
+
{
-
    -ms-transition-duration: 3000s;
+
  -moz-transition-duration:3000s;
-
    -o-transition-duration: 3000s;
+
  -ms-transition-duration:3000s;
-
    -webkit-transition-duration: 3000s;
+
  -o-transition-duration:3000s;
-
    transition-duration: 3000s;
+
  -webkit-transition-duration:3000s;
 +
  transition-duration:3000s;
}
}
-
.nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow {
+
.nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow  
-
    left: 100px;
+
{
 +
  left:100px;
}
}
-
.nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow {
+
.nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow  
-
    left: 300px;
+
{
 +
  left:300px;
}
}
-
.nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow {
+
.nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow  
-
    left: 500px;
+
{
 +
  left:500px;
}
}
-
.nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow {
+
.nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow  
-
    left: 700px;
+
{
 +
  left:700px;
}
}
-
.nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow {
+
.nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow  
-
    left: 900px;
+
{
 +
  left:900px;
}
}
/* General styling for the submenus */
/* General styling for the submenus */
-
.nav ul {
+
 
-
display: block;
+
.nav ul  
-
position: absolute;
+
{
-
left: -9999px;
+
  display:block;
-
text-align: center;
+
  position:absolute;
-
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+
  left:-9999px;
 +
  text-align:center;
 +
  box-shadow:0 1px 2px rgba(0, 0, 0, .15);
}
}
/* Level 1 submenus */
/* Level 1 submenus */
-
.nav>li>ul {
+
 
-
cursor: pointer;
+
.nav>li>ul  
-
padding-top: 0px;
+
{
-
z-index: 200;
+
  cursor:pointer;
-
top: 43px;
+
  padding-top:0px;
-
+
  z-index:200;
 +
  top:43px;
}
}
/* Making the level 1 submenu to appear on hover */
/* Making the level 1 submenu to appear on hover */
-
.nav>li:hover>ul {
 
-
left: -1px;
 
-
}
 
 +
.nav>li:hover>ul
 +
{
 +
  left:-1px;
 +
}
/* The submenu link containers */
/* The submenu link containers */
-
.nav ul li {
+
 
-
position: relative;
+
.nav ul li  
-
display: block;
+
 
 +
{
 +
  position:relative;
 +
  display:block;
-
/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
+
/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
-
height: 0px;
+
-
-webkit-transition: height .2s;
+
  height:0px;
-
-moz-transition: height .2s;
+
  -webkit-transition:height .2s;
-
-o-transition: height .2s;
+
  -moz-transition:height .2s;
-
-ms-transition: height .2s;
+
  -o-transition:height .2s;
 +
  -ms-transition:height .2s;
}
}
/* Expanding the list elements which contain the links */
/* Expanding the list elements which contain the links */
-
.nav li:hover>ul>li {
+
 
-
height: 24px;
+
.nav li:hover>ul>li  
 +
{
 +
  height:24px;
}
}
-
.nav>li:hover>ul>li:first-child {
+
.nav>li:hover>ul>li:first-child  
-
height: 27px;
+
{
 +
  height:27px;
}
}
-
.nav>li>ul>li:first-child>a {
+
.nav>li>ul>li:first-child>a
-
border-top: 3px solid #fff;
+
{
 +
  border-top:3px solid #fff;
}
}
-
.nav>li>ul>li.dropdown:first-child>ul {
+
.nav>li>ul>li.dropdown:first-child>ul  
-
top: 3px;
+
{
 +
  top: 3px;
}
}
 +
/* The links of the submenus */
/* The links of the submenus */
-
.nav ul li a {
+
 
 +
.nav ul li a
 +
{
 +
 
/* Layout */
/* Layout */
-
display: block;
+
 
-
width: 171px;
+
  display:block;
-
padding: 6px 10px 6px 20px;
+
  width:171px;
 +
  padding:6px 10px 6px 20px;
/* Typography */
/* Typography */
-
font-size: 12px;
+
 
-
color: #999;
+
  font-size:12px;
-
font-family: Helvetica, Arial, sans-serif;
+
  color:#999;
-
text-decoration: none;
+
  font-family:Helvetica, Arial, sans-serif;
-
background: #f0f0f0;
+
  text-decoration:none;
 +
  background:#f0f0f0;
/* Every change to the links (background, color etc) will be made with a smooth transition */
/* Every change to the links (background, color etc) will be made with a smooth transition */
-
-webkit-transition: all .2s;
+
  -webkit-transition:all .2s;
-
-moz-transition: all .2s;
+
  -moz-transition:all .2s;
-
-ms-transition: all .2s;
+
  -ms-transition:all .2s;
-
-o-transition: all .2s;
+
  -o-transition:all .2s;
-
transition: all .2s;
+
  transition:all .2s;
}
}
-
.nav>li>ul>li:first-child>a::before {
+
.nav>li>ul>li:first-child>a::before
-
content: "";
+
{
-
display: block;
+
  content:"";  
-
position: absolute;
+
  display:block;
-
text-align: center;
+
  position:absolute;
-
width: 100%;
+
  text-align:center;
-
height: 6px;
+
  width:100%;
-
background: transparent;
+
  height:6px;
-
top: -6px;
+
  background:transparent;
-
left: 0;
+
  top:-6px;
-
z-index: 9999;
+
  left:0;
 +
  z-index:9999;
}
}

Revision as of 09:47, 19 August 2012

.nav, .nav ul { 

 margin:0;
 padding:0;
 list-style:none;
 line-height:1;
 z-index:3

}

.nav { 

 display:block;
 position:relative;
 width:1000px;
 height:43px;
 border-bottom:3px solid #fff;
 border-top-left-radius:3px;
 border-top-right-radius:3px;

 background: #494949; /* Background for Internet Explorer 9 and older browsers */
 background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
 background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
 background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
 background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */

}

/* The link containers */

.nav>li { 

 display:block;
 float:left;
 position:relative;
 margin:0;
 padding:0;

}

/* The main navigation links */

.nav>li>a { 

 /* Layout & positioning */



 display:block;
 width:198px;
 padding:11px 0px;
 border-right:1px dotted #393939;
 border-left:1px dotted #595959;

 /* Typography */

 font-family:Helvetica, Arial, sans-serif;
 font-size:14px;
 font-weight:normal;
 text-decoration: none;
 color:#fff;
 text-shadow:0 1px 0 #2a2a2a;
 text-align:center;

 /* Changing the background on hover with a smooth transition */

 -webkit-transition:background .35s linear;
 -moz-transition:background .35s linear;
 -ms-transition:background .35s linear;
 -o-transition:background .35s linear;
 transition:background .35s linear;

}

/* Changing the background on hover */

.nav>li>a:hover, .nav>li:hover>a { 

 background:rgba(0, 0, 0, .15);
 background:#414141;

}

.nav>li:first-child a { 

 border-top-left-radius:3px;

}

/* The pointer arrow */

.arrow { 

 cursor:pointer;
 height:0px;
 border:3px solid transparent;
 border-bottom-color:#fff;
 left:100px;
 position:absolute;
 bottom:0px;
 width:0;
 z-index:5;

 -moz-transition:all .3s ease;
 -ms-transition:all .3s ease;
 -o-transition:all .3s ease;
 -webkit-transition:all .3s ease;
 transition:all .3s ease;

}

.arrow:hover { 

 -moz-transition-duration:3000s;
 -ms-transition-duration:3000s;
 -o-transition-duration:3000s;
 -webkit-transition-duration:3000s;
 transition-duration:3000s;

}

.nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow { 

 left:100px;

} .nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow { 

 left:300px;

} .nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow { 

 left:500px;

} .nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow { 

 left:700px;

} .nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow { 

 left:900px;

}

/* General styling for the submenus */

.nav ul { 

 display:block;
 position:absolute;
 left:-9999px;
 text-align:center;
 box-shadow:0 1px 2px rgba(0, 0, 0, .15);

}

/* Level 1 submenus */

.nav>li>ul { 

 cursor:pointer;
 padding-top:0px;
 z-index:200;
 top:43px;

}

/* Making the level 1 submenu to appear on hover */

.nav>li:hover>ul { 

 left:-1px;

}

/* The submenu link containers */

.nav ul li

{ 

 position:relative;
 display:block;

/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */ 

 height:0px;
 -webkit-transition:height .2s;
 -moz-transition:height .2s;
 -o-transition:height .2s;
 -ms-transition:height .2s;

}

/* Expanding the list elements which contain the links */

.nav li:hover>ul>li { 

 height:24px;

}

.nav>li:hover>ul>li:first-child { 

 height:27px;

}

.nav>li>ul>li:first-child>a { 

 border-top:3px solid #fff;

}

.nav>li>ul>li.dropdown:first-child>ul { 

 top: 3px;

}


/* The links of the submenus */

.nav ul li a 

{

/* Layout */ 

 display:block;
 width:171px;
 padding:6px 10px 6px 20px;

/* Typography */ 

 font-size:12px;
 color:#999;
 font-family:Helvetica, Arial, sans-serif;
 text-decoration:none;
 background:#f0f0f0;

/* Every change to the links (background, color etc) will be made with a smooth transition */ 

 -webkit-transition:all .2s;
 -moz-transition:all .2s;
 -ms-transition:all .2s;
 -o-transition:all .2s;
 transition:all .2s;

}

.nav>li>ul>li:first-child>a::before 

{
 content:""; 
 display:block;
 position:absolute;
 text-align:center;
 width:100%;
 height:6px;
 background:transparent;
 top:-6px;
 left:0;
 z-index:9999;

}


/* The hover state of the links */ .nav ul li:hover>a, .nav ul li>a:hover { background: #e7e7e7; color: #f2c100; }

/* Changing the color of the arrow on hover */ .nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after { border-left-color: #f2c100; }

Retrieved from "http://2012.igem.org/Team:Penn/css/navigation"