Team:Penn/css/navigation

From 2012.igem.org

(Difference between revisions)

Revision as of 12:31, 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 #f2c100;
 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:#f2c100;
 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 #f2c100;

}

.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;

}