Bootstrap 4. HTML CSS 和 jQuery 下拉子菜單
[英]Bootstrap 4. HTML CSS and jQuery dropdown submenu
問題描述
我有一個 HTM 代碼，我正在使用 CSS、jQuery Bootstrap 4。 我試圖在我的主菜單上懸停時創建一個下拉子菜單。 出於某種原因，我無法使下拉子菜單正常工作。 如果我將鼠標懸停在我的主菜單（例如課程、教科書和汽車）上，我希望子菜單顯示在主菜單下方。 如果我也刪除 bootstrap.min.css、announcement-container div 和 custom-menu-container div，它可以正常工作，如果存在 bootstrap 和其他菜單 div，則它不起作用。 我真的需要引導程序和其他菜單。 請幫助如何讓這個工作。 我正在使用 Bootstrap 4。對於主菜單和子菜單，我希望結果如下圖所示。
下面是代碼
:root { --background-color: #FFF; --button-bg: #FFF; --secondary-bg-color: #F6F5FA; --fontfamily: 'Ibarra Real Nova', serif; --cormorant: 'Cormorant Garamond', serif; } * { border: none !important; box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--background-color); padding: 0; margin: 0; } *:focus { outline: 0; } textarea:focus, input:focus { outline: none; } a { text-decoration: none; color: inherit; } /*----------------------- /* New Css Added */ /*----------------------- */ .container-fluid.wrapper { flex-direction: column; padding-bottom: 0px; } .logo{ color: #000; display: block; height: 50px; margin-right: 5px; overflow: hidden; padding-top: 0; background-size: cover; } .announcement-container { background: pink; margin: 0; padding: 5px 0 0 0; font-size: 16px; } .announcement-container h5 { font-size: 16px; color: #FFF; font-family: sans-serif; } .row.nav-container { margin-top: 1rem; } .form-container, .custome-menu { text-align: center; } .col-md-6.form-container { padding-right: 0px; padding-top: 2px; } .search-product input { border-bottom: 1px solid #000 !important; min-width: 220px; } .col-md-6.form-container:hover .search-product input{ width: 300px; } .col-md-6.custome-menu { word-spacing: .5rem; padding-left: 0; padding-top: 5px !important; } .text-center a { color: #000; } .col-md-6.custome-menu .fa-a{ margin-left: .5rem; } /*---------------------------- /* Main menu and submenu */ /*---------------------------- */ .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .nav-item { color: #000; text-decoration: none; display: inline; overflow: hidden; } .dropdown { float: left; } .nav-item .dropdown-content { background-color: red; color: #000; float: left; position: absolute; display: none; z-index: 2; left: 0; top: 60px; width: 100% !important; } .nav-item .dropdown-content a { float: left; color: white; text-decoration: none; display: inline; } .nav-item .dropdown-content a { display: inline !important; } .nav-item:hover { color: #FFF; background: red !important; } .nav-item:hover a { color: #FFF !important; } .navbar-nav li:hover .dropdown-content { display: block; } .navbar-nav .dropdown-content a:hover { text-decoration: underline; } .navbar a:hover, .subnav:hover .subnavbtn { background-color: red; } .subnav-content a:hover { background-color: #eee; color: black; } .wrapper { text-align: center; justify-content: center; background: #FFF; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="Lib/fontawesome-5/css/all.css"> <link rel="stylesheet" type="text/css" href="HTest.css"> </head> <body> <header> <div class="container-fluid wrapper p-0"> <div class="row announcement-container"> <div class="col-md-12"><h5>Some text here</h5></div> </div> <div class="row nav-container"> <div class="col-md-4"> <a href="" class="logo">LOGO </a> </div> <div class="col-md-8 custom-menu-container"> <div class="row"> <div class="col-md-6 form-container"> <form class="search-product" action="search" method="get" role="search"> <input type="text" name="s" id="search_value" class="" placeholder="Enter keyword" autocomplete="off" value=""> <i class="fas fa-search" aria-hidden="true"></i> </form> </div> <div class="col-md-6 custome-menu"> <a href="#" class="">Create Account</a> / <a href="" class="">SignIn</a> <a href="" class="fa-a"><i class="fas fa-shopping-bag" aria-hidden="true"></i></a> <a href="" class="fa-a"><i class="fas fa-heart" aria-hidden="true"></i></a> </div> </div> </div> </div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <div class="dropdown"> <a class="nav-link" href="#">Course<span class="sr-only">(current)</span></a> <div class="dropdown-content"> <a href="#">Web design</a> <a href="#">Science</a> <a href="#">Python</a> </div> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">TextBook</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Car</a> </li> </ul> </div> </nav> </div> </header> <div class="container-fluid"> <div class="col-md-12"> <p>Other text and content will be here</p> </div> </div> </body> </html>
對於子菜單，我想要
1 個解決方案
解決方案1
1 2020-01-12 00:50:34
您可以使用引導程序navbar ，然后修改dropdown類以獲取此 UI。
.nav-item { display: inline-block; } .nav-item a { color: #FFF !important; } .nav-item:hover { background: red !important; } .nav-item:hover .dropdown-menu, .nav-item.active .dropdown-menu { display: flex; } .nav-item .dropdown-menu { background: red; padding: 0; width: 100%; margin: 0; border-radius: 0; border: none; } .nav-item .dropdown-item { display: inline-block; background: red; width: auto; padding: .5rem 1rem; } .dropdown-item:focus, .dropdown-item:hover { background: rgba(0, 0, 0, 0.2) !important; }
<!DOCTYPE html> <html> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="Lib/fontawesome-5/css/all.css"> <ul class="navbar navbar-dark bg-dark p-0 justify-content-start"> <li class="nav-item"> <a class="nav-link"> Home </a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul>
CSS：在懸停時向子菜單下拉菜單添加延遲（Bootstrap 3 / MegaNavbar 2.2）
[英]CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.