Team:Penn/css/navigation

From 2012.igem.org

(Difference between revisions)
 
(103 intermediate revisions not shown)
Line 1: Line 1:
-
.nav, .nav ul  
+
/* Some stylesheet reset */
-
{
+
.nav, .nav ul {
-
  margin:0;
+
margin: 0;
-
  padding:0;
+
padding: 0;
-
  list-style:none;
+
list-style: none;
-
  line-height:1;
+
line-height: 1;
-
  z-index:3
+
z-index: 9999999;
-
 
+
}
}
-
.nav  
+
/* The top navigation menu */
-
{
+
.nav {
-
  display:block;
+
/* Layout & positioning */
-
  position:relative;
+
display: block;
-
  width:1000px;
+
position: relative;
-
  height:43px;
+
width: 1000px;
-
  border-bottom:3px solid #f2c100;
+
height: 43px;
-
  border-top-left-radius:3px;
+
border-bottom: 3px solid #fff; /* 45c3f2 */
-
  border-top-right-radius:3px;
+
border-top-left-radius: 3px;
 +
border-top-right-radius: 3px;
-
  background: #494949; /* Background for Internet Explorer 9 and older browsers */
+
/* Background & effects */
-
  background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
+
background: #494949; /* Background for Internet Explorer 9 and older browsers */
-
  background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
+
background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
-
  background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
+
background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
-
  background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */
+
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 */
/* The link containers */
-
 
+
.nav>li {
-
.nav>li  
+
display: block;
-
{
+
float:left;
-
  display:block;
+
position: relative;
-
  float:left;
+
margin: 0;
-
  position:relative;
+
padding: 0;
-
  margin:0;
+
-
  padding:0;
+
}
}
/* The main navigation links */
/* The main navigation links */
 +
.nav>li>a {
 +
/* Layout & positioning */
 +
display: block;
 +
width: 164.65px; /* 198 */
 +
padding: 11px 0px;
 +
border-right: 1px dotted #393939;
 +
border-left: 1px dotted #595959;
-
.nav>li>a
+
/* Typography */
-
{
+
font-family: Helvetica, Arial, sans-serif;
-
  /* Layout & positioning */
+
font-size: 15px;
 +
font-weight: normal;
 +
text-decoration: none;
 +
color: #fff;
 +
text-shadow: 0 1px 0 #2a2a2a;
 +
text-align: center;
-
 
+
/* Chaning the background on hover with a smooth transition */
-
  display:block;
+
-webkit-transition: background .35s linear;
-
  width:198px;
+
-moz-transition: background .35s linear;
-
  padding:11px 0px;
+
-ms-transition: background .35s linear;
-
  border-right:1px dotted #393939;
+
-o-transition: background .35s linear;
-
  border-left:1px dotted #595959;
+
transition: background .35s linear;
-
 
+
-
  /* 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 */
+
/* Chaning 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:#f2c100;
+
    border-bottom-color: #fff;
-
  left:100px;
+
    left: 80px;
-
  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;
-
  -moz-transition-duration:3000s;
+
    -ms-transition-duration: 3000s;
-
  -ms-transition-duration:3000s;
+
    -o-transition-duration: 3000s;
-
  -o-transition-duration:3000s;
+
    -webkit-transition-duration: 3000s;
-
  -webkit-transition-duration:3000s;
+
    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: 80px;
-
  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(1) ~ .arrow {
-
  left:300px;
+
    left: 247px;
}
}
-
.nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow  
+
.nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow {
-
{
+
    left: 414px;
-
  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(3) ~ .arrow {
-
{
+
    left: 580px;
-
  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(4) ~ .arrow {
-
{
+
    left: 747px;
-
  left:900px;
+
}
 +
.nav li:nth-child(6):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow {
 +
    left: 914px;
}
}
/* General styling for the submenus */
/* General styling for the submenus */
-
 
+
.nav ul {
-
.nav ul  
+
display: block;
-
{
+
position: absolute;
-
  display:block;
+
left: -9999px;
-
  position:absolute;
+
text-align: center;
-
  left:-9999px;
+
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-
  text-align:center;
+
-
  box-shadow:0 1px 2px rgba(0, 0, 0, .15);
+
}
}
/* Level 1 submenus */
/* Level 1 submenus */
-
 
+
.nav>li>ul {
-
.nav>li>ul  
+
cursor: pointer;
-
{
+
padding-top: 0px;
-
  cursor:pointer;
+
z-index: 200;
-
  padding-top:0px;
+
top: 43px;
-
  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 {
-
.nav>li:hover>ul  
+
left: -1px;
-
{
+
-
  left:-1px;
+
}
}
 +
/* The submenu link containers */
/* The submenu link containers */
-
 
+
.nav ul li {
-
.nav ul li  
+
position: relative;
-
 
+
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;
-
  height:0px;
+
-webkit-transition: height .2s;
-
  -webkit-transition:height .2s;
+
-moz-transition: height .2s;
-
  -moz-transition:height .2s;
+
-o-transition: height .2s;
-
  -o-transition:height .2s;
+
-ms-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 {
-
.nav li:hover>ul>li  
+
height: 24px;
-
{
+
-
  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 #f2c100;
+
}
}
-
.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;
-
  display:block;
+
   
-
  width:171px;
+
width: 136px; /* 169 */
-
  padding:6px 10px 6px 20px;
+
padding: 6px 12px 6px 20px;
/* Typography */
/* Typography */
-
 
+
font-size: 13px;
-
  font-size:12px;
+
color: #01256e;
-
  color:#999;
+
font-family: Helvetica, Arial, sans-serif;
-
  font-family:Helvetica, Arial, sans-serif;
+
text-decoration: none;
-
  text-decoration:none;
+
background: #f0f0f0;
-
  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: "";
-
  content:"";  
+
display: block;
-
  display:block;
+
position: absolute;
-
  position:absolute;
+
text-align: center;
-
  text-align:center;
+
width: 100%;
-
  width:100%;
+
height: 12px;
-
  height:6px;
+
background: transparent;
-
  background:transparent;
+
top: -8px;
-
  top:-6px;
+
left: 0;
-
  left:0;
+
z-index: 9999;
-
  z-index:9999;
+
}
}
/* The hover state of the links */
/* The hover state of the links */
 +
.nav ul li:hover>a, .nav ul li>a:hover {
 +
background: #c8c8c8; /*e7e7e7 */
 +
color: #01256e;
 +
}
-
.nav ul li:hover>a, .nav ul li>a:hover
+
/* Changing the color of the arrow on hover */
-
{
+
.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
-
  background:#e7e7e7;
+
border-left-color: #fff;
-
  color:#f2c100;
+
}
}
-
/* Changing the color of the arrow on hover */
+
.nav>li>ul>li
 +
{
 +
  margin-bottom: 0
 +
}
 +
 
 +
 
 +
.nav>li:first-child:hover>ul
 +
{
 +
 
 +
  left:0px;
 +
 
 +
}
 +
 
 +
.nav>li:last-child:hover>ul
 +
{
 +
left:-2px;
 +
}
 +
 
 +
.tableCSS
 +
{
 +
background-color:#01256e;
 +
width:1000px;
-
.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after
 
-
{
 
-
  border-left-color:#f2c100;
 
}
}

Latest revision as of 13:36, 26 October 2012

/* Some stylesheet reset */ .nav, .nav ul { margin: 0; padding: 0; list-style: none; line-height: 1; z-index: 9999999; }

/* The top navigation menu */ .nav { /* Layout & positioning */ display: block; position: relative; width: 1000px; height: 43px; border-bottom: 3px solid #fff; /* 45c3f2 */ border-top-left-radius: 3px; border-top-right-radius: 3px;

/* Background & effects */ 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: 164.65px; /* 198 */ padding: 11px 0px; border-right: 1px dotted #393939; border-left: 1px dotted #595959;

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

/* Chaning 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; }

/* Chaning 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: 80px;
   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: 80px;

}

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

   left: 247px;

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

   left: 414px;

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

   left: 580px;

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

   left: 747px;

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

   left: 914px;

}

/* 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: 136px; /* 169 */ padding: 6px 12px 6px 20px;

/* Typography */ font-size: 13px; color: #01256e; 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: 12px; background: transparent; top: -8px; left: 0; z-index: 9999; }


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

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

.nav>li>ul>li { 

 margin-bottom: 0

}


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

 left:0px;

}

.nav>li:last-child:hover>ul { left:-2px; }

.tableCSS { background-color:#01256e; width:1000px;

}

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