|
|
| Line 220: |
Line 220: |
| | | | |
| | | | |
| − | <style>
| |
| − | .header-nav {
| |
| − | position: fixed;
| |
| − | top: 16px;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | padding-top: 0;
| |
| − | padding-bottom: 5px;
| |
| − | background-color: #020202;
| |
| − | box-shadow: 0 0 6px 0 #333;
| |
| − | opacity: 0.7;
| |
| − | z-index: 1000;
| |
| − | -webkit-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | text-align: center;
| |
| − | height: 45px;
| |
| − | }
| |
| − | .header-nav:hover{
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .nav-item1{
| |
| − | font-size: 20px;
| |
| − | font-weight: 700;
| |
| − | padding-right: 15px;
| |
| − | padding-left: 15px;
| |
| | | | |
| − | }
| |
| − | .nav-sub-item{
| |
| − | font-size: 20px;
| |
| − | padding: 5px 10px;
| |
| − | top:0;
| |
| − | text-align: center
| |
| − | }
| |
| − | .sub_menu{
| |
| − | position: absolute;
| |
| − | z-index: 1000;
| |
| − | float: left;
| |
| − | min-width: 160px;
| |
| − | list-style: none;
| |
| − | font-size: 12px;
| |
| − | background-color: #464646;
| |
| − | border: 1px solid #cccccc;
| |
| − | color: #fff;
| |
| − | border: 1px solid rgba(0, 0, 0, 0.15);
| |
| − | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
| |
| − | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
| |
| − | -webkit-background-clip: padding-box;
| |
| − | background-clip: padding-box;
| |
| − | }
| |
| − | .nav-sub-item:hover{
| |
| − | background-color: rgb(171,171,171);
| |
| − |
| |
| − | }
| |
| − | .nav-sub-item a{
| |
| − | text-decoration: none;
| |
| − | color:white;
| |
| − | }
| |
| − | .nav-1-item{
| |
| − | font-size: 16px;
| |
| − | font-weight: 700;
| |
| − | padding: 0px 11px;
| |
| − | display:block;
| |
| − | height: 42px;
| |
| − | float: right;
| |
| − | color: white !important;
| |
| − | }
| |
| − | .animated {
| |
| − | -webkit-animation-duration: 1s;
| |
| − | animation-duration: 1s;
| |
| − | -webkit-animation-fill-mode: both;
| |
| − | animation-fill-mode: both;
| |
| − | }
| |
| − | .bounce {
| |
| − | -webkit-animation-name: bounce;
| |
| − | animation-name: bounce;
| |
| − | -webkit-transform-origin: center bottom;
| |
| − | transform-origin: center bottom;
| |
| − | }
| |
| − | @keyframes bounce {
| |
| − | 0%, 20%, 53%, 80%, 100% {
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
| |
| − | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | }
| |
| − | 40%, 43% {
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
| |
| − | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
| |
| − | -webkit-transform: translate3d(0, -30px, 0);
| |
| − | transform: translate3d(0, -30px, 0);
| |
| − | }
| |
| − | 70% {
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
| |
| − | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
| |
| − | -webkit-transform: translate3d(0, -15px, 0);
| |
| − | transform: translate3d(0, -15px, 0);
| |
| − | }
| |
| − | 90% {
| |
| − | -webkit-transform: translate3d(0,-4px,0);
| |
| − | transform: translate3d(0,-4px,0);
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| | | | |
| | <body> | | <body> |
