Question

对于一个网站，我需要在标题（.container-fluid）后面的Bootstrap 4（.container）中有一个水平菜单，它应该使用slideout.js折叠到右侧边栏。

目前我有水平菜单（下面的代码），但我无法弄清楚如何正确折叠滑出的项目。 我该怎么做？

我无法加载两个菜单。如果有任何解决方案，我愿意接受建议。

<nav class="navbar navbar-expand-md navbar-light bg-light m-0 p-0" id="menu">
<div class="container">

    <div class="collapse navbar-collapse" id="sidebar">
        <ul class="navbar-nav mr-auto col align-self-center justify-content-center">

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Title
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="link">@lang('titles.link')</a>

                    <a class="dropdown-item" href="link">@lang('titles.link')</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>        

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="somesite1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @lang('titles.somesite')
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="somesite1">

                    <a class="dropdown-item" href="{{url(trans('routes.somesite'))}}">@lang('titles.somesite')</a>           

                </div>
            </li>

        </ul>
    </div>
</div>

<div class="container-fluid main-header p-0 m-0 fixed">
<div class="container header">
    <div class="row text-sm-center text-md-left text-center">

        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" style="z-index:1000">
            <a class="navbar-brand" href="{{url('/', [app()->getLocale()])}}">
                <img src="{{asset('logos/logo.png')}}" class="nav-logo" alt="Logo">
            </a>

            <button class="navbar-toggler d-md-none menu-icon" type="button" id="toggle-button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="true" aria-label="Toggle navigation">
                <span class="navicon"></span>
            </button>

        </div>


        <div class="col-md-4 text-md-right d-none d-md-block phone-data">
         some phone data

        </div>
    </div>
</div>
</div>
@includeIf('components.navigation')

<main id="panel">

</main>

Answer 1

我不知道如何将slideout.js与Bootstrap 4混合使用。相反，我会根据需要在移动设备上使用@media查询将导航栏定位到右侧。为幻灯片效果更新.collapse过渡动画......

https://www.codeply.com/go/ocWMygpYGK

@media (max-width: 992px) {
    #sidebar.collapse {
      position: fixed;
      z-index: 2000;
      transition: all .3s ease;
      top: 0;
      bottom: 0;
      right: -30%; /* -width of sidebar */
      width: 0;
      height: 100% !important;
      display: block;
    }

    #sidebar.collapsing {
        transition: all .18s ease-in;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -30%;  /* -width of sidebar */
        width: 30%;  /* width of sidebar */
        height: 100% !important;
        display: block;
    }

    #sidebar.collapse.show {
        right: 0;
        width: 30%;  /* width of sidebar */
    }
 }

另请注意，Bootstrap 4中不再使用-xs中缀。它只是col-12。

Bootstrap水平菜单崩溃到sidemenu

1 个答案: