效果图:
1.html
<nav class="header-menu navbar navbar-expand-lg navbar-light">
<a class="bar-menu-img" href="/"><img src="" alt=""></a>
<!-- 菜单 -->
<div class="drawer-box pc-menu-box">
<ul class="menu-list">
<ul id="w2" class="menu-list nav">
<li class="nav-item"><a class="nav-link" href="/">首页</a></li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link active" href="#" data-toggle="dropdown">产品</a>
<div id="w3" class="dropdown-menu" style="display: none;">
<a class="dropdown-item active" href="#">全部</a>
<a class="dropdown-item" href="#">产品1</a>
<a class="dropdown-item" href="#">产品2</a>
<a class="dropdown-item" href="#">产品3</a>
<a class="dropdown-item" href="#">产品4</a>
<a class="dropdown-item" href="#">产品5</a>
<a class="dropdown-item" href="#">产品6</a>
</div>
</li>
<li class="dropdown nav-item"><a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">推荐</a>
<div id="w4" class="dropdown-menu">
<a class="dropdown-item" href="#">推荐1</a>
<a class="dropdown-item" href="#">推荐2</a>
<a class="dropdown-item" href="#">推荐3</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">订单</a></li>
<li class="nav-item"><a class="nav-link" href="#">购物车</a></li>
</ul>
</ul>
</div>
<a href="#">
<div class="header-menu-search">
<input type="text" placeholder="请输入关键词">
<i class="icon-search"></i>
</div>
</a>
<button class="navbar-toggler mini-navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
2.css
*,
*::before,
*::after {
box-sizing: border-box;
}
a,
a:hover {
color: #1296db;
}
/* .header-menu {
max-width: 1140px;
padding-right: 15px;
padding-left: 15px;
height: 70px;
} */
nav {
width: 100%;
margin: 0 auto;
}
.header-menu {
padding-top: 4px;
padding-bottom: 5px;
max-width: 1194px;
max-height: 90px;
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: justify;
justify-content: space-between;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
/* 下拉菜单样式 start*/
.header-menu .drawer-box .menu-list .dropdown-menu {
border-radius: 1.25rem;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
@media (min-width: 992px) {
.navbar-expand-lg {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #007bff;
}
.header-menu .drawer-box .menu-list .dropdown-menu .dropdown-item {
color: #333;
}
/* 下拉菜单样式 end*/
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.header-menu .bar-menu-img img {
max-width: 200px;
}
@media screen and (min-width: 769px) {
.header-menu .pc-menu-box .menu-list {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
}
@media screen and (max-width: 768px) {
.header-menu .header-menu-search input {
padding: 6px 12px!important;
padding-right: 0;
}
.header-menu {
padding: 0;
height: 42px;
}
.header-menu .drawer-box .menu-list li {
width: 52%;
margin: 0 auto;
height: 9%;
}
.header-menu .pc-menu-box .menu-list .nav-item .nav-link {
padding: 20px 7px;
/* margin-left: 50px; */
font-size: 14px;
}
.header-menu .drawer-box .menu-list li {
width: 52%;
margin: 0 auto;
height: 9%;
}
.nav {
flex-flow: row nowrap;
overflow: auto;
}
.header-menu .drawer-box .menu-list {
display: inherit;
width: 76%;
height: 100%;
margin-top: 0;
background: #fff;
font-size: 16px;
}
.header-menu .drawer-box {
display: none;
position: fixed;
top: 55px;
left: 0;
width: 100vw;
height: calc(105vh - 82px);
background: rgba(0, 0, 0, .4);
z-index: 3;
}
.header-menu .header-menu-search {
-ms-flex: 1;
flex: 1;
margin-right: 3rem;
max-width: 120px;
}
.header-menu .header-menu-search input {
padding-right: 30px;
padding: 6px 12px;
}
.bar-menu-img img {
width: 100%;
}
.header-menu .bar-menu-img img {
max-width: 180px !important;
}
.header-menu .mini-navbar-toggler {
display: block!important;
padding-right: 0;
background: url(../img/mini_navbar-toggler.png) no-repeat center center;
background-size: 100%;
width: 38px;
height: 38px;
position: absolute;
top: 2px;
right: 5px;
padding-left: 0;
}
.navbar-light .navbar-toggler-icon {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
z-index: 1000;
}
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
color: #333;
display: block;
padding: 0.5rem 1rem;
}
dd,
dl,
dt,
li,
ul {
margin: 0;
padding: 0;
list-style: none;
}
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative;
}
.dropdown-toggle {
white-space: nowrap;
}
.active {
color: #1296db;
}
.header-menu .bar-menu-img img {
max-width: 200px;
}
.header-menu .header-menu-search input {
width: 100%;
display: inline-block;
padding: 6px 19px;
padding-right: 35px;
border: 1px solid #ccc;
border-radius: 1.67em;
font-size: 12px;
color: #666;
}
.header-menu .header-menu-search .icon-search {
position: absolute;
right: 12px;
top: 50%;
margin-top: -10px;
}
.icon-search {
display: inline-block;
width: 20px;
height: 20px;
background: url(../images/icon-search@2x.png) center center no-repeat;
background-size: 100% 100%;
}
.header-menu .mini-navbar-toggler {
display: none;
border: none;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: 50% / 100% 100% no-repeat;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.1);
}
3.js
/* 公共逻辑 */
$(function() {
$('.drawer-box.pc-menu-box').on('click', '.list_item', function(evt) {
evt.stopPropagation();
var width = $('body').width();
var $target = $(evt.target);
var $parent = $target.parent();
if (width >= 768) {
return false;
}
if (!$parent.hasClass('sub_list_title')) {
return true;
}
if ($parent.parent().hasClass('expanded')) {
$parent.parent().removeClass('expanded');
} else {
$parent.parent().addClass('expanded');
}
return false;
});
// 切换菜单
console.log('移动端');
$('.header-menu .mini-navbar-toggler').on('click', function(evt) {
console.log('移动端点击导航栏图标');
evt.stopPropagation();
if ($('.drawer-box.pc-menu-box').hasClass('active')) {
$('.drawer-box.pc-menu-box').removeClass('active');
$('body').removeClass('body_fixed');
} else {
$('.drawer-box.pc-menu-box').addClass('active');
$('body').addClass('body_fixed');
$('.header-menu .drawer-box').show();
}
});
// $('.header-menu').on('click', '.mini-navbar-toggler', function(evt) {
// evt.stopPropagation();
// console.log('移动端点击导航栏图标');
// if ($('.drawer-box.pc-menu-box').hasClass('active')) {
// $('.drawer-box.pc-menu-box').removeClass('active');
// $('body').removeClass('body_fixed');
// } else {
// $('.drawer-box.pc-menu-box').addClass('active');
// $('body').addClass('body_fixed');
// }
// });
// 点击其他区域关闭菜单
$('body')
.not('.drawer-box.pc-menu-box')
.on('click', function(evt) {
$('.drawer-box.pc-menu-box').removeClass('active');
$('body').removeClass('body_fixed');
$('.header-menu .drawer-box').hide();
});
/**
* 首页菜单,一级菜单点击后直接进入页面
*/
$('.menu-list .nav-link').on('click', function() {
if ($(this).hasClass('dropdown-toggle')) {
window.location.href = $(this).attr('href');
}
});
// 鼠标经过联系我们显示下拉菜单
$("#contact").mouseover(function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings("ul").show();
$(".items-content").stop().show();
});
$("#contact").mouseout(function(event) {
event.preventDefault();
event.stopPropagation();
$(".items-content").stop().hide();
});
// 鼠标放到顶部的“联系我们”,解决下拉框消失问题
$(".items-content").mouseover(function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings("ul").show();
$(".items-content").stop().show();
});
$(".items-content").mouseout(function(event) {
event.preventDefault();
event.stopPropagation();
$(".items-content").stop().hide();
});
// 鼠标经过导航栏显示下拉菜单
$(".dropdown").mouseover(function() {
console.log("鼠标经过下拉菜单");
$(this).children(".dropdown-menu").stop().show();
});
$(".dropdown").mouseout(function() {
$(this).children(".dropdown-menu").stop().hide();
});
//鼠标经过显示二维码
$(".header-navbar-menu .item-l,.showpic-l").hover(function() {
$(".showpic-l").show();
}, function() {
$(".showpic-l").hide();
});
$(".header-navbar-menu .item-r,.showpic-r").hover(function() {
$(".showpic-r").show();
}, function() {
$(".showpic-r").hide();
});
});