Team:NYMU-Taipei/menu.css
From 2014.igem.org
(77 intermediate revisions not shown) | |||
Line 10: | Line 10: | ||
} | } | ||
@font-face { font-family: 'font3'; font-style: normal; font-weight: 400; src: local('Just Another Hand'), local('JustAnotherHand-Regular'), url(http://fonts.gstatic.com/s/justanotherhand/v6/fKV8XYuRNNagXr38eqbRf8DbBFScDQWNirGEA9Q9Yto.woff) format('woff'); } | @font-face { font-family: 'font3'; font-style: normal; font-weight: 400; src: local('Just Another Hand'), local('JustAnotherHand-Regular'), url(http://fonts.gstatic.com/s/justanotherhand/v6/fKV8XYuRNNagXr38eqbRf8DbBFScDQWNirGEA9Q9Yto.woff) format('woff'); } | ||
- | + | #background{ | |
+ | z-index: -999; | ||
+ | min-width: 1100px; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | } | ||
#menu{ | #menu{ | ||
position:fixed; | position:fixed; | ||
Line 16: | Line 24: | ||
height:50px; | height:50px; | ||
background: rgba(255,255,255,1); | background: rgba(255,255,255,1); | ||
- | margin-top: | + | margin-top: 510px; |
left:50%; | left:50%; | ||
margin-left:-550px; | margin-left:-550px; | ||
Line 27: | Line 35: | ||
margin-left: 5px; | margin-left: 5px; | ||
margin-right: 5px; | margin-right: 5px; | ||
+ | text-align: center; | ||
} | } | ||
Line 36: | Line 45: | ||
font: 20px font1; | font: 20px font1; | ||
line-height: 50px; | line-height: 50px; | ||
+ | position:relative | ||
} | } | ||
#menu>ul>li>a{ | #menu>ul>li>a{ | ||
Line 55: | Line 65: | ||
opacity:0; | opacity:0; | ||
} | } | ||
- | #menu>ul>li>ul>li | + | #menu>ul>li>ul>li>span{ |
height: 10px; | height: 10px; | ||
width: 10px; | width: 10px; | ||
background-color: rgb(160, 33, 245); | background-color: rgb(160, 33, 245); | ||
display: none; | display: none; | ||
- | + | position: absolute; | |
- | + | top: 40%; | |
+ | left: 0; | ||
} | } | ||
Line 69: | Line 80: | ||
width:172px; | width:172px; | ||
display:none; | display:none; | ||
- | background: rgb( | + | background: rgb(222, 233, 253); |
} | } | ||
Line 75: | Line 86: | ||
height:40px; | height:40px; | ||
width:162px; | width:162px; | ||
+ | cursor: default; | ||
vertical-align:middle; | vertical-align:middle; | ||
- | font: | + | font: 15px cursive; |
line-height: 40px; | line-height: 40px; | ||
margin: 0 auto; | margin: 0 auto; | ||
list-style: none; | list-style: none; | ||
+ | position:relative | ||
} | } | ||
- | |||
#menu>ul>li>ul>li>a{ | #menu>ul>li>ul>li>a{ | ||
display:block; | display:block; | ||
- | + | cursor:pointer; | |
height:40px; | height:40px; | ||
text-align: center; | text-align: center; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
+ | #menu>ul>li>ul>li>ul>li>span{ | ||
+ | height: 10px; | ||
+ | width: 10px; | ||
+ | background-color: rgb(160, 33, 245); | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | left: 10px; | ||
+ | } | ||
+ | #menu>ul>li>ul>li>ul{ | ||
+ | position: absolute; | ||
+ | left: 100%; | ||
+ | top:0; | ||
+ | list-style: none; | ||
+ | line-height: 40px; | ||
+ | width: 0px; | ||
+ | margin-left:0px; | ||
+ | background: rgb(222, 233, 253); | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #menu>ul>li>ul>li>ul>li{ | ||
+ | position:relative; | ||
+ | } | ||
+ | #menu>ul>li>ul>li>ul>li>a{ | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | } | ||
.header{ | .header{ | ||
- | height: | + | height: 560px; |
- | + | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: 20% 40px; | background-position: 20% 40px; | ||
Line 99: | Line 137: | ||
overflow:hidden; | overflow:hidden; | ||
} | } | ||
+ | |||
+ | #headspace{ | ||
+ | position: relative; | ||
+ | height: 500px; | ||
+ | margin-bottom: -500px; | ||
+ | } | ||
+ | |||
+ | #menu4home{ | ||
+ | position:relative; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | #menu4home>a{ | ||
+ | position:absolute; | ||
+ | } | ||
+ | #menu4home>a:nth-of-type(1){ | ||
+ | margin-left: 39.5%; | ||
+ | margin-top: 19.4%; | ||
+ | width:5.6%; | ||
+ | } | ||
+ | #menu4home>a:nth-of-type(2){ | ||
+ | margin-left: 44.3%; | ||
+ | margin-top: 23%; | ||
+ | width:5.95%; | ||
+ | } | ||
+ | #menu4home>a:nth-of-type(3){ | ||
+ | margin-left: 49.3%; | ||
+ | margin-top: 24.5%; | ||
+ | width:7.9%; | ||
+ | } | ||
+ | #menu4home>a:nth-of-type(4){ | ||
+ | margin-left: 56%; | ||
+ | margin-top: 29%; | ||
+ | width:7.5%; | ||
+ | } | ||
+ | #menu4home>a:nth-of-type(5){ | ||
+ | margin-left: 63.3%; | ||
+ | margin-top: 29%; | ||
+ | width:7.6%; | ||
+ | } | ||
+ | #menu4home>a>img{ | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | .teethS{ | ||
+ | position:absolute; | ||
+ | display:none; | ||
+ | } | ||
+ | .teethS:nth-child(1){ | ||
+ | margin-left: 37%; | ||
+ | margin-top: 17%; | ||
+ | } | ||
+ | .teethS:nth-child(2){ | ||
+ | margin-left: 45%; | ||
+ | margin-top: 20%; | ||
+ | } | ||
+ | .teethS:nth-child(3){ | ||
+ | margin-left: 48%; | ||
+ | margin-top: 23%; | ||
+ | } | ||
+ | .teethS:nth-child(4){ | ||
+ | margin-left: 55%; | ||
+ | margin-top: 28%; | ||
+ | } | ||
+ | .teethS:nth-child(5){ | ||
+ | margin-left: 62%; | ||
+ | margin-top: 27%; | ||
+ | } | ||
+ | |||
#cloud{ | #cloud{ | ||
position: absolute; | position: absolute; | ||
Line 126: | Line 232: | ||
} | } | ||
.outlink{ | .outlink{ | ||
- | background-size: | + | background-size:contain; |
- | + | height: 25%; | |
- | + | width: 10%; | |
display: inline-block; | display: inline-block; | ||
position: absolute; | position: absolute; | ||
z-index: 1; | z-index: 1; | ||
border-radius:12px; | border-radius:12px; | ||
+ | background-repeat: no-repeat; | ||
} | } | ||
.outlink:hover{ | .outlink:hover{ | ||
- | + | height: 28%; | |
+ | width: 11%; | ||
} | } | ||
Line 149: | Line 257: | ||
top: 120px; | top: 120px; | ||
cursor:move; | cursor:move; | ||
+ | } | ||
+ | #jumpup{ | ||
+ | display: inline-block; | ||
+ | position: fixed; | ||
+ | z-index: 98; | ||
+ | bottom: 15px; | ||
+ | right: 0px; | ||
+ | cursor:pointer; | ||
+ | width: 80px; | ||
+ | } | ||
+ | #jumpup div.pic { | ||
+ | background: url('/wiki/images/7/7b/NYMU14_toothy.gif') no-repeat; | ||
+ | background-size: 45px; | ||
+ | height: 50px; | ||
+ | width: 50px; | ||
+ | margin-left: 16px; | ||
+ | } | ||
+ | #jumpup div.infotop { | ||
+ | display: none; | ||
+ | background: url('/wiki/images/3/3f/NYMU14_Backtotop.png') no-repeat; | ||
+ | background-size: 90px; | ||
+ | height: 40px; | ||
+ | width: 80px; | ||
} | } | ||
#dialog>p{ | #dialog>p{ | ||
Line 212: | Line 343: | ||
cursor:text; | cursor:text; | ||
} | } | ||
- | #ol1{ background-image: url('/wiki/images/ | + | #ol1{ background-image: url('/wiki/images/9/91/NYMU14_nymu.png');} |
- | #ol2{ background-image: url('/wiki/images/ | + | #ol2{ background-image: url('/wiki/images/2/2c/NYMU14_igem.png');} |
- | #ol3{ background-image: url('/wiki/images/ | + | #ol3{ background-image: url('/wiki/images/e/e8/NYMU14_fb.png');} |
Line 241: | Line 372: | ||
*/ | */ | ||
#home-video{ | #home-video{ | ||
+ | top: -75px; | ||
+ | left: 5px; | ||
+ | position: relative; | ||
width: 520px; | width: 520px; | ||
height: 320px; | height: 320px; | ||
Line 253: | Line 387: | ||
text-align: justify; | text-align: justify; | ||
display: inline-block; | display: inline-block; | ||
- | margin-left: | + | margin-left: 30px; |
- | color: rgba(255,255,255,0. | + | margin-top: 110px; |
+ | color: rgb(0, 0, 0); | ||
+ | background: rgba(255,255,255,0.9); | ||
+ | padding: 10px; | ||
} | } | ||
#home-intro>p{ | #home-intro>p{ | ||
width: 500px; | width: 500px; | ||
+ | } | ||
+ | #hand1{ | ||
+ | position: absolute; | ||
+ | left: -19.5%; | ||
+ | top: -20%; | ||
} | } | ||
/**/ | /**/ |
Latest revision as of 20:06, 16 October 2014
@font-face {
font-family: "font1"; src: url('/wiki/images/5/53/Proximanova-semibold-webfont.txt') format("woff");
} @font-face {
font-family: 'font2'; font-style: normal; font-weight: 400; src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
} @font-face { font-family: 'font3'; font-style: normal; font-weight: 400; src: local('Just Another Hand'), local('JustAnotherHand-Regular'), url(http://fonts.gstatic.com/s/justanotherhand/v6/fKV8XYuRNNagXr38eqbRf8DbBFScDQWNirGEA9Q9Yto.woff) format('woff'); }
- background{
z-index: -999; min-width: 1100px; width: 100%; height: auto; position: absolute; top: 0; left: 0; }
- menu{
position:fixed; width:1100px; height:50px;
background: rgba(255,255,255,1);
margin-top: 510px;
left:50%; margin-left:-550px;
box-shadow: 2px 2px 7px rgba(0,0,0,1);
z-index:3;
}
- menu>ul{
height:50px; margin-left: 5px; margin-right: 5px;
text-align: center;
}
- menu>ul>li{
display:inline-block; height:50px; width:152px; vertical-align:middle; font: 20px font1; line-height: 50px;
position:relative
}
- menu>ul>li>a{
display:block; cursor: pointer;
width:152px;
height:50px; text-align: center; text-decoration: none; }
- menu>ul>li>a>span{
position: absolute; width: 140px; height: 4px; border-top: 3px solid #E617DD; display: block; margin-top: 38px; margin-left: 5px;
opacity:0;
}
- menu>ul>li>ul>li>span{
height: 10px;
width: 10px;
background-color: rgb(160, 33, 245); display: none; position: absolute; top: 40%;
left: 0;
}
- menu>ul>li>ul{
margin-top: 0px; margin-left: 0px;
width:172px; display:none; background: rgb(222, 233, 253);
}
- menu>ul>li>ul>li{
height:40px;
width:162px; cursor: default;
vertical-align:middle; font: 15px cursive; line-height: 40px;
margin: 0 auto; list-style: none; position:relative
}
- menu>ul>li>ul>li>a{
display:block;
cursor:pointer;
height:40px; text-align: center; text-decoration: none; }
- menu>ul>li>ul>li>ul>li>span{
height: 10px;
width: 10px;
background-color: rgb(160, 33, 245); display: none; position: absolute; top: 40%;
left: 10px;
}
- menu>ul>li>ul>li>ul{
position: absolute; left: 100%; top:0; list-style: none; line-height: 40px; width: 0px; margin-left:0px; background: rgb(222, 233, 253); overflow:hidden;
}
- menu>ul>li>ul>li>ul>li{
position:relative;
}
- menu>ul>li>ul>li>ul>li>a{
display: block; text-decoration: none;
}
.header{
height: 560px; background-repeat: no-repeat; background-position: 20% 40px; background-size: 430px; position:relative; overflow:hidden;
}
- headspace{
position: relative; height: 500px; margin-bottom: -500px;
}
- menu4home{
position:relative; z-index: 3;
}
- menu4home>a{
position:absolute;
}
- menu4home>a:nth-of-type(1){
margin-left: 39.5%; margin-top: 19.4%; width:5.6%;
}
- menu4home>a:nth-of-type(2){
margin-left: 44.3%; margin-top: 23%; width:5.95%;
}
- menu4home>a:nth-of-type(3){
margin-left: 49.3%; margin-top: 24.5%; width:7.9%;
}
- menu4home>a:nth-of-type(4){
margin-left: 56%; margin-top: 29%; width:7.5%;
}
- menu4home>a:nth-of-type(5){
margin-left: 63.3%; margin-top: 29%; width:7.6%;
}
- menu4home>a>img{
width:100%;
}
.teethS{
position:absolute; display:none;
} .teethS:nth-child(1){
margin-left: 37%; margin-top: 17%;
} .teethS:nth-child(2){
margin-left: 45%; margin-top: 20%;
} .teethS:nth-child(3){
margin-left: 48%; margin-top: 23%;
} .teethS:nth-child(4){
margin-left: 55%; margin-top: 28%;
} .teethS:nth-child(5){
margin-left: 62%; margin-top: 27%;
}
- cloud{
position: absolute; z-index: 1; width: 550px; height: 380px; background: url('/wiki/images/c/cd/NYMU14_bg2.png'); background-size: 100%; top: -85px; left: 58%;
}
- cloud>div{
position: absolute; width: 74%; height: 85%; left: 13%; cursor:pointer;
}
- header-nymu{
font-family: 'Quattrocento', serif; position: absolute; left: 66%; top: 190px; color: rgb(255, 245, 129); font-size: 24px; font-weight: 700;
} .outlink{
background-size:contain; height: 25%; width: 10%; display: inline-block; position: absolute; z-index: 1; border-radius:12px; background-repeat: no-repeat;
} .outlink:hover{
height: 28%; width: 11%;
}
- toothy{
display: inline-block; min-height: 100px; min-width: 95px; background: url('/wiki/images/7/7b/NYMU14_toothy.gif') no-repeat; background-size: 92px; position: fixed; z-index: 99; left: 920px; top: 120px; cursor:move;
}
- jumpup{
display: inline-block; position: fixed; z-index: 98; bottom: 15px; right: 0px; cursor:pointer; width: 80px;
}
- jumpup div.pic {
background: url('/wiki/images/7/7b/NYMU14_toothy.gif') no-repeat; background-size: 45px; height: 50px; width: 50px; margin-left: 16px;
}
- jumpup div.infotop {
display: none; background: url('/wiki/images/3/3f/NYMU14_Backtotop.png') no-repeat; background-size: 90px; height: 40px; width: 80px;
}
- dialog>p{
width:100%;
}
- convopen{
position: absolute; margin-left: 100px; width: 50px; background-color: rgba(177, 243, 243, 0.7); box-shadow: 1px 1px 4px rgba(0,0,0,0.6); border-radius: 10px; text-align: center; font-weight: 900; line-height: 30px; display:none; cursor:pointer;
}
- convblank{
position: absolute; margin-left: 100px; margin-top: -50px;
}
- qnaNextBt,#qnaPrevBt{
height: 25px; width: 70px; font-size: 18px; text-align: center; line-height: 25px; border: 1px solid; border-radius: 8px; float: right; margin-top: -30px; box-shadow: 0px 0px 3px; cursor: pointer;
}
- qnaNextBt{
margin-right: 3px;
}
- qnaPrevBt{
margin-right: 80px;
}
- qnaClose{
position: relative; float: right; right: 10px; top: 5px; border-radius: 7px; background-color: rgba(0, 92, 255, 0.5); width: 20px; cursor: pointer; text-align: center; font-weight: 900; border: solid 1px;
}
- dialog{
width: 250px; background-color: rgba(177, 243, 243, 0.7); box-shadow: 1px 1px 4px rgba(0,0,0,0.6); border-radius: 10px; padding: 20px 6px 30px 6px; cursor:text;
}
- ol1{ background-image: url('/wiki/images/9/91/NYMU14_nymu.png');}
- ol2{ background-image: url('/wiki/images/2/2c/NYMU14_igem.png');}
- ol3{ background-image: url('/wiki/images/e/e8/NYMU14_fb.png');}
/*home css*/
/*
.home1{
min-height: 400px; min-width: 1000px; margin-left: -250px; padding-left:250px;
} .home1>p{
margin-left: 20px; text-align: justify; padding-top: 30px; width: 1000px;
}
- home-one{
background-color: rgb(190,190,190); box-shadow: -4px -4px 3px rgba(20%,20%,40%,1);
}
- home-two{
background-color: rgb(245,245,245); box-shadow: inset 3px 3px 3px rgba(20%,20%,40%,0.5);
}
- /
- home-video{
top: -75px; left: 5px; position: relative; width: 520px; height: 320px; display: inline-block; margin-top: 100px; margin-left: -40px; background-color: rgba(255,255,255,0.85); transform: rotate(-5deg);
}
- home-intro{
width: 500px; text-align: justify; display: inline-block; margin-left: 30px; margin-top: 110px; color: rgb(0, 0, 0); background: rgba(255,255,255,0.9); padding: 10px;
}
- home-intro>p{
width: 500px;
}
- hand1{
position: absolute; left: -19.5%; top: -20%;
} /**/