Difference between revisions of "Template:TUST China/css/nav"

 
(12 intermediate revisions by the same user not shown)
Line 87: Line 87:
 
     margin: 0;/*清除默认样式*/
 
     margin: 0;/*清除默认样式*/
 
     padding: 0;
 
     padding: 0;
−
    height: 2000px;
+
 
     /*background-color: #17BEBB;*/
 
     /*background-color: #17BEBB;*/
 
}
 
}
Line 149: Line 149:
 
     background-color:rgba(250,248,207,0.7);
 
     background-color:rgba(250,248,207,0.7);
 
}
 
}
−
.mainmenu{
+
#mainmenu{
 
     display: block;
 
     display: block;
 
     position: relative;
 
     position: relative;
Line 158: Line 158:
 
     text-align: center;
 
     text-align: center;
  
−
 
+
   
 
     background-color:rgba(250,248,207,0.7);
 
     background-color:rgba(250,248,207,0.7);
 
     -webkit-transition: all .1s;
 
     -webkit-transition: all .1s;
Line 166: Line 166:
 
     transition: all .15s;
 
     transition: all .15s;
 
}
 
}
−
.mainmenu span{
+
#mainmenu span{
 
     font-size: 1.0vw;
 
     font-size: 1.0vw;
 
     color: #5e5e5e;
 
     color: #5e5e5e;
 +
line-height:0px;
 
}
 
}
−
.mainmenu i{
+
#mainmenu i{
 
     display: block;
 
     display: block;
−
     margin-top:8px;
+
     margin-top:15px;
 
     height: 8px;
 
     height: 8px;
 
     font-size: 1.7vw;
 
     font-size: 1.7vw;
 
     color: #5e5e5e;
 
     color: #5e5e5e;
 
}
 
}
−
.mainmenu:hover i{
+
#mainmenu:hover i{
 
     color: #17BEBB;
 
     color: #17BEBB;
 
}
 
}
−
.mainmenu:hover span{
+
#mainmenu:hover span{
 
     color: #17BEBB;
 
     color: #17BEBB;
 
}
 
}
Line 211: Line 212:
 
     width: 100%;
 
     width: 100%;
 
     height: auto;
 
     height: auto;
−
     padding: 15px 0px;
+
     padding: 10px 0px;
 
     margin: 0px;
 
     margin: 0px;
 
     font-size: 1.0vw;
 
     font-size: 1.0vw;
−
     right: 25px;
+
     right: 30px;
  
 
     background-color:rgba(250,248,207,0.7);
 
     background-color:rgba(250,248,207,0.7);
Line 225: Line 226:
 
     -o-transform: rotateY(90deg);
 
     -o-transform: rotateY(90deg);
 
     transform: rotateY(90deg);
 
     transform: rotateY(90deg);
−
-webkit-transition: transform 0.5s ease-in,opacity 0.1s;
+
    -webkit-transition: transform 0.5s ease-in,opacity 0.1s;
 
     -moz-transition: transform 0.5s ease-in,opacity 0.1s;
 
     -moz-transition: transform 0.5s ease-in,opacity 0.1s;
 
     -ms-transition: transform 0.5 ease-in,opacity 0.1s;
 
     -ms-transition: transform 0.5 ease-in,opacity 0.1s;
