文章/答案/技术大牛

发布

问单击时打开菜单
EN

Stack Overflow用户

提问于 2020-10-06 16:13:30

回答 1查看 43关注 0票数 0

在我的网站中，当用户单击切换时，我会打开一个菜单。当我点击一个移动到特定部分的链接时，它工作得很好。我想要的是当用户点击一个链接，关闭菜单和视图切换。我可以这样做，但我不能通过再次单击切换来再次打开菜单。这就是我们所做的。当我单击切换时，它不是查看我的菜单。

$(function() {
    $('.hamburger-menu').on('click', function(){
        $('.toggle').toggleClass('open');
        $('.nav-list').toggleClass('open');
    })
})

$(function() {
    $('.nav-list>li>a').on('click', function(){
        $('.nav-list').toggleClass('hide');
        $('.toggle').toggleClass('open');
    });
})

header {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(16,29,44,.88), rgba(16,29,44,.88)),
    background-size: cover;
    position: relative;
}

header > .container {
    position: relative;
    height: 100%;
    padding: 0;
}

.navbar-brand {
    position: absolute;
    width: 100%;
    max-width: 100px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 650ms;
}

.navbar-brand:hover{
    opacity: .8;
}

.hamburger-menu, .hamburger-home{
    position: fixed;
    top: 25px;
    right: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    background-color: #101D2C;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
}

.hamburger-menu i, .hamburger-home i {
    font-size: 30px;
    color: white;
    margin: auto;
}

.hamburger-menu .fa-times{
    display: none;    
}

.hamburger-menu .fa-times.open {
    display: block;
}

.hamburger-menu .fa-bars.open{
    display: none;    
}

.nav-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    list-style: none;
    background-color: #101D2C;
    z-index: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: opacity 650ms;
}

.nav-list.open {
    opacity: 1;
    transform: scale(1);
}

.nav-list.hide {
    opacity: 0;
}

.hero-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
    text-align: center;
}

.hero-text h1 {
    display: inline-block;
    font-family: "Niconne", cursive;
    color: #c69963;
    text-shadow: 3px 3px 4px #40413f;
    animation: hero 3.2s ease .5s;
}

.hero-text p {
    font-family: 'Pangolin' ,cursive;
    animation: long 3s ease;
    position: relative;
}

@keyframes long {
    from {
        left: 50%;
        transform: translate(50%);
    }
    to {
        left: 50%;
        transform: translate(-50%);
    }
}

.btn {
    width: 100px;
    padding: 5px 0!important;
    border: 1px solid #c69963;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: all 650ms;
}

.btn:hover::before {
    left: 100%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <a href="#home">
    <div class="hamburger-home d-none d-lg-flex d-md-flex">
      <i class="fas fa-home toggle"></i>
  </div>
  </a>
  <div class="hamburger-menu">
      <i class="fa fa-bars toggle"></i>
      <i class="fa fa-times toggle"></i>
  </div>
  <nav class="d-flex align-items-center justify-content-center justify-content-lg-between">
                
    <ul class="nav-list text-center p-0">
        <li class="nav-item">
            <a class="nav-link" href="#home">HOME</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">ABOUT</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#products">PRODUCTS</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">LOGIN</a>
        </li>
    </ul>
  </nav>
  <div class="hero-text w-100 text-white px-2 px-sm-0">
      <p class="lead mb-4">
          Most large enterprises have application running on-prem and on the cloud, due to inherent complex nature of networking customers are not reaping the full potential of their investments as most features are not fully utilized. 
          At NadaLabs, we fulfill this gap for on-premise and cloud-based software that allow you to unlock the full ability of these features
      </p>
      <!-- <a class="btn px-5 mr-2" href="#">Explore</a>
      <a class="btn px-5 ml-2" href="#products">Products</a> -->
  </div>
</div>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-06 16:24:03

你基本上想要点击链接来复制汉堡包菜单点击的行为，为什么不让它执行同样的操作呢？

$(function() {
    $('.hamburger-menu, .nav-list>li>a').on('click', function(){
        $('.toggle').toggleClass('open');
        $('.nav-list').toggleClass('open');
    })
})

header {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(16,29,44,.88), rgba(16,29,44,.88)),
    background-size: cover;
    position: relative;
}

header > .container {
    position: relative;
    height: 100%;
    padding: 0;
}

.navbar-brand {
    position: absolute;
    width: 100%;
    max-width: 100px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 650ms;
}

.navbar-brand:hover{
    opacity: .8;
}

.hamburger-menu, .hamburger-home{
    position: fixed;
    top: 25px;
    right: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    background-color: #101D2C;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
}

.hamburger-menu i, .hamburger-home i {
    font-size: 30px;
    color: white;
    margin: auto;
}

.hamburger-menu .fa-times{
    display: none;    
}

.hamburger-menu .fa-times.open {
    display: block;
}

.hamburger-menu .fa-bars.open{
    display: none;    
}

.nav-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    list-style: none;
    background-color: #101D2C;
    z-index: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: opacity 650ms;
}

.nav-list.open {
    opacity: 1;
    transform: scale(1);
}

.nav-list.hide {
    opacity: 0;
}

.hero-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
    text-align: center;
}

.hero-text h1 {
    display: inline-block;
    font-family: "Niconne", cursive;
    color: #c69963;
    text-shadow: 3px 3px 4px #40413f;
    animation: hero 3.2s ease .5s;
}

.hero-text p {
    font-family: 'Pangolin' ,cursive;
    animation: long 3s ease;
    position: relative;
}

@keyframes long {
    from {
        left: 50%;
        transform: translate(50%);
    }
    to {
        left: 50%;
        transform: translate(-50%);
    }
}

.btn {
    width: 100px;
    padding: 5px 0!important;
    border: 1px solid #c69963;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: all 650ms;
}

.btn:hover::before {
    left: 100%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <a href="#home">
    <div class="hamburger-home d-none d-lg-flex d-md-flex">
      <i class="fas fa-home toggle"></i>
  </div>
  </a>
  <div class="hamburger-menu">
      <i class="fa fa-bars toggle"></i>
      <i class="fa fa-times toggle"></i>
  </div>
  <nav class="d-flex align-items-center justify-content-center justify-content-lg-between">
                
    <ul class="nav-list text-center p-0">
        <li class="nav-item">
            <a class="nav-link" href="#home">HOME</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">ABOUT</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#products">PRODUCTS</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">LOGIN</a>
        </li>
    </ul>
  </nav>
  <div class="hero-text w-100 text-white px-2 px-sm-0">
      <p class="lead mb-4">
          Most large enterprises have application running on-prem and on the cloud, due to inherent complex nature of networking customers are not reaping the full potential of their investments as most features are not fully utilized. 
          At NadaLabs, we fulfill this gap for on-premise and cloud-based software that allow you to unlock the full ability of these features
      </p>
      <!-- <a class="btn px-5 mr-2" href="#">Explore</a>
      <a class="btn px-5 ml-2" href="#products">Products</a> -->
  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64221844

复制

相似问题

问单击时打开菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击时打开菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击时打开菜单
EN