Template:Team:Leeds TopSectionHeader

From 2013.igem.org

(Difference between revisions)
m
m
 
(30 intermediate revisions not shown)
Line 7: Line 7:
font-size: 0;
font-size: 0;
         border-radius: 5px;
         border-radius: 5px;
-
        line-height: 17px;
 
top: 5px;
top: 5px;
         list-style: none;
         list-style: none;
         padding: 5px 10px;
         padding: 5px 10px;
-
left: 33%;
+
left: 25%;
-
         background: #5f5f5f;
+
         background: #55594a;
-
         color: pink;
+
         color: #e5ede6;
margin: none;
margin: none;
         border: none;
         border: none;
Line 25: Line 24:
#dropdown li {
#dropdown li {
position: relative;
position: relative;
-
         vertical-align: text-top;
+
        line-height: 17px;
 +
         vertical-align: middle;
}
}
Line 34: Line 34:
#dropdown li a:active {
#dropdown li a:active {
-
background-color: purple !important;
+
background-color: #330000 !important;
}
}
/* first level */
/* first level */
#dropdown > ul {
#dropdown > ul {
-
background: #5f5f5f;
+
background: #55594a;
         color: transparent;  /* bullet point colours - set to transparent */
         color: transparent;  /* bullet point colours - set to transparent */
         padding: 0px;
         padding: 0px;
Line 47: Line 47:
#dropdown > ul > li { /* Menubox settings */
#dropdown > ul > li { /* Menubox settings */
-
width: 150px;
+
width: auto;
height: 100%;
height: 100%;
         top: -2px;    /* Border overlap fix, 0 if no border */
         top: -2px;    /* Border overlap fix, 0 if no border */
  float: left;
  float: left;
 +
        left: 0px;
}
}
#dropdown > ul > li > a { /* Menubox settings */
#dropdown > ul > li > a { /* Menubox settings */
height: 100%;
height: 100%;
-
         width: auto;
+
         width: 150px;
         padding: 5px 0px;
         padding: 5px 0px;
 +
        left: 0px;
         border-top-left-radius: 5px;
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
         border-top-right-radius: 5px;
-
         vertical-align: center;
+
         vertical-align: middle;
font-size: 10pt;
font-size: 10pt;
         text-decoration: none;
         text-decoration: none;
Line 75: Line 77:
#dropdown > ul > li:hover > a,
#dropdown > ul > li:hover > a,
#dropdown > ul:not( :hover ) > li.active > a { /*Menubox rollover settings */
#dropdown > ul:not( :hover ) > li.active > a { /*Menubox rollover settings */
-
background-color: purple;
+
background-color: #330000;
         height: 17px;
         height: 17px;
         -webkit-transition: all 1s ease-in-out;
         -webkit-transition: all 1s ease-in-out;
Line 85: Line 87:
/* second level */
/* second level */
#dropdown li ul {  /* Drop-down pre-rollover settings */
#dropdown li ul {  /* Drop-down pre-rollover settings */
-
background-color: purple; /* Set to match parent rollover */
+
background-color: #330000; /* Set to match parent rollover */
display: none;
display: none;
 +
        list-style: none;
         text-indent: none;
         text-indent: none;
font-family: 'AlteHaasGrotesk', verdana;
font-family: 'AlteHaasGrotesk', verdana;
-
        list-style: none;
 
         border: none;
         border: none;
         margin-left: 0px;
         margin-left: 0px;
Line 106: Line 108:
#dropdown li ul a { /* Drop-down pre-rollover settings */
#dropdown li ul a { /* Drop-down pre-rollover settings */
-
font-size: 8pt;
+
font-size: 10pt;
 +
        width: 70%;
border-top: none;  /*Border useful for highlights */  
border-top: none;  /*Border useful for highlights */  
padding: 15px 0px;  /* padding between sub-links */
padding: 15px 0px;  /* padding between sub-links */
Line 112: Line 115:
         text-decoration: none;
         text-decoration: none;
         text-indent: none;
         text-indent: none;
-
         text-align: left;
+
         text-align: right;
}
}
#dropdown li ul li a:hover,
#dropdown li ul li a:hover,
#dropdown li ul:not( :hover ) li.active a { /* Drop-down rollover settings */
#dropdown li ul:not( :hover ) li.active a { /* Drop-down rollover settings */
-
background-color: red;
+
background-color: #034f07;
-
         color: pink;
+
         color: #e5ede6;
-
         margin-left: -40px;
+
         margin-left: 0px;
 +
        width: 100%;
         -webkit-transition: all 1s ease-in-out;
         -webkit-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;
         -moz-transition: all 1s ease-in-out;

Latest revision as of 22:29, 4 October 2013

/* CSS styling for Dropdown Menu */

  1. dropdown {

width: auto; 

       height: 20px;
       position: absolute;

font-family: 'AlteHaasGroteskBold', verdana; font-size: 0; 

       border-radius: 5px;

top: 5px; 

       list-style: none;
       padding: 5px 10px;

left: 25%; 

       background: #55594a;
       color: #e5ede6;

margin: none; 

       border: none;
       z-index: 4;

}

  1. dropdown > a {

display: none; }

  1. dropdown li {

position: relative; 

       line-height: 17px;
       vertical-align: middle;

}

  1. dropdown li a {

color: #fff; /* Menubox link text color, before rollover */ display: block; }

  1. dropdown li a:active {

background-color: #330000 !important; }

/* first level */

  1. dropdown > ul {

background: #55594a; 

       color: transparent;  /* bullet point colours - set to transparent */
       padding: 0px;
       list-style: none;
       margin: none;

}

  1. dropdown > ul > li { /* Menubox settings */

width: auto; height: 100%; 

       top: -2px;    /* Border overlap fix, 0 if no border */
	float: left;
       left: 0px;

}

  1. dropdown > ul > li > a { /* Menubox settings */

height: 100%; 

       width: 150px;
       padding: 5px 0px;
       left: 0px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
       vertical-align: middle;

font-size: 10pt; 

       text-decoration: none;

text-align: center; 

       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;

}

  1. dropdown > ul > li:not( :last-child ) > a {

border: none; /*segregation border, good for highlight */ }

  1. dropdown > ul > li:hover > a,
  2. dropdown > ul:not( :hover ) > li.active > a { /*Menubox rollover settings */

background-color: #330000; 

       height: 17px;
       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;

}

/* second level */

  1. dropdown li ul { /* Drop-down pre-rollover settings */

background-color: #330000; /* Set to match parent rollover */ display: none; 

       list-style: none;
       text-indent: none;

font-family: 'AlteHaasGrotesk', verdana; 

       border: none;
       margin-left: 0px;

position: absolute; top: 100%; /* Prevents overlap with parent element */ }

  1. dropdown li:hover ul {

display: block; 

       right: 0px;

}

  1. dropdown li:not( :first-child ):hover ul {

left: 0px; /* only necessary if using border for parent */ }

  1. dropdown li ul a { /* Drop-down pre-rollover settings */

font-size: 10pt; 

       width: 70%;

border-top: none; /*Border useful for highlights */ padding: 15px 0px; /* padding between sub-links */ 

       margin: none;
       text-decoration: none;
       text-indent: none;
       text-align: right;

}

  1. dropdown li ul li a:hover,
  2. dropdown li ul:not( :hover ) li.active a { /* Drop-down rollover settings */

background-color: #034f07; 

       color: #e5ede6;
       margin-left: 0px;
       width: 100%;
       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;

}

Retrieved from "http://2013.igem.org/Template:Team:Leeds_TopSectionHeader"