Line 235: Line 236:
 
     color: #5e5e5e;
 
     color: #5e5e5e;
 
}
 
}
−
mainmenu span{
+
#mainmenu span{
−
     font-size: 1.2vw;
+
     font-size: 0.8vw;
 
}
 
}
−
.mainmenu::after,.mainmenu::before{
+
#mainmenu::after,#mainmenu::before{
 
     content:"";
 
     content:"";
 
     display: block;
 
     display: block;
Line 248: Line 249:
  
 
}
 
}
−
.mainmenu::after{
+
#mainmenu::after{
 
     right: 100%;
 
     right: 100%;
 
}
 
}
−
.mainmenu::before{
+
#mainmenu::before{
 
     left: 100%;
 
     left: 100%;
  
Line 257: Line 258:
 
.second-nav{
 
.second-nav{
 
     display: block;
 
     display: block;
−
 
+
    color: #5e5e5e;
 
     height: 30px;
 
     height: 30px;
 
     width: 100%;
 
     width: 100%;
−
   
+
 
 
}
 
}
 
.second-nav li:hover{
 
.second-nav li:hover{
 
     background-color:rgba(250,248,207,1);
 
     background-color:rgba(250,248,207,1);
 +
    color: #000;
 
}
 
}
 
.second-nav li{
 
.second-nav li{
−
     display: block;
+
     display: none;
 
     position: relative;
 
     position: relative;
 
     width: 100%;
 
     width: 100%;
Line 276: Line 278:
  
 
     background-color:rgba(250,248,207,0.7);
 
     background-color:rgba(250,248,207,0.7);
−
-webkit-transform: translateY(-12px);
+
    -webkit-transform: translateY(-40px);
−
     -moz-transform: translateY(-12px);
+
     -moz-transform: translateY(-40px);
−
     -ms-transform: translateY(-12px);
+
     -ms-transform: translateY(-40px);
−
     -o-transform: translateY(-12px);
+
     -o-transform: translateY(-40px);
−
     transform: translateY(-12px);
+
     transform: translateY(-40px);
  
  
Line 293: Line 295:
  
 
}
 
}
−
.second-nav:hover li{
+
/*.second-nav:active li{*/
  
−
 
+
/*display: block;*/
−
    opacity: 1;
+
/*opacity: 1;*/
  
  
 +
/*}*/
 +
#Design:hover li{
 +
    display: block;
 +
    opacity: 1;
 +
}
 +
#parts:hover li{
 +
    display: block;
 +
    opacity: 1;
 +
}
 +
#Experiments:hover li{
 +
    display: block;
 +
    opacity: 1;
 +
}
 +
#notebook:hover li{
 +
    display: block;
 +
    opacity: 1;
 
}
 
}
−
.nav li:hover .mainmenu {
+
.nav li:hover #mainmenu {
 
     -webkit-transform: translateY(12px);
 
     -webkit-transform: translateY(12px);
 
     -moz-transform: translateY(12px);
 
     -moz-transform: translateY(12px);
Line 307: Line 325:
 
     transform: translateY(12px);
 
     transform: translateY(12px);
 
}
 
}
−
/*.nav li:hover .mainmenu span,.mainmenu i {*/
+
/*.nav li:hover #mainmenu span,#mainmenu i {*/
 
/*color:rgba(51,153,204,0.8);*/
 
/*color:rgba(51,153,204,0.8);*/
 
/*}*/
 
/*}*/
−
.nav li:hover .mainmenu:after{
+
.nav li:hover #mainmenu:after{
 
     -webkit-transform-origin: right top;
 
     -webkit-transform-origin: right top;
 
     -moz-transform-origin: right top;
 
     -moz-transform-origin: right top;
Line 322: Line 340:
 
     transform: skewY(30deg);
 
     transform: skewY(30deg);
 
}
 
}
−
.nav li:hover .mainmenu:before{
+
.nav li:hover #mainmenu:before{
 
     -webkit-transform-origin: left top;
 
     -webkit-transform-origin: left top;
 
     -moz-transform-origin: left top;
 
     -moz-transform-origin: left top;
Line 334: Line 352:
 
     transform: skewY(-30deg);
 
     transform: skewY(-30deg);
 
}
 
}
−
.nav li:hover .mainmenu:after,.nav li:hover .mainmenu:before{
+
.nav li:hover #mainmenu:after,.nav li:hover #mainmenu:before{
 
     background-color:rgba(250,248,207,0.9);
 
     background-color:rgba(250,248,207,0.9);
 
}
 
}
Line 399: Line 417:
 
     transition-delay: 600ms;
 
     transition-delay: 600ms;
 
}
 
}
−
.navbar-header{
+
#navbar-header{
 
     float: right;
 
     float: right;
 
     width: 13%;
 
     width: 13%;
Line 416: Line 434:
  
 
}
 
}
−
.navbar-header img{
+
#navbar-header img{
 
     position: center;
 
     position: center;
 
     height: 50px;
 
     height: 50px;
Line 426: Line 444:
 
}
 
}
  
