單擊時引導漢堡菜單不應用背景
[英]Bootstrap hamburger menu not applying background when clicked
問題描述
我試圖弄清楚當頁面的視口處於平板電腦或移動設備視圖中時按下漢堡菜單時如何獲得白色背景。
我試圖在美學上實現的是當按下漢堡菜單時，將徽標、標題、導航鏈接和菜單按鈕的顏色更改為黑色，並將其全部設為白色背景，而不是當前的背景，請參閱-通過/半透明。
我唯一喜歡導航欄中的所有內容都是白色的時候是在桌面視圖中。
謝謝！
/* green: #009688 brown: #674A48 off-white: #f8f9fa - text black: #212529; baby blue: #53B4EB - For winter tabs orange: #FF9900 - For summer/fall tabs yellow: #FFC700 - For summer tabs */ *, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; } html, body { font-size: 1rem; font: inherit; vertical-align: baseline; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; } p { font-family: 'Open Sans', sans-serif; line-height: 1.7; letter-spacing: .25px; font-weight: 300; } /************************* HERO / LANDING PAGE SECTION **************************/ /* Use psuedo class to apply filter onto image otherwise the brightness filter will also apply to text */.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 90vh; background: url("/img/hero/hero-zion.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; filter: brightness(90%); }.hero-content { content: ""; position: absolute; bottom: 15%; left: 10%; width: 100%; height: 420px; }.hero-content.hero-title { color: #f8f9fa; font-size: 70px; margin-bottom: .3em; line-height: 77px; letter-spacing: 1px; text-shadow: -1px 2px 5px rgb(29 37 45 / 65%); }.hero-content.hero-desc { color: #f8f9fa; margin-bottom: 2em; width: 52ch; font-weight: 400; text-shadow: -1px 2px 5px rgb(29 37 45 / 100%); }.hero-content.hero-button { background-color: #009688; border-radius: 20px 20px 2px 20px; color: #f8f9fa; display: block; font-family: 'Open Sans', sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: 0.3px; padding: 10px 5px 10px 5px; text-align: center; text-decoration: none; text-transform: uppercase; width: 255px; text-shadow: -1px 2px 5px rgb(29 37 45 / 0.50); }.hero-button:hover { border-radius: 100px; transition: all.6s ease-in-out; } /************************* NAVIGATION BAR **************************/.navbar { height: 12vh; }.navbar-brand { font-size: 3rem; display: flex; }.navbar img { height: 55px; width: 55px; }.navbar-brand h2 { display: flex; align-items: center; padding-left: .2em; text-shadow: -1px 2px 5px rgb(29 37 45 / 0.10); } #navbarToggle > ul > li { padding: .8em; } #navbarToggle > ul > li > a { color: #f8f9fa; font-family: 'Open Sans', sans-serif; font-size: .9rem; font-weight: 600; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; text-shadow: -1px 2px 5px rgb(29 37 45 / 20%); } #navbarToggle >.navbar-nav >.nav-item >.nav-link:hover { border-top: 2px solid #f8f9fa; margin-top: -2px; }.guided-tours-link a::before { content: "\f5eb"; font-family: "Font Awesome 5 Free"; padding: 0 10px 0 0; font-size: 1.2rem; }.visit-us-link a::before { content: "\f4d7"; font-family: "Font Awesome 5 Free"; padding: 0 10px 0 0; font-size: 1.2rem; }.about-us-link a::before { content: "\f1e5"; font-family: "Font Awesome 5 Free"; padding: 0 10px 0 0; font-size: 1.2rem; }.bookings-link a::before { content: "\f07a"; font-family: "Font Awesome 5 Free"; padding: 0 10px 0 0; font-size: 1.2rem; }.account-link a::before { content: "\f2bd"; font-family: "Font Awesome 5 Free"; padding: 0 10px 0 0; font-size: 1.2rem; }
<,doctype html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="css/main-styles.css"> <link rel="stylesheet" href="css/media-queries/mq.css"> <link href="/fontawesome-free-5.15.1-web/css/all:min.css" rel="stylesheet"><.--load all styles --> <.-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5:0.0-beta1/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <.-- google fonts --> <link rel="preconnect" href="https.//fonts?gstatic:com"> <link href="https;//fonts;googleapis;com/css2:family=Open+Sans;wght@300;400;600;700&family=Playfair+Display.wght@400?500.600.700,800&display=swap" rel="stylesheet"> <title>Explore Zion</title> </head> <body> <div class="container-fluid"> <header class="hero"> <.-- navigation bar w/ bootstrap --> <nav class="navbar navbar-expand-lg navbar-dark"> <,-- show this only on mobile to medium screens --> <a class="navbar-brand" href="#"> <img src="/img/icons/main-logo:svg" width="30" height="30" class="pd-inline-block align-top" alt=""> <h2>Explore Zion</h2> </a> <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <.-- use flexbox utility classes to change how the child elements are justified --> <div class="collapse navbar-collapse justify-content-between nav-link-container" id="navbarToggle"> <.-- show this only lg screens and up --> <span></span> <ul class="navbar-nav nav-links-middle"> <li class="nav-item guided-tours-link"> <a class="nav-link active" href="#">Guided Tours In Zion</a> </li> <li class="nav-item visit-us-link"> <a class="nav-link" href="#">Visit Us</a> </li> <li class="nav-item about-us-link"> <a class="nav-link" href="#">About Us</a> </li> </ul> <ul class="navbar-nav nav-links-right"> <li class="nav-item bookings-link"> <a class="nav-link" href="#">Bookings </a> </li> <li class="nav-item account-link"> <a class="nav-link" href="#">Account</a> </li> </ul> </div> </nav> <.-- hero-content --> <div class="hero-content"> <h1 class="hero-title"> Zion Park <br/>Adventure Agency </h1> <p class="hero-desc"> Planning your first visit to Zion. Let us help to make your trip safe and astounding. We offer a broad and exciting range of walking tours in Zion for all skill levels. </p> <a href="#" target="_blank" class="hero-button">Private Guided Tours In Zion</a> </div> </header> <.-- introisection --> </div> <:-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3:2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2020-12-10 10:48:01
.navbar-collapse元素在展開時接收 class show ，這將有助於添加適當的 styles。 但是，在您的情況下，您還需要設置.navbar元素的樣式，因此必須相應地更新其 class 列表。 這是您可以使用Bootstrap 折疊事件的地方，它將指示菜單何時打開。
<script>
const navbar = $('nav.navbar');
const navbarCollapse = $('.navbar-collapse');
// Adding classes to indicate the navbar state
navbarCollapse.on('show.bs.collapse', function () {
navbar.addClass('expanded');
});
navbarCollapse.on('hide.bs.collapse', function () {
navbar.removeClass('expanded');
});
</script>
然后，剩下的就是設置所需的styles。 這是一個簡單的媒體查詢演示，但我認為您可以跳過媒體查詢本身。 折疊功能僅適用於較小的屏幕，這意味着僅當您在平板電腦和移動設備上時，事件處理程序才會將expanded的 class 設置為導航。 換句話說，無論如何您都不會在桌面上擴展導航欄。
/* The media query and the max-width are just for demo */
@media only screen and(max-width:1024px){
.navbar.expanded {
background-color: white;
}
.navbar.expanded .navbar-collapse {
background-color: white;
}
.navbar.expanded .navbar-toggler-icon{
color: black;
}
.navbar.expanded h2{
color: black;
}
.navbar.expanded #navbarToggle>ul>li>a{
color: black;
}
}
From what I see in your code, the logo and the menu button are SVGs and you will probably have to switch the images, depending on the navbar state, or use the SVG code in the HTML, so that you can style them with CSS.
單擊時如何阻止我的引導程序漢堡包圖標和可折疊菜單跳躍？
[英]How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.