时间戳

首页 > 解决方案 > 下拉导航菜单隐藏所有页面内容

javascript - 下拉导航菜单隐藏所有页面内容

问题描述

我在 CSS 中创建了一个下拉导航菜单。当我单击它时，它会完全隐藏页面内容。我希望它不是隐藏页面内容，而是将页面内容向下推或下拉菜单应该位于页面内容的前端。

<script type="text/javascript">
        $(".menu-toggle-btn").click(function () {
            $(this).toggleClass("fa-times");
            $(".navigation-menu").toggleClass("active");
        });
    </script>
body{
    /*font-family:Calibri !important;*/
    font-family:ProximaNova,Arial,Sans-serif;
    margin: 0 2px;
    padding: 0;
    text-decoration: none;
    font-size:12px;
    /*max-width: 100%;*/
    overflow-x: hidden;
}
header{
  height: 45px;
  background: #008269;
  margin-bottom:2px;
}

.inner-width{
  max-width: 100%;
  /*padding: 0 10px;*/
  margin: auto;
}

.navigation-menu{
  float: left;
  display: flex;
  align-items: center;
  min-height: 45px;
}

.navigation-menu a{
  /*margin-left: 10px;*/
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  padding: 1% 10%;
  border-radius: 4px;
  transition: .3s linear;
  font-weight:700;
  text-decoration: none;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
  text-decoration: none;
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.menu-toggle-btn{
  float: right;
  height: 20px;
  line-height: 20px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}

@media screen and (max-width:1500px) {
  .menu-toggle-btn{
    display: block !important;
    margin-top:13px;
    margin-right:13px;
  }

  .navigation-menu{
    position:center;
    width: 100%;
    height:100%;
    /*max-width: 100%;*/
    background:#008269;
    top: 45px;
    right: 0;
    display: none;
    /*padding: 20px 40px;*/
    box-sizing: border-box;
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{
    display: block;
  }

}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Responsive Drop-down Navigation</title>
      <link href="css/MasterPage-CSS.css" rel="stylesheet" />

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
      <script src="http://code.jquery.com/jquery-3.3.1.js"></script>

      <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
    
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder> 
</head>
<body>    

   <form id="form2" runat="server"> 
    <header>
          <div class="inner-width">
            <i class="menu-toggle-btn fas fa-bars"></i>
            <nav class="navigation-menu">
                 
                <a href="#"">Products</a> 
                <a href="#"">Customers</a>
                <a href="#"">Sales</a>
                <a href="#"">Installments</a>
                <a href="#"">Financial</a>
                <a href="#"">Stock</a>
                <a href="#"">payroll</a>
                <a href="#">Expensis</a>

            </nav>
          </div>
        </header>
       
       <asp:ContentPlaceHolder id="contentBody" runat="server">
           <div style="overflow-x:auto;"></div>        
       </asp:ContentPlaceHolder>
   </form>
     
    
    <script type="text/javascript">
        $(".menu-toggle-btn").click(function () {
            $(this).toggleClass("fa-times");
            $(".navigation-menu").toggleClass("active");
        });
    </script>
</body>
</html>

标签： javascripthtmlcssasp.net

解决方案

我添加float: left;了 wrap content div 元素

$(".menu-toggle-btn").click(function () {
    $(this).toggleClass("fa-times");
    $(".navigation-menu").toggleClass("active");
});
body {
    /*font-family:Calibri !important;*/
    font-family: ProximaNova, Arial, Sans-serif;
    margin: 0 2px;
    padding: 0;
    text-decoration: none;
    font-size: 12px;
    /*max-width: 100%;*/
    overflow-x: hidden;
}

header {
    height: 45px;
    background: #008269;
    margin-bottom: 2px;
}

.inner-width {
    max-width: 100%;
    /*padding: 0 10px;*/
    margin: auto;
}

.navigation-menu {
    float: left;
    display: flex;
    align-items: center;
    min-height: 45px;
}

.navigation-menu a {
    /*margin-left: 10px;*/
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    padding: 1% 10%;
    border-radius: 4px;
    transition: .3s linear;
    font-weight: 700;
    text-decoration: none;
}

.navigation-menu a:hover {
    background: #fff;
    color: #2f3640;
    transform: scale(1.1);
    text-decoration: none;
}

.navigation-menu i {
    margin-right: 8px;
    font-size: 16px;
}

.menu-toggle-btn {
    float: right;
    height: 20px;
    line-height: 20px !important;
    color: #fff;
    font-size: 26px;
    display: none !important;
    cursor: pointer;
}

@media screen and (max-width:1500px) {
    .menu-toggle-btn {
        display: block !important;
        margin-top: 13px;
        margin-right: 13px;
    }

    .navigation-menu {
        position: center;
        width: 100%;
        height: 100%;
        /*max-width: 100%;*/
        background: #008269;
        top: 45px;
        right: 0;
        display: none;
        /*padding: 20px 40px;*/
        box-sizing: border-box;
    }

    .navigation-menu::before {
        content: "";
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #172b4d;
        position: absolute;
        top: -10px;
        right: 10px;
    }

    .navigation-menu a {
        display: block;
        margin: 10px 0;
    }

    .navigation-menu.active {
        display: block;
    }

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<form id="form2" runat="server">
    <header>
        <div class="inner-width">
            <i class="menu-toggle-btn fas fa-bars"></i>
            <nav class="navigation-menu">

                <a href="#"">Products</a> 
            <a href=" #"">Customers</a>
                <a href="#"">Sales</a>
            <a href=" #"">Installments</a>
                <a href="#"">Financial</a>
            <a href=" #"">Stock</a>
                <a href="#"">payroll</a>
            <a href=" #">Expensis</a>

            </nav>
        </div>
    </header>

    <asp:ContentPlaceHolder id="contentBody" runat="server">
        <div style="overflow-x:auto; float: left;">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem totam delectus aspernatur veritatis deleniti repellat dignissimos recusandae alias odio necessitatibus cupiditate tempora, soluta voluptatum fuga non possimus officiis maiores culpa?
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic voluptas repellat deleniti laudantium rem nobis magni labore. Libero dolore fuga facere, beatae commodi voluptate assumenda repellendus, aperiam magnam voluptates consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptate blanditiis illo corrupti sunt pariatur soluta, laborum voluptates veniam facilis. Neque possimus natus assumenda enim magnam reprehenderit quas omnis voluptas?
        </div>
    </asp:ContentPlaceHolder>
</form>

推荐阅读