309 lines
8.6 KiB
PHTML
Executable File
309 lines
8.6 KiB
PHTML
Executable File
<div class="Container head-nav" id="scroll">
|
||
<div class="nav-1">
|
||
<a href="#"><img src="__PUBLIC__/weben/images/indeximg/logo .png" ></a>
|
||
</div>
|
||
<div class="nav-2">
|
||
<nav class="nav nav4">
|
||
<ul>
|
||
<li>
|
||
<a href="#">New Arrival</a>
|
||
|
||
</li>
|
||
<li>
|
||
<a href="#">Products</a>
|
||
<ul class="navas">
|
||
<li class="Container main_navas">
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">Cooperation</a>
|
||
<ul class="nava">
|
||
<li><a href="#">Introduction of the Brand</a></li>
|
||
<li><a href="#">Shop for Business</a></li>
|
||
<li><a href="#">Become a Distributor</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">Support</a>
|
||
<ul class="nava">
|
||
<li><a href="#">Driver & Manual Download</a></li>
|
||
<li><a href="#">Video Tutorials</a></li>
|
||
<li><a href="#">SSD Series Anti-Fake Query</a></li>
|
||
<li><a href="#">After-sale Policy</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">About Us</a>
|
||
<ul class="nava">
|
||
<li><a href="#">Our Brand</a></li>
|
||
<li><a href="#">Our Product</a></li>
|
||
<li><a href="#">Our Achievement</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">Blog</a>
|
||
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
</div>
|
||
<div class="nav-3">
|
||
<a href="" id="searchdiv1">
|
||
<img src="__PUBLIC__/weben/images/indeximg/search.png" class="searchimg">
|
||
</a>
|
||
<a href="__ORICOROOT__/Group/oricoindex">
|
||
<img src="__PUBLIC__/weben/images/indeximg/checklanguage.png" class="checkimg">
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
|
||
window.addEventListener('scroll', function() {
|
||
var navbar = document.getElementById('head-nav');
|
||
var scrolled = window.scrollY > 0; // 当页面向下滚动时 scrolled 为 true，否则为 false
|
||
|
||
if (scrolled) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
<style type="text/css">
|
||
|
||
#head-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
|
||
transition: background-color 0.3s ease-in-out;
|
||
}
|
||
|
||
#navbar.scrolled {
|
||
background-color: black; /* 滚动时导航栏的背景颜色 */
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.main_navas .navlistfirst{
|
||
width: 100%;
|
||
background-color: red;
|
||
}
|
||
|
||
|
||
|
||
|
||
.leavtop{
|
||
/*background-color: white !important;*/
|
||
display：none
|
||
}
|
||
|
||
.nav-1{
|
||
position: relative;
|
||
width: 20%;
|
||
background-color: transparent;
|
||
}
|
||
.nav-1 img{
|
||
position: absolute;
|
||
top: 50%;
|
||
margin-left: -74px;
|
||
margin-top: -19px;
|
||
left: 50%;
|
||
}
|
||
.nav-2{
|
||
width: 60%;
|
||
overflow: hidden;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.nav-3{
|
||
position: relative;
|
||
width: 20%;
|
||
background-color: transparent;
|
||
}
|
||
.nav-3 .searchimg{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 5%;
|
||
}
|
||
.nav-3 .checkimg{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 15%;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.head-nav {
|
||
position: fixed;
|
||
display: flex;
|
||
height: 60px;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
z-index: 9999;
|
||
|
||
}
|
||
|
||
.head-nav .nav4{
|
||
width:60% !important;
|
||
height: 60px;
|
||
background-color: transparent;
|
||
position: absolute;
|
||
z-index: 99;
|
||
}
|
||
|
||
.nav>ul {
|
||
|
||
*zoom: 1;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
/*border: 1px solid red;*/
|
||
color: white;
|
||
}
|
||
|
||
.nav ul:before,
|
||
.nav ul:after {
|
||
content: "";
|
||
display: table;
|
||
}
|
||
|
||
.nav ul:after {
|
||
clear: both;
|
||
}
|
||
/* .nav ul:hover {*/
|
||
/* background-color: white;*/
|
||
/* color: black;*/
|
||
/*}*/
|
||
|
||
.nav ul>li {
|
||
height: 60px;
|
||
width: 15%;
|
||
float: left;
|
||
position: relative;
|
||
}
|
||
.nav>ul>li>a{
|
||
color: white !important;
|
||
}
|
||
.nav a {
|
||
display: block;
|
||
/* padding: 10px 20px; */
|
||
height: 60px;
|
||
line-height: 60px;
|
||
color: #000;
|
||
text-align: center;
|
||
/* border-left: 1px solid #595959; */
|
||
|
||
/*border: 1px solid red;*/
|
||
}
|
||
|
||
.nav a:hover {
|
||
text-decoration: none;
|
||
color: #45c9fc!important;
|
||
font-weight: bold;
|
||
|
||
}
|
||
.nav li ul {
|
||
background: white;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.nav li ul li {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav li ul a {
|
||
/*border: none;*/
|
||
}
|
||
|
||
.nav li ul a:hover {
|
||
background-color: rgba(148, 235, 253, 0.70);
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.nav4 ul>li:hover ul li {
|
||
max-height: 150px;
|
||
}
|
||
|
||
.nav4 .nava {
|
||
width: 120%;
|
||
background-color: white;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 60px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.nav4 li ul li {
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
-webkit-transition: max-height 500ms ease;
|
||
-moz-transition: max-height 500ms ease;
|
||
-o-transition: max-height 500ms ease;
|
||
transition: max-height 500ms ease;
|
||
}
|
||
|
||
/* hc_lnav */
|
||
.main_navas{
|
||
width: ;
|
||
}
|
||
|
||
/*一级导航隐藏*/
|
||
.hc_lnav .allbtn ul{z-index:99999;position:absolute;background-color:#60a411;width:190px;display:none;height:486px;top:36px;left:0px}
|
||
.hc_home .hc_lnav .allbtn ul{display:block}
|
||
.hc_list .hc_lnav .allbtn ul{display:block}
|
||
.hc_lnav .allbtn ul li{padding-bottom:7px;zoom:1;clear:both;cursor:default}
|
||
.hc_lnav .allbtn ul li .tx{background-image:url(../images/header/header_bg1.png);line-height:35px;background-color:#559b0d;padding-left:10px;background-repeat:no-repeat;background-position:right center;height:35px;_background-image:none}
|
||
.hc_lnav .allbtn ul li .tx a{font-family:微软雅黑, 黑体;color:#ffffff;font-size:14px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
|
||
.hc_lnav .allbtn ul li .tx a i{line-height:25px;margin-top:5px;width:25px;background-position:0px 0px;float:left;height:25px;margin-right:10px;text-decoration:none}
|
||
.hc_lnav .allbtn ul li.a1 .tx a i{background-image:url(../images/header_ico1.png)}
|
||
.hc_lnav .allbtn ul li.a2 .tx a i{background-image:url(../images/header_ico2.png)}
|
||
.hc_lnav .allbtn ul li.a3 .tx a i{background-image:url(../images/header_ico3.png)}
|
||
.hc_lnav .allbtn ul li.a4 .tx a i{background-image:url(../images/header_ico4.png)}
|
||
.hc_lnav .allbtn ul li dl{zoom:1;color:#ffffff;clear:both;overflow:auto;padding-top:4px}
|
||
.hc_lnav .allbtn ul li dl a{line-height:22px;white-space:nowrap;float:left;color:#d9e7ce;margin-left:6px;margin-right:6px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
|
||
.hc_lnav .allbtn ul li dt{padding-left:10px;width:30px;float:left;padding-top:1px}
|
||
.hc_lnav .allbtn ul li dd{line-height:22px;width:150px;float:left;padding-top:2px}
|
||
/*二级导航隐藏*/
|
||
.hc_lnav .allbtn ul li .pop{border-bottom:#599900 2px solid;position:absolute;border-left:medium none;padding-bottom:10px;background-color:#fcfcfc;min-height:466px;padding-left:30px;width:640px;padding-right:30px;height:464px;border-top:medium none;top:0px;border-right:#599900 2px solid;padding-top:10px;left:190px;box-shadow:4px 4px 5px -1px #999999;-webkit-box-shadow:4px 4px 5px -1px #999999;-moz-box-shadow:4px 4px 5px -1px #999999}
|
||
.hc_lnav .allbtn ul li .pop h3{display:none;font-size:14px}
|
||
.hc_lnav .allbtn ul li .pop dl{padding-bottom:6px;color:#666666;padding-top:6px}
|
||
.hc_lnav .allbtn ul li .pop dl:hover{background-color:#f3f3f3}
|
||
.hc_lnav .allbtn ul li .pop dl a{color:#666666;margin-left:12px;margin-right:12px}
|
||
.hc_lnav .allbtn ul li .pop dl a.un{color:#a5a5a5}
|
||
.hc_lnav .allbtn ul li .pop dt{padding-left:0px;width:72px;}
|
||
.hc_lnav .allbtn ul li .pop dd{width:565px;margin-left:-12px;}
|
||
.hc_lnav .allbtn ul li .pop .act{width:640px;height:80px;overflow:hidden;padding-top:10px}
|
||
|
||
.hc_lnav .allbtn:hover ul{display:block}/*控制一级菜单显示隐藏*/
|
||
.hc_lnav .allbtn ul li:hover{background-color:#fcfcfc}
|
||
.hc_lnav .allbtn ul li:hover .tx{background-color:#f5f5f5}
|
||
.hc_lnav .allbtn ul li:hover .tx a{color:#333333}
|
||
.hc_lnav .allbtn ul li:hover .tx a i{background-position:0px -25px}
|
||
|
||
.hc_lnav .allbtn ul li:hover .pop{display:block;top:0px;left:190px}/*控制二级菜单显示隐藏*/
|
||
.hc_lnav .allbtn ul li:hover .pop dl a.un{color:#a5a5a5;text-decoration:none}
|
||
.hc_lnav .allbtn ul li:hover dl{color:#6e6e6e}
|
||
.hc_lnav .allbtn ul li:hover a{color:#666666}
|
||
.hc_lnav .allbtn ul li:hover a:hover{color:#cd0606}
|
||
|
||
|
||
|
||
</style>
|