首页 文章

Bootstrap 4响应式菜单 - 在折叠时添加项目

提问于
浏览 次
0

我使用Bootstrap 4的导航栏在我的网站上有一个主菜单 .

我还有另一个div（.social-navbar），其中包含一些其他菜单项，我想从它们所在的位置移动，并将INTO只在移动设备上放入Bootstrap菜单 . 基本上当菜单在移动设备上崩溃时，我希望社交导航栏项目（facebook / twitter图标）和LOGIN按钮显示在Bootstrap的navbar-nav菜单中 .

见下面的Codepen ......

https://codepen.io/anon/pen/KeXZJL

<div class="social-navbar clearfix">
     <ul class="social-icons">
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
     </ul>
     <ul class="login float-right">
        <li class="join"><a href="#">Join Now</a></li>
     </ul>
  </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">LOGO</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMain">
        <ul class="navbar-nav ml-auto">
           <li class="nav-item active">
              <a class="nav-link" href="#">Item 1</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 2</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 3</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 4</a>
           </li>
        </ul>
     </div>
  </nav>

https://codepen.io/anon/pen/KeXZJL

这可能吗？

javascript jquery css twitter-bootstrap

1 回答

  • 0

    您可以在BODY标记的最后添加此javascript：

    <script>

    var x = window.matchMedia("(max-width: 465px)")

    function mobileMenu(x) {
        if (x.matches) { 
            document.getElementById("navbarMain").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "inherit";

        } else{
            document.querySelector("body").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "#000";
        } 
    }

    mobileMenu(x) 
    x.addListener(mobileMenu)   


</script>

    当屏幕宽度为465px或更窄时， .social-navbar 将移动到导航栏折叠菜单，其 backgroundColor 更改为与折叠菜单匹配 .

    回复于

相关问题