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

Revision as of 08:56, 14 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);

}

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;

}

mainmenu span{

   font-size: 1.0vw;
   color: #5e5e5e;

line-height:0px; }

mainmenu i{

   display: block;
   margin-top:8px;
   height: 8px;
   font-size: 1.7vw;
   color: #5e5e5e;

}

mainmenu:hover i{

   color: #17BEBB;

}

mainmenu:hover span{

   color: #17BEBB;

}

dropdown-menu>li:hover{

   background-color:rgba(250,248,207,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;

}

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;

}

dropdown-menu a {

   color: #5e5e5e;

}

mainmenu span{

   font-size: 0.8vw;

}

mainmenu::after,#mainmenu::before{

   content:"";
   display: block;
   position: absolute;
   top: 0;
   width: 15px;
   height: 100%;
   background-color:rgba(250,248,207,0.7);

}

mainmenu::after{

   right: 100%;

}

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

/*}*/

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 {

   -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);

}

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;

}

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;

}

navbar-header img{

   position: center;
   height: 50px;
   width: auto;
   right: 20px;
   margin:5px auto;

}

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;

}

navbar-header>a:hover img{

   opacity: 0.2;

}

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

}