Difference between revisions of "Template:Team:CHINA CD UESTC/menu"

Line 1: Line 1:
 
{{CSS/Main}}
 
{{CSS/Main}}
 +
<style type="text/css">
 +
.unselect {
 +
-moz-user-select: all;
 +
-webkit-user-select: all;
 +
-ms-user-select: all;
 +
-o-user-select: all;
 +
user-select: all;
 +
}
 +
.ir {
 +
font: 0/0 a;
 +
text-shadow: none;
 +
color: transparent;
 +
}
 +
.clearfix:after {
 +
content: ".";
 +
display: block;
 +
clear: both;
 +
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
.clearfix {
 +
display: inline-block;
 +
}
 +
html[xmlns] .clearfix {
 +
display: block;
 +
}
 +
* html .clearfix {
 +
height: 1%;
 +
}
 +
.middleHack {
 +
zoom: 1;
 +
}
 +
.ib {
 +
display: -moz-inline-stack !important;
 +
display: inline-block !important;
 +
vertical-align: top;
 +
}
 +
.ibIe {
 +
display: inline !important;
 +
zoom: 1;
 +
}
 +
.lt-ie8 .ib {
 +
display: inline !important;
 +
zoom: 1;
 +
}
 +
.bgCover {
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
 +
.clear {
 +
clear: both;
 +
display: block;
 +
}
 +
.translate3d {
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-moz-transform: translate3d(0, 0, 0);
 +
-ms-transform: translate3d(0, 0, 0);
 +
-o-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
}
 +
.translate {
 +
-webkit-transform: translate(0, 0);
 +
-moz-transform: translate3d(0, 0);
 +
-ms-transform: translate3d(0, 0);
 +
-o-transform: translate3d(0, 0);
 +
transform: translate3d(0, 0);
 +
}
 +
.noflick {
 +
-webkit-backface-visibility: hidden;
 +
}
 +
a img {
 +
border: none;
 +
}
 +
body {
 +
background: #2d2c41;
 +
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 +
}
 +
/* ----------------------------
 +
            menu
 +
-----------------------------*/
 +
ul {
 +
list-style-type: none !important;
 +
}
 +
li {
 +
list-style-type: none !important;
 +
}
 +
.accordion {
 +
width: 100%;
 +
max-width: 180px;
 +
background: #303030;
 +
-webkit-border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
border-radius: 4px;
 +
list-style-type: none !important;
 +
margin-left:40px;
 +
}
 +
.accordion li {
 +
list-style-type: none !important;
 +
list-style: none;
 +
}
 +
.accordion .link {
 +
cursor: pointer;
 +
display: block;
 +
padding: 6px 6px 6px 30px;
 +
color: #FFF;
 +
font-size: 17px;
 +
font-weight: 700;
 +
border-bottom: 1px solid #CCC;
 +
position: relative;
 +
}
 +
.accordion li:last-child .link {
 +
border-bottom: 0;
 +
}
 +
.accordion li.open .link {
 +
color: #FFE153;
 +
}
 +
.submenu {
 +
display: none;
 +
background: #444359;
 +
font-size: 5px;
 +
list-style-type: none !important;
 +
}
 +
.submenu li {
 +
border-bottom: 1px solid #4b4a5e;
 +
list-style-type: none !important;
 +
list-style: none;
 +
}
 +
.submenu a {
 +
display: block;
 +
text-decoration: none;
 +
color: #d9d9d9;
 +
}
 +
.submenu a:hover {
 +
background: #b63b4d;
 +
color: #FFF;
 +
}
 +
#menuHome {
 +
color: #FFF;
 +
font-size: 17px;
 +
margin-right: 60px;
 +
}
 +
#menuHome:hover {
 +
color: #FFE153;
 +
}
 +
/*.overflow {  overflow: hidden;}*/
 +
.bgwidth {
 +
width: 100%;
 +
}
 +
.bgheight {
 +
height: 100%;
 +
}
 +
aside {
 +
width: 260px;
 +
height:100%;
 +
background-color:#000;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
z-index: 11111111;
 +
-webkit-transition: all 200ms ease-out;
 +
-moz-transition: all 200ms ease-out;
 +
-ms-transition: all 200ms ease-out;
 +
-o-transition: all 200ms ease-out;
 +
transition: all 200ms ease-out;
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-moz-transform: translate3d(0, 0, 0);
 +
-ms-transform: translate3d(0, 0, 0);
 +
-o-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
text-decoration:none;
 +
 +
}
 +
 +
aside #logo {
 +
text-indent: -6000px;
 +
margin: 0px 32px 0px 32px;
 +
display: block;
 +
}
 +
aside #logo img {
 +
display: block;
 +
text-decoration:none;
 +
width: 100%;
 +
}
 +
