前端之家

  1. 首页
  2. 问答

大屏幕右侧的Bootstrap 4滑出菜单

• 问答

我一直在尝试使菜单从右向滑动，但并没有成功实现该目标，因为菜单在向左滑动。我一直尝试从各个方面来达到我想要的效果。希望这绝对是一场灾难。

下面是我到目前为止完成的代码

HTML：

<nav class="head-main">
                    <div class="navbar navbar-dark bg-dark box-shadow">
                        <div class="container d-flex justify-content-between">
                            <a href="index.html" class="navbar-brand d-flex align-items-center img-fluid">
                                <img src="" alt="">
                                <strong>&nbsp;</strong>
                            </a>
                            <a class="nav-button ml-auto mr-4"><span id="nav-icon3"><span></span><span></span><span></span><span></span></span></a>
                        </div>
                    </div> <!--navbar end-->

                    <div class="fixed-top main-menu">
                        <div class="flex-center p-5">
                            <ul class="nav flex-column">
                                <li class="nav-item delay-1"><a class="nav-link" href="index.html">Home</a></li>
                                <li class="nav-item delay-2"><a class="nav-link" href="about-us.html">About Us</a></li>
                                <li class="nav-item delay-3"><a class="nav-link" href="boer-goat.html">The Boer goat</a></li>
                                <li class="nav-item delay-4"><a class="nav-link" href="export-quarantine.html">Exports and Quarantine Facilities</a></li>
                                <li class="nav-item delay-5"><a class="nav-link" href="our-rams.html">Our Rams</a></li>
                                <li class="nav-item delay-6"><a class="nav-link" href="our-ewes.html">Our Ewes</a></li>
                                <li class="nav-item delay-7"><a class="nav-link" href="goats-for-sale.html">goats for Sale</a></li>
                                <li class="nav-item delay-8"><a class="nav-link" href="blog.html">Blog</a></li>
                                <li class="nav-item delay-9"><a class="nav-link" href="contact-us.html">Contact Us</a></li>
                            </ul>
                        </div>
                    </div> <!--main-menu end-->
                </nav>

CSS：

.bg-dark {
    background-color: transparent!important;
}

.main-menu{
    width: 20%; 
    min-height: 100vh; 
    opacity: 0; 
    visibility: hidden;
    right: 0;
    z-index: 1;
}
.nav-open .main-menu {
    opacity: 1; 
    visibility: visible; 
    background: #ff5000;
 }
.main-menu .nav li a{
    color: #fff!important;
    text-transform: capitalize;
    font-family: 'Droid Serif',serif;
    font-size: 1.175em;
    font-weight: 600;
    transition: 0.3s; 
}
.p-5 {
    padding-top: 1rem!important;
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
    margin-top: 5rem;
}

.main-menu .nav li{
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: cubic-bezier(.45,.005,1);
    -moz-animation-timing-function: cubic-bezier(.45,1);
    -o-animation-timing-function: cubic-bezier(.45,1);
    animation-timing-function: cubic-bezier(.45,1);
}
.nav-open .main-menu .nav li{
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform .2s,opacity .2s;
    transition: transform .2s,opacity .2s;
}
.main-menu .nav li.delay-1{
    -webkit-transition-delay:0.1s; 
    -moz-transition-delay:0.1s; 
    -ms-transition-delay:0.1s; 
    -o-transition-delay:0.1s; 
    transition-delay:0.1s; 
}
.main-menu .nav li.delay-2{
    -webkit-transition-delay:0.2s; 
    -moz-transition-delay:0.2s; 
    -ms-transition-delay:0.2s; 
    -o-transition-delay:0.2s; 
    transition-delay:0.2s; 
}
.main-menu .nav li.delay-3{
    -webkit-transition-delay:0.3s;
     -moz-transition-delay:0.3s; 
     -ms-transition-delay:0.3s; 
     -o-transition-delay:0.3s; 
     transition-delay:0.3s; 
 }
.main-menu .nav li.delay-4{
    -webkit-transition-delay:0.4s; 
    -moz-transition-delay:0.4s; 
    -ms-transition-delay:0.4s; 
    -o-transition-delay:0.4s; 
    transition-delay:0.4s; 
}
.main-menu .nav li.delay-5
{-webkit-transition-delay:0.5s; 
    -moz-transition-delay:0.5s; 
    -ms-transition-delay:0.5s; 
    -o-transition-delay:0.5s; 
    transition-delay:0.5s; 
}
.main-menu .nav li.delay-6{
    -webkit-transition-delay:0.6s; 
    -moz-transition-delay:0.6s; 
    -ms-transition-delay:0.6s; 
    -o-transition-delay:0.6s; 
    transition-delay:0.6s; }
.main-menu .nav li.delay-7{
    -webkit-transition-delay:0.7s; 
    -moz-transition-delay:0.7s; 
    -ms-transition-delay:0.7s; 
    -o-transition-delay:0.7s; 
    transition-delay:0.7s; 
}
.main-menu .nav li.delay-8{
    -webkit-transition-delay:0.8s; 
    -moz-transition-delay:0.8s; 
    -ms-transition-delay:0.8s; 
    -o-transition-delay:0.8s; 
    transition-delay:0.8s; 
}
.main-menu .nav li.delay-9{
    -webkit-transition-delay:0.9s; 
    -moz-transition-delay:0.9s; 
    -ms-transition-delay:0.9s; 
    -o-transition-delay:0.9s; 
    transition-delay:0.9s; 
}

.nav-button{
    position:relative; 
    z-index:1111;
    border:solid 1px #f8f8f8;
    height:42px; 
    display:block; 
    width:50px; 
    padding:12px;
}
.nav-button #nav-icon3{
    width:24px;
    height:22px;
    display:inline-block;
    position:relative;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:.5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    cursor:pointer;
}
.nav-button #nav-icon3 span{
    display:block;
    position:absolute;
    height:3px;
    width:100%;
    background:#FFFFFF;
    border-radius:9px;
    opacity:1;left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:.25s ease-in-out;
    -moz-transition:.25s ease-in-out;
    -o-transition:.25s ease-in-out;
    transition:.25s ease-in-out;
}
.nav-button #nav-icon3 span:nth-child(1){
    top:0;
}
.nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){
    top:7px;
}
.nav-button #nav-icon3 span:nth-child(4){
    top:14px;
}
.nav-open #nav-icon3 span:nth-child(1){
    top:9px;
    width:0;
    left:50%;
}
.nav-open #nav-icon3 span:nth-child(2){
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);}
.nav-open #nav-icon3 span:nth-child(3){
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);}
.nav-open #nav-icon3 span:nth-child(4){
    top:9px;
    width:0;
    right:50%;
}

.flex-center{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    height:100%;
}

JavaScript：

$(document).ready(function(){
  $('.nav-button').click(function(){
  $('body').toggleclass('nav-open');
  });
});
csl6868926 回答：大屏幕右侧的Bootstrap 4滑出菜单
暂时没有好的解决方案，如果你有好的解决方案，请发邮件至：iooj@foxmail.com
bootstrap-4
本文链接：https://www.f2er.com/3126204.html

大家都在问