Question

我的网站上有一个主菜单，使用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

这可能吗？

Answer 1

您可以在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>

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

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

1 个答案: