stackoom
  简体   繁体   中英

Drop Down Navigation Menu Hides All the Page Contents

 原文  2020-10-18 20:10:02  8   1    javascript/ html/ css/ asp.net

Question

I have created a DropDown navigation menu in CSS. when i click on it, it hides the page contents altogether. I want want that instead of hiding the page content, either it pushes page content down or drop down menu should be on front end of the page content. 

 <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>

1 answers

solution1
 0  2020-10-18 20:35:20

I added float: left; on wrap content div element

 $(".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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Trying to fix a navigation bar with a drop down menu to top of page jQuery Drop-down navigation menu library to open all at once Filter Contents on Screen Javascript drop down menu Css Responsive navigation with drop down sub menu Drop-down navigation - menu flickering on mouseleave Drop down menu on hover the navigation bar? Navigation menu drop down tabs in jquery Drop down menu moving down page content How to Create a Full Length Navigation Menu that has Drop Down Menu Drop down menu going past the bottom of page
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM