javascript - 多级下拉导航栏
问题描述
我正在尝试制作一个多级下拉菜单,但只有第一级显示在Desktop View中。虽然它在移动视图中工作正常,但在桌面视图中却不行,为什么?您可以在住宅菜单中看到 Ongrid 和 OffGrid 选项不可见该菜单仅在第一级可见,即住宅,与产品菜单相同
我想要这样的菜单
$( document ).ready(function() {
// Detect device type
var isMobile;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
isMobile = true;
} else {
isMobile = false;
}
if (isMobile) {
// Navigation - Dropdown menu on mobile
$('.main-menu > li > a').on('click', function(e) {
if ($(this).parent().children('ul').length) {
e.preventDefault();
}
$(this).parent().find('i').toggleClass('open');
$(this).parent().find('ul').toggle();
});
// Navigation - show & close menu on mobile
$('.btn-nav-mobile').on('click', function() {
$(this).addClass('btn-nav-open');
$('.nav').addClass('nav-open');
$('.overlay').addClass('overlay-open');
});
$('.overlay').on('click', function() {
$(this).removeClass('overlay-open');
$('.nav').removeClass('nav-open');
$('.btn-nav-mobile').removeClass('btn-nav-open');
});
}
});
.nav {
margin-left: auto;
}
@media (max-width: 992px) {
.nav {
overflow: auto;
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #fff;
z-index: 100;
transition: all 0.2s;
}
.nav.nav-open {
visibility: visible;
opacity: 1;
left: 0;
}
}
.nav .main-menu > li {
position: relative;
display: inline-block;
line-height: 0px;
margin-left: 30px;
vertical-align: center;
}
.nav .main-menu > li:hover{
color: #3BA2FF;
}
.nav .main-menu .active {
color:#3ba2ff
}
.header-2 .nav .main-menu > li {
line-height: 75px;
}
@media (max-width: 992px) {
.nav .main-menu > li {
display: block;
line-height: 1 !important;
margin-left: 0;
border-bottom: 1px solid #EFEFEF;
}
.nav .main-menu > li a {
display: block;
padding: 15px 20px;
}
}
.nav .main-menu > li i {
display: none;
position: absolute;
top: 15px;
right: 20px;
transition: all 0.2s;
}
.nav .main-menu > li i.open {
transform: rotate(90deg);
transition: all 0.2s;
}
@media (max-width: 992px) {
.nav .main-menu > li i {
display: block;
}
}
/* .nav .main-menu > li:after {
visibility: hidden;
content: '';
position: absolute;
top: 50px;
left: 25%;
transform: translateX(-50%);
display: inline-block;
width: 0;
height: 4px;
border-radius: 5px;
background-color: #3BA2FF;
transition: all 0.2s;
} */
.green .nav .main-menu > li:after {
background-color: #3AE374;
}
.lightblue .nav .main-menu > li:after {
background-color: #3BA2FF;
}
.red .nav .main-menu > li:after {
background-color: #ff4d4d;
}
.no-radius .nav .main-menu > li:after {
border-radius: 0;
}
@media (max-width: 992px) {
.nav .main-menu > li:after {
top: 35px;
left: 5px;
transform: none;
}
}
/* .nav .main-menu > li.active:after{
visibility: visible;
width: 50px;
transition: all 0.3s;
} */
.nav .main-menu > li:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(5px);
transition: all 0.2s;
}
.nav .main-menu > li ul {
opacity: 0;
visibility: hidden;
overflow: hidden;
transform: translateY(15px);
width: 200px;
left: -10px;
top: 100%;
background-color: #fff;
position: absolute;
z-index: 20;
border-radius: 5px;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}
.no-radius .nav .main-menu > li ul {
border-radius: 0;
}
@media (max-width: 992px) {
.nav .main-menu > li ul {
position: relative;
display: none;
width: 100%;
left: 0;
visibility: visible;
opacity: 1;
transform: translateX(0) !important;
box-shadow: none;
}
}
.nav .main-menu > li ul li {
display: block;
margin-left: 0;
line-height: 19px;
border-bottom: 1px solid #EFEFEF;
}
@media (max-width: 992px) {
.nav .main-menu > li ul li {
font-size: 12px;
padding-left: 10px;
border-bottom: none;
border-top: 1px solid #EFEFEF;
}
}
.nav .main-menu > li ul li a {
display: block;
padding: 13px 15px;
color: #8c8c8c;
transition: all 0.2s;
}
.nav .main-menu > li ul li a:hover {
color: #333333;
transition: all 0.2s;
transform: translateX(5px);
}
.btn-nav-mobile {
width: 25px;
display: none;
cursor: pointer;
}
#get{
margin-left: -20px;
}
@media (max-width: 992px) {
.btn-nav-mobile {
display: block;
margin-left:-10px;
margin-bottom:20px
}
#get{
display:none;
}
}
.btn-nav-mobile span {
display: block;
width: 25px;
float: right;
height: 3px;
margin-bottom: 5px;
border-radius: 5px;
background-color: #7b80eb;
}
.no-radius .btn-nav-mobile span {
border-radius: 0;
}
.btn-nav-mobile span:last-child {
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header class="header" >
<div class="main-bar" id="mainb">
<div class="container d-flex justify-content-between align-items-center">
<div class="btn-nav-mobile">
<span></span>
<span></span>
<span></span>
</div>
<div class="solar_logo">
<a href="index.html"><img src="images/logo2.png" alt="solar-installation-logo"></a>
</div>
<nav class="nav">
<ul class="main-menu">
<li>
<a href="index.html" style="margin-left:-15px;font-weight: 600" >Home</a>
</li>
<li>
<a href="about.html" style="margin-left:-15px;font-weight: 600">About Us</a>
</li>
<li>
<a href="service.html"style="font-weight: 600;margin-left:-15px;">Services</a>
<ul>
<li><a href="service.html">Residential</a>
<ul id="drop">
<li><a href="service.html#ongrid">On Grid Solar Power Plant</a></li>
<li><a href="service.html#offgrid">Off Grid Solar Power Plant</a></li>
</ul>
</li>
<li><a href="commercial.html">Commercial</a></li>
<li><a href="projects.html">Projects</a></li>
</ul>
</li>
<li>
<a href="Products.html"style="font-weight: 600;margin-left:-15px;">Solar Products</a>
<ul>
<li><a href="service.html#residential">Solar Modules</a></li>
<li><a href="service.html#residential">Solar Inverter</a></li>
<li><a href="service.html#commercial">Solar Batteries</a></li>
<li><a href="service.html#institutional">BOS Systems</a></li>
<li><a href="service.html#institutional">Solar Pumps</a></li>
<li><a href="service.html#institutional">Solar Street Light</a></li>
</ul>
</li>
<li>
<a href="carrer.html" style="font-weight: 600;margin-left:-15px;" >Electric Vehicles</a>
<ul>
<li><a href="service.html#residential">Electric Vehicles</a></li>
<li><a href="service.html#residential">Electric Vehicles Batteries</a></li>
</ul>
</li>
<li><a href="contact.html"style="font-weight: 600;margin-left:-15px;">Contact Us</a></li>
<li class="solar_mdl_btn">
<a href="#exampleModal" class="solar_btn" id="get" data-toggle="modal">Get A Quote</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="overlay"></div>
解决方案
推荐阅读
- javascript - 当单选按钮选中时 div 隐藏/显示文本字段有效但未插入数据库
- angular - 如何修复 ionic 中的 getToken() 错误?
- javascript - return 语句在 javascript try 块中不起作用
- reactjs - Reactjs 通过来自另一个组件的 onclick 更改 div 中的内容
- javascript - 函数不等待获取请求
- laravel - 我如何理解 Eloquent orderBy() 的工作原理?
- database - 如何在具有持久数据的多个节点上的 Docker swarm 中创建 Percona XtraDB 集群
- opengl - 在片段着色器中,为什么我不能使用平面输入整数来索引 sampler2D 的统一数组?
- java - 如何处理 ZipException(文件密码错误:Demo.zip)并显示适当的消息
- c++ - C++ 如何为类的所有成员调用方法?