−
.navbar-header span{
+
#navbar-header span{
−
    display: inline-block;
+
    display: inline-block;
 
     position:relative;
 
     position:relative;
 
     width: 100%;
 
     width: 100%;
Line 443: Line 461:
  
 
}
 
}
−
.navbar-header>a:hover img{
+
#navbar-header>a:hover img{
 
     opacity: 0.2;
 
     opacity: 0.2;
 
}
 
}
−
.navbar-header>a:hover span{
+
#navbar-header>a:hover span{
 
     display: block;
 
     display: block;
 
     opacity: 1;
 
     opacity: 1;

Latest revision as of 11:23, 15 October 2018



@font-face {font-family: "iconfont"; 

   src: url('iconfont.eot?t=1538921198356'); /* IE9*/
   src: url('iconfont.eot?t=1538921198356#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
   url('iconfont.ttf?t=1538921198356') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('iconfont.svg?t=1538921198356#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont { 

   font-family:"iconfont" !important;
   font-size:16px;
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

}

.icon-ifamilypractice:before { content: "\e807"; }

.icon-lab:before { content: "\e613"; }

.icon-team:before { content: "\e6ce"; }

.icon-project:before { content: "\e633"; }

.icon-shujumoxing:before { content: "\e6ef"; }

.icon-arrow-fill-right:before { content: "\e635"; }

.icon-home_my_achievements:before { content: "\e654"; }


.iconfont { 

   font-family:"iconfont" !important;
   font-size:16px;
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

}

.icon-ifamilypractice:before { content: "\e807"; }

.icon-lab:before { content: "\e613"; }

.icon-team:before { content: "\e6ce"; }

.icon-project:before { content: "\e633"; }

.icon-shujumoxing:before { content: "\e6ef"; }

.icon-home_my_achievements:before { content: "\e654"; }


.iconfont-menu { 

   font-family:"iconfont" !important;
   font-size:16px;
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

}

.icon-ifamilypractice:before { content: "\e807"; }

.icon-lab:before { content: "\e613"; }

.icon-parts:before { content: "\e636"; }

.icon-team:before { content: "\e6ce"; }

.icon-project:before { content: "\e633"; }

.icon-notebook:before { content: "\e709"; }

.icon-shujumoxing:before { content: "\e6ef"; }



/*---------------------------icon--------------------------------------*/ html, body { 

   width:100%;
   margin: 0;/*清除默认样式*/
   padding: 0;

   /*background-color: #17BEBB;*/

}

ul,li{ 

   list-style: none;
   font-family: Georgia;
   font-size: 1.1em;
   padding: 0;
   margin: 0;

} a{ 

   list-style: none;
   color: black;
   text-decoration: none;
   padding: 0;
   margin: 0;

} a{ 

   display: block;
   width: inherit;
   height: 100%;

} .nav-container{ 

   width: 100%;
   top: 5%;
   position: fixed;
   z-index: 99;



   /*background-color:rgba(0,255,255,0.5);*/

} .nav{ 

   float: right;
   /*background-color:rgba(0,0,255,0.5);*/
   width: 100%;
   height: 70px;


} .nav li{ 

   float:right;

   width: 8%;
   height: 70px;



   text-align: center;
   margin: 0px 15px;


} .navbar-control{ 

   float: right;
   display: inline-block;
   height: 60px;
   width: 8%;
   background-color:rgba(250,248,207,0.7);

}

  1. mainmenu{
   display: block;
   position: relative;
   float: right;
   width: 100%;

   height: 60px;
   text-align: center;



   background-color:rgba(250,248,207,0.7);
   -webkit-transition: all .1s;
   -moz-transition: all .15s;
   -ms-transition: all .15s;
   -o-transition: all .15s;
   transition: all .15s;

}

  1. mainmenu span{
   font-size: 1.0vw;
   color: #5e5e5e;

line-height:0px; }

  1. mainmenu i{
   display: block;
   margin-top:15px;
   height: 8px;
   font-size: 1.7vw;
   color: #5e5e5e;

}

  1. mainmenu:hover i{
   color: #17BEBB;

}

  1. mainmenu:hover span{
   color: #17BEBB;

}

  1. dropdown-menu>li:hover{
   background-color:rgba(250,248,207,1);

}

  1. dropdown-menu{


   position: relative;
   height: auto;
   text-align: center;
   padding: 0px;
   top:12px;
   width: 100%;

   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-perspective: 1000px;
   -moz-perspective: 1000px;
   -ms-perspective: 1000px;
   -o-perspective: 1000px;
   perspective: 1000px;

}

  1. dropdown-menu>li{
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   padding: 10px 0px;
   margin: 0px;
   font-size: 1.0vw;
   right: 30px;

   background-color:rgba(250,248,207,0.7);
   opacity: 0;



   -webkit-transform: rotateY(90deg);
   -moz-transform: rotateY(90deg);
   -ms-transform: rotateY(90deg);
   -o-transform: rotateY(90deg);
   transform: rotateY(90deg);
   -webkit-transition: transform 0.5s ease-in,opacity 0.1s;
   -moz-transition: transform 0.5s ease-in,opacity 0.1s;
   -ms-transition: transform 0.5 ease-in,opacity 0.1s;
   -o-transition: transform 0.5s ease-in,opacity 0.1s;
   transition: transform 0.5s ease-in,opacity 0.1s;

}

  1. dropdown-menu a {
   color: #5e5e5e;

}

  1. mainmenu span{
   font-size: 0.8vw;

}

  1. mainmenu::after,#mainmenu::before{
   content:"";
   display: block;
   position: absolute;
   top: 0;
   width: 15px;
   height: 100%;
   background-color:rgba(250,248,207,0.7);

}

  1. mainmenu::after{
   right: 100%;

}

  1. mainmenu::before{
   left: 100%;

} .second-nav{ 

   display: block;
   color: #5e5e5e;
   height: 30px;
   width: 100%;

} .second-nav li:hover{ 

   background-color:rgba(250,248,207,1);
   color: #000;

} .second-nav li{ 

   display: none;
   position: relative;
   width: 100%;
   height: auto;
   left: 100%;
   margin: 0px;
   padding: 15px 0px;
   font-size: 0.9vw;

   background-color:rgba(250,248,207,0.7);
   -webkit-transform: translateY(-40px);
   -moz-transform: translateY(-40px);
   -ms-transform: translateY(-40px);
   -o-transform: translateY(-40px);
   transform: translateY(-40px);



   opacity: 0;
   -webkit-transition: opacity .5s ease-in;
   -moz-transition: opacity .5s ease-in;
   -ms-transition: opacity .5s ease-in;
   -o-transition: opacity .5s ease-in;
   transition: opacity .5s ease-in;


} /*.second-nav:active li{*/

/*display: block;*/ /*opacity: 1;*/


/*}*/

  1. Design:hover li{
   display: block;
   opacity: 1;

}

  1. parts:hover li{
   display: block;
   opacity: 1;

}

  1. Experiments:hover li{
   display: block;
   opacity: 1;

}

  1. notebook:hover li{
   display: block;
   opacity: 1;

} .nav li:hover #mainmenu { 

   -webkit-transform: translateY(12px);
   -moz-transform: translateY(12px);
   -ms-transform: translateY(12px);
   -o-transform: translateY(12px);
   transform: translateY(12px);

} /*.nav li:hover #mainmenu span,#mainmenu i {*/ /*color:rgba(51,153,204,0.8);*/ /*}*/ .nav li:hover #mainmenu:after{ 

   -webkit-transform-origin: right top;
   -moz-transform-origin: right top;
   -ms-transform-origin: right top;
   -o-transform-origin: right top;
   transform-origin: right top;
   -webkit-transform: skewY(30deg);
   -moz-transform: skewY(30deg);
   -ms-transform: skewY(30deg);
   -o-transform: skewY(30deg);
   transform: skewY(30deg);

} .nav li:hover #mainmenu:before{ 

   -webkit-transform-origin: left top;
   -moz-transform-origin: left top;
   -ms-transform-origin: left top;
   -o-transform-origin: left top;
   transform-origin: left top;
   -webkit-transform: skewY(-30deg);
   -moz-transform: skewY(-30deg);
   -ms-transform: skewY(-30deg);
   -o-transform: skewY(-30deg);
   transform: skewY(-30deg);

} .nav li:hover #mainmenu:after,.nav li:hover #mainmenu:before{ 

   background-color:rgba(250,248,207,0.9);

}

  1. dropdown-menu a{
   color: #5e5e5e;

} .nav li:hover #dropdown-menu>li{ 

   display: block;
   opacity: 1;
   -webkit-transform: rotateY(0deg);
   -moz-transform: rotateY(0deg);
   -ms-transform: rotateY(0deg);
   -o-transform: rotateY(0deg);
   transform: rotateY(0deg);

} .nav li:hover #dropdown-menu>li:nth-child(1){ 

   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -ms-transition-delay: 0s;
   -o-transition-delay: 0s;
   transition-delay: 0s;

} .nav li:hover #dropdown-menu>li:nth-child(2){ 

   -webkit-transition-delay: 100ms;
   -moz-transition-delay: 100ms;
   -ms-transition-delay: 100ms;
   -o-transition-delay: 100ms;
   transition-delay: 100ms;

} .nav li:hover #dropdown-menu>li:nth-child(3){ 

   -webkit-transition-delay: 200ms;
   -moz-transition-delay: 200ms;
   -ms-transition-delay: 200ms;
   -o-transition-delay: 200ms;
   transition-delay: 200ms;

} .nav li:hover #dropdown-menu>li:nth-child(4){ 

   -webkit-transition-delay: 300ms;
   -moz-transition-delay: 300ms;
   -ms-transition-delay: 300ms;
   -o-transition-delay: 300ms;
   transition-delay: 300ms;

} .nav li:hover #dropdown-menu>li:nth-child(5){ 

   -webkit-transition-delay: 400ms;
   -moz-transition-delay: 400ms;
   -ms-transition-delay: 400ms;
   -o-transition-delay: 400ms;
   transition-delay: 400ms;

} .nav li:hover #dropdown-menu>li:nth-child(6){ 

   -webkit-transition-delay: 500ms;
   -moz-transition-delay: 500ms;
   -ms-transition-delay: 500ms;
   -o-transition-delay: 500ms;
   transition-delay: 500ms;

} .nav li:hover #dropdown-menu>li:nth-child(7){ 

   -webkit-transition-delay: 600ms;
   -moz-transition-delay: 600ms;
   -ms-transition-delay: 600ms;
   -o-transition-delay: 600ms;
   transition-delay: 600ms;

}

  1. navbar-header{
   float: right;
   width: 13%;
   height: 60px;
   border-radius:20px 0 0 20px;

   background-color:rgba(250,248,207,0.7);
   text-align: center;

} .con{ 

   display: block;
   width: 100%;
   height: 100%;
   margin: auto;
   text-align: center;

}

  1. navbar-header img{
   position: center;
   height: 50px;
   width: auto;
   right: 20px;
   margin:5px auto;


}

  1. navbar-header span{
   display: inline-block;
   position:relative;
   width: 100%;
   height: 100%;

   -webkit-transform: translateY(-85%);
   -moz-transform: translateY(-85%);
   -ms-transform: translateY(-85%);
   -o-transform: translateY(-85%);
   transform: translateY(-85%);

   color: #5e5e5e;
   font-size: 2.0vw;
   opacity: 0;

}

  1. navbar-header>a:hover img{
   opacity: 0.2;

}

  1. navbar-header>a:hover span{
   display: block;
   opacity: 1;

} .nav-container{ 

   float: right;
   display: inline-block;

} button { 

   background: none;
   border: none;

} button::-moz-focus-inner { 

   border: 0;

}

