Bootstrap水平菜单折叠到侧面菜单 [英] Bootstrap horizontal menu collapse to sidemenu

问题描述

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

For a website I need one horizontal menu in Bootstrap 4 (.container) after the header (.container-fluid) which should collapse into right sidebar using slideout.js.

目前，我有水平菜单(下面的代码)，但我不知道如何正确折叠项目以进行滑出. 我该怎么做?

Currently I have horizontal menu (code below) but I can't figure out how to properly collapse items for slideout. How can I do it?

我无法加载两个菜单.如果有任何解决方案，我欢迎您提出建议.

I can't load two menus. If there is any solution I am open to suggestions.

<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>

推荐答案

我不知道如何将slideout.js与Bootstrap 4混合使用.相反，我只是根据需要在导航栏中将导航栏定位在移动设备的右侧. @media查询.更新.collapse过渡动画以获得滑入效果...

I wouldn't know how to mix slideout.js with Bootstrap 4. Instead, I would just position the navbar to the right side as needed on mobile using a @media query. Update the .collapse transition animation for a slide-in effect...

https://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 */
    }
 }

此外，请注意，-xs中缀在Bootstrap 4中不再使用.它只是col-12.

Also, note that the -xs infix is no longer used in Bootstrap 4. It's just col-12.

这篇关于Bootstrap水平菜单折叠到侧面菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！