侧边栏默认在桌面上打开，在移动设备上关闭

9

我在尝试使侧边栏/导航内容（使用Bootstrap）在桌面上默认显示（展开）并在移动设备上默认关闭并且仅在移动设备上显示图标时遇到了一些实际麻烦。我似乎无法使它正常工作。

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

我尝试使用此javascript代码，但无济于事：

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });
javascript  html  css  bootstrap-4  responsive-design 
— 弗兰克·杜
source
嘿，我已经对您的问题添加了确切的解决方案。为您创建了代码笔，以便您可以检查代码和输出。请有看看
— 普里
您还有其他CSS吗？
— Codeply-er
class在媒体查询下进行简单添加和样式设置width:600
— Awais

Answers:

0

这是您确实需要的链接。我为你制作了笔。请查看下面的链接。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
  </div>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

— 普里扬卡
source
0

我根据有关外部内容的bs4文档为您创建了一个示例。

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

在此示例中，代码从顶部（而不是右侧）折叠。实际上，我正在休假，并且会尝试完成该示例以适合您的需求。

其他JavaScript：

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

我也制造了一个小提琴 小提琴 若要查看实际效果，请在jsfiddle中调整内部窗口的大小

— 马特Open
source
0

无论使用哪种设备，您当前的Javascript代码都将始终运行。您需要的是一种检查设备是计算机还是手机的方法。

一种方法是使用浏览器的UserAgent：

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

或者，您可以仅依靠窗口的宽度（但是小型桌面窗口将被视为移动版本）：

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— 阿尼斯·R。
source
嗅探用户代理字符串会导致代码难以维护。媒体查询要好得多。
— kmoser
一个字符串的“难以维护”是什么？无论如何，您都可以将此检查包装到一个函数中，这样，每当需要更新字符串时，都只需要编辑一行代码。
— Anis R.19年
此外，您不能使用CSS媒体查询拨动类的名称，如OP希望
— 阿尼斯R.
随着生产新设备，设备的用户代理字符串会随着时间而变化。这导致每次引入新设备时代码都会中断。当然，您可以将其包装在一个函数中，但是仍然需要您在引入新设备时对其进行更改。最好根据设备的大小（使用CSS媒体查询）而不是用户代理字符串来定位设备。引入新设备后，无需更新。OP不一定要切换类名。这是他们在解决方案上的最佳尝试，我认为这不如媒体查询。
— kmoser
0

首先只有几点：

  1. 您说的是补充工具栏，但对我来说，您的标记实际上并不像补充工具栏，而是响应式的topnav。我将尽我所能来尽可能地理解它，并且在您确实需要的情况下，我还将演示一个可正常使用的侧边栏。

  2. 您的菜单项位于一个<ul>（无序列表）中，没有任何<li>（列表项）。bootsrap js / css可能需要使用<li>s才能正常运行。从技术上讲，<ul>没有任何<li>有效内容的a是有效的html，但是a <ul>中允许的唯一内容是<li>s，因此a 中的锚点（或其他任何内容）<ul>必须包含在<li>s中才能有效。

  3. 我不确定您到底想使用社交图标做什么，所以我只是以一种似乎明智的方式对其进行了微调。

  4. 我overflow-y: scroll;在该<html>元素上进行了添加，以便在小屏幕上打开菜单时，如果添加滚动条，也不会引起移位。根据您的网站设计和内容布局，可能不需要。

因此，让我们从一个非常基本的响应式菜单开始。

基本Bootstrap响应式菜单

显示代码段

好的，看起来不错，但是菜单中有一个图像。因此，我将图像放在菜单中，然后给它一点CSS样式。然后，通过图像，我们需要一些额外的CSS才能很好地放置菜单元素：

  1. 放置汉堡包按钮，使其位于导航栏的底部。我将使用图片的200px减去一些rem。你可以改变top: calc(100px - 1rem);，以top: 1rem;把汉堡放在上面，或者bottom: 1rem;如果你想在汉堡粘到导航栏的底部打开时也是如此。或只是删除整个规则以使用默认引导程序，该默认程序会将汉堡包放在垂直中间。

  2. 放置菜单项时也要使其不折叠时也位于菜单栏的底部。

  3. 将社交图标也放置在底部，但将其推到右侧。

  4. 上面的数字2和3仅在菜单未折叠时才适用于中等断点以上，因此我将它们放入媒体查询中，以定位超过768px（引导程序的中等断点）的目标。这也可以通过bootstrap sass断点mixins来完成，但是我们这里只使用普通的CSS。您可以在CSS的@media查询规则中看到这些元素的位置，可以在其中进行更改以将其推到栏的顶部。或者只是删除这些规则以恢复为引导​​程序默认设置，该默认设置将菜单元素垂直居中放置，并将社交图标置于其下方。如果您只是希望像其他菜单项一样将社交图标放入<li>菜单中，也可以将社交图标放入菜单中的元素中<ul>。

菜单中有图像

显示代码段

好的，但是您说这是边栏。我对bootstrap不太熟悉，但是我发现v3和v4默认都不提供边栏导航。可以在此处找到几个引导侧栏教程。我只是使用上面链接的教程中最基本的版本在此处创建示例。

可折叠边栏

显示代码段

— 韦内塞姆·泰拉斯（Veneseme Tyras）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.