focus {
   outline: none;

}

-moz-focus-inner {
   border: 0;

} .btn-nav:hover { 

   cursor: pointer;

} .btn-nav:hover .bar { 

   background: #17BEBB;

} .bar { 

   display: block;
   height: 5px;
   width: 50px;
   background: #17BEBB;
   margin: 10px 5px;

} .btn-nav { 

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;

} .btn-nav:focus { 

   outline: none;

} .middle { 

   margin: 0 auto;

} .bar { 

   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;

} .tustanimated { 

   z-index: 999;

} .tustanimated .arrow-top-r { 

   -webkit-transform: rotateZ(-45deg) translateY(11px);
   -moz-transform: rotateZ(-45deg) translateY(11px);
   -ms-transform: rotateZ(-45deg) translateY(11px);
   -o-transform: rotateZ(-45deg) translateY(11px);
   transform: rotateZ(-45deg) translateY(11px);
   width: 25px;

} .tustanimated .arrow-middle-r { 

   -webkit-transform: translateX(25px);
   -moz-transform: translateX(25px);
   -ms-transform: translateX(25px);
   -o-transform: translateX(25px);
   transform: translateX(25px);

} .tustanimated .arrow-bottom-r { 

   -webkit-transform: rotateZ(45deg) translateY(-11px);
   -moz-transform: rotateZ(45deg) translateY(-11px);
   -ms-transform: rotateZ(45deg) translateY(-11px);
   -o-transform: rotateZ(45deg) translateY(-11px);
   transform: rotateZ(45deg) translateY(-11px);
   width: 25px;

}