aside .separator {
 +
background: url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg") no-repeat top left transparent;
 +
display: block;
 +
zoom: 1;
 +
background-position: -23px -296px;
 +
width: 143px;
 +
height: 3px;
 +
text-indent: -6000px;
 +
text-align: left;
 +
margin: 25px auto;
 +
}
 +
aside nav {
 +
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 +
padding:0 0 0 0 px;
 +
}
 +
aside nav a {
 +
color: #ddd7d7;
 +
line-height: 40px;
 +
text-align: center;
 +
text-decoration: none;
 +
font-size: 23px;
 +
display: block;
 +
letter-spacing: 2px;
 +
}
 +
 +
* {
 +
margin: 0;
 +
padding: 0;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
}
 +
.no-touch * {
 +
-webkit-touch-callout: all;
 +
-webkit-user-select: all;
 +
-khtml-user-select: all;
 +
-moz-user-select: all;
 +
-ms-user-select: all;
 +
user-select: all;
 +
}
 +
div, h1, h2, h3, h4, span, p, img, a {
 +
-webkit-touch-callout: all;
 +
-webkit-user-select: all;
 +
-khtml-user-select: all;
 +
-moz-user-select: all;
 +
-ms-user-select: all;
 +
user-select: all;
 +
}
 +
h1, h2, h3, h4, h5, h6 {
 +
  color: black;
 +
  background: none;
 +
  font-weight: normal;
 +
  margin: 0;
 +
  padding-top: .5em;
 +
  padding-bottom: .17em;
 +
  border-bottom:none;
 +
}
 +
a {
 +
color: #FFFFFF;
 +
text-decoration: none;
 +
}
 +
.fa {
 +
text-shadow: rgba(0,0,0,0.01) 0 0 1px;
 +
}
 +
img {
 +
user-select: none;
 +
user-drag: none;
 +
}
 +
html, body {
 +
min-height: 100%;
 +
width: 100%;
 +
height: 100%;
 +
background: #000000;
 +
overflow: hidden;
 +
color: #ffffff;
 +
font-family: 'din-condensed-web';
 +
font-size: 14px;
 +
font-weight: 400;
 +
}
 +
.owl-wrapper-outer, .owl-wrapper, .owl-item {
 +
height: 100%;
 +
}
 +
.fullBg {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 +
}
 +
.fullBg.display {
 +
display: block;
 +
}
 +
.layoutHide {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
width: 0%;
 +
background: #000000;
 +
z-index: 40;
 +
-webkit-transform: translate3d(0, 0, 0);
 +
-moz-transform: translate3d(0, 0, 0);
 +
-ms-transform: translate3d(0, 0, 0);
 +
-o-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
-webkit-backface-visibility: hidden;
 +
background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;
 +
}
 +
 +
.touch .video .close {
 +
top: 20px;
 +
right: 20px;
 +
}
 +
@media screen and (max-height: 780px) {
 +
html body aside #logo {
 +
margin-top: 0px;
 +
margin-bottom:0px;
 +
}
 +
html body aside nav a {
 +
line-height: 35px;
 +
font-size: 18px;
 +
}
 +
html body aside .separator {
 +
margin: 20px auto;
 +
}
 +
html body aside .contact {
 +
font-size: 18px;
 +
}
 +
}
 +
@media screen and (max-height: 680px) {
 +
html body aside #logo {
 +
margin-top: 0px;
 +
margin-bottom: 0px;
 +
}
 +
html body aside nav a {
 +
line-height: 31px;
 +
font-size: 18px;
 +
}
 +
html body aside .separator {
 +
margin: 10px auto;
 +
}
 +
}
 +
@media screen and (max-width: 1050px) {
 +
html aside {
 +
width: 200px;
 +
}
 +
html aside #logo {
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
}
 +
html #RightContent {
 +
left: 200px;
 +
}
 +
}
 +
@media screen and (max-width: 700px) {
 +
html aside {
 +
left: -200px;
 +
 +
}
 +
html aside #mobileMenuButton {
 +
display: block;
 +
}
 +
html #RightContent {
 +
left: 0;
 +
right: auto;
 +
width: 100%;
 +
    height:100%;
 +
}
 +
}
 +
/*float RightContent*/
 +
#content {
 +
width:auto;
 +
height: 2000px;
 +
 +
}
 +
 +
.firstHeading {
 +
display: none;
 +
}
 +
#top {
 +
display: none;
 +
}
 +
h1 {
 +
text-decoration:none;
 +
font-size:100%;}
 +
</style>
 +
 
<html>
 
<html>
 
<aside>
 
<aside>

Revision as of 03:02, 21 May 2015

