"
Team:Penn/css/navigation
From 2012.igem.org
| Line 1: | Line 1: | ||
.nav, .nav ul | .nav, .nav ul | ||
{ | { | ||
| - | + | margin:0; | |
| - | + | padding:0; | |
| - | + | list-style:none; | |
| - | + | line-height:1; | |
| - | + | z-index:3 | |
| + | |||
} | } | ||
| Line 37: | Line 38: | ||
/* The main navigation links */ | /* The main navigation links */ | ||
| - | .nav>li>a { | + | .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 { | .nav>li>a:hover, .nav>li:hover>a { | ||
background: rgba(0, 0, 0, .15); | background: rgba(0, 0, 0, .15); | ||
Revision as of 09:39, 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; }