@keyframes tustanimated { 

   from {
       right: -100%;
   }
   to {
       right: 0;
   }

} @-webkit-keyframes tustshowNav { 

   from {
       right: -100%;
   }
   to {
       right: 0;
   }

} @-moz-keyframes tustshowNav { 

   from {
       right: -100%;
   }
   to {
       right: 0;
   }

} @-o-keyframes tustshowNav { 

   from {
       right: -100%;
   }
   to {
       right: 0;
   }

} .tustshowNav { 

   -webkit-animation: tustshowNav .5s ease forwards;
   -moz-animation: tustshowNav 1s ease forwards;
   -o-animation: tustshowNav 1s ease forwards;
   animation: tustshowNav .5s ease forwards;

} @keyframes tusthideNav { 

   from {
       right: 0;
   }
   to {
       right: -100%;
   }

} @-webkit-keyframes tusthideNav { 

   from {
       right: 0;
   }
   to {
       right: -100%;
   }

} @-moz-keyframes tusthideNav { 

   from {
       right: 0;
   }
   to {
       right: -100%;
   }

} @-o-keyframes tusthideNav { 

   from {
       right: 0;
   }
   to {
       right: -100%;
   }

} .tusthideNav { 

   -webkit-animation: tusthideNav 1s ease forwards;
   -moz-animation: tusthideNav 1s ease forwards;
   -o-animation: tusthideNav 1s ease forwards;
   animation: tusthideNav 1s ease forwards;

} .tusthidden { 

   display: none;

} .block{ 

   display: block;

} .nav-main { 

   position: relative;


} a:hover{ 

   text-decoration:none;!important

}