<style type="text/css"> .unselect { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; -o-user-select: all; user-select: all; } .ir { font: 0/0 a; text-shadow: none; color: transparent; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; }

  • html .clearfix {

height: 1%; } .middleHack { zoom: 1; } .ib { display: -moz-inline-stack !important; display: inline-block !important; vertical-align: top; } .ibIe { display: inline !important; zoom: 1; } .lt-ie8 .ib { display: inline !important; zoom: 1; } .bgCover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .clear { clear: both; display: block; } .translate3d { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .translate { -webkit-transform: translate(0, 0); -moz-transform: translate3d(0, 0); -ms-transform: translate3d(0, 0); -o-transform: translate3d(0, 0); transform: translate3d(0, 0); } .noflick { -webkit-backface-visibility: hidden; } a img { border: none; } body { background: #2d2c41; font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma; } /* ---------------------------- 

            menu
-----------------------------*/

ul { list-style-type: none !important; } li { list-style-type: none !important; } .accordion { width: 100%; max-width: 180px; background: #303030; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; list-style-type: none !important; margin-left:40px; } .accordion li { list-style-type: none !important; list-style: none; } .accordion .link { cursor: pointer; display: block; padding: 6px 6px 6px 30px; color: #FFF; font-size: 17px; font-weight: 700; border-bottom: 1px solid #CCC; position: relative; } .accordion li:last-child .link { border-bottom: 0; } .accordion li.open .link { color: #FFE153; } .submenu { display: none; background: #444359; font-size: 5px; list-style-type: none !important; } .submenu li { border-bottom: 1px solid #4b4a5e; list-style-type: none !important; list-style: none; } .submenu a { display: block; text-decoration: none; color: #d9d9d9; } .submenu a:hover { background: #b63b4d; color: #FFF; }

  1. menuHome {

color: #FFF; font-size: 17px; margin-right: 60px; }

  1. menuHome:hover {

color: #FFE153; } /*.overflow { overflow: hidden;}*/ .bgwidth { width: 100%; } .bgheight { height: 100%; } aside { width: 260px; height:100%; background-color:#000; position: absolute; top: 0; left: 0; bottom: 0; z-index: 11111111; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); text-decoration:none;

}

aside #logo { text-indent: -6000px; margin: 0px 32px 0px 32px; display: block; } aside #logo img { display: block; text-decoration:none; width: 100%; } aside .separator { background: url("CD_UESTC_Separator.jpg") no-repeat top left transparent; display: block; zoom: 1; background-position: -23px -296px; width: 143px; height: 3px; text-indent: -6000px; text-align: left; margin: 25px auto; } aside nav { font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma; padding:0 0 0 0 px; } aside nav a { color: #ddd7d7; line-height: 40px; text-align: center; text-decoration: none; font-size: 23px; display: block; letter-spacing: 2px; }

  • {

margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .no-touch * { -webkit-touch-callout: all; -webkit-user-select: all; -khtml-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } div, h1, h2, h3, h4, span, p, img, a { -webkit-touch-callout: all; -webkit-user-select: all; -khtml-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } h1, h2, h3, h4, h5, h6 { 

 color: black;
 background: none;
 font-weight: normal;
 margin: 0;
 padding-top: .5em;
 padding-bottom: .17em;
 border-bottom:none;

} a { color: #FFFFFF; text-decoration: none; } .fa { text-shadow: rgba(0,0,0,0.01) 0 0 1px; } img { user-select: none; user-drag: none; } html, body { min-height: 100%; width: 100%; height: 100%; background: #000000; overflow: hidden; color: #ffffff; font-family: 'din-condensed-web'; font-size: 14px; font-weight: 400; } .owl-wrapper-outer, .owl-wrapper, .owl-item { height: 100%; } .fullBg { position: absolute; top: 0; left: 0; display: none; } .fullBg.display { display: block; } .layoutHide { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: #000000; z-index: 40; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent; }

.touch .video .close { top: 20px; right: 20px; } 

@media screen and (max-height: 780px) {

html body aside #logo { margin-top: 0px; margin-bottom:0px; } html body aside nav a { line-height: 35px; font-size: 18px; } html body aside .separator { margin: 20px auto; } html body aside .contact { font-size: 18px; } } @media screen and (max-height: 680px) { html body aside #logo { margin-top: 0px; margin-bottom: 0px; } html body aside nav a { line-height: 31px; font-size: 18px; } html body aside .separator { margin: 10px auto; } } @media screen and (max-width: 1050px) { html aside { width: 200px; } html aside #logo { margin-left: 20px; margin-right: 20px; } html #RightContent { left: 200px; } } @media screen and (max-width: 700px) { html aside { left: -200px;

} html aside #mobileMenuButton { display: block; } html #RightContent { left: 0; right: auto; width: 100%; 

    height:100%;

} } /*float RightContent*/

  1. content {

width:auto; height: 2000px;

}

.firstHeading { display: none; }

  1. top {

display: none; } h1 { text-decoration:none; font-size:100%;} </style>