Question

我已经完成了侧边栏菜单，但我希望它从右侧下拉，但我的下降。我尝试搜索那些下拉列表从右边出来但我找不到很多例子。有人可以教我如何使它看起来在右侧而不是向下移动？提前致谢

正如您在我的屏幕截图中看到的那样，我的下拉列表仅向下，我希望它出现在右侧。我该怎么做？

sidebar.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>SideBar Menu</title>
        <link href="{{ asset('css/test.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="sidebar">
            <ul>
                <li><a href="{{route('home')}}">Summary</a></li>        
                <li><a href="{{route('deleted_result')}}">Deleted Records</a></li>
                <li><a href="{{url('/verification')}}">Verification</a></li>
                <li><a href="{{url('/evaltest')}}">Evalaluation</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit User Information <span class="caret"></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                        <li><a href="{{ url('/edit') }}" style="color: red">Personal Information Edit</a></li>
                        <li><a href="{{ url('/edit0')}}" style="color: red">Driver License Class Edit</a></li>
                        <li><a href="{{ url('/edit4')}}" style="color: red">Language Edit</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Evaluation <span class="caret"></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                        <li><a href="{{ url('/pending')}}" style="color: red">Pending remarks</a></li>
                    </ul>
                </li>
            </ul>
            <div id="sidebar-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $('#sidebar-btn').click(function(){
                $('#sidebar').toggleClass('visible');
            });
        });
        </script>
    </body>
</html>

test.css

body{
    margin:0px;
    padding:0px;
    font-family:"Helvetica Neue", Helvetica, Arial;
}

#sidebar{
    background:blue;
    width:200px;
    height:100%;
    display:block;
    position:fixed;
    left:-200px;
    top:0px;
    transition:left 0.3s linear;
}

#sidebar.visible{
    left:0px;
    transition:left 0.3s linear;
}

ul{
    margin:0px;
    padding:0px;
}

ul li{
    list-style:none;
}

ul li a{
    background:#0000FF;
    color:white;
    border-bottom:1px solid #111;
    display:block;
    width:180px;
    padding:10px;
    text-decoration: none;
}

#sidebar-btn{
    display:inline-block;
    vertical-align: middle;
    width:20px;
    height:15px;
    cursor:pointer;
    margin:20px;
    position:absolute;
    top:0px;
    right:-60px;
}

#sidebar-btn span{
    height:1px;
    background:white;
    margin-bottom:5px;
    display:block;
}

#sidebar-btn span:nth-child(2){
    width:75%;
}

#sidebar-btn span:nth-child(3){
    width:50%;
}

#navbar-toggle collapsed{
    background:#0000FF;
}

.navbar {
    background:#0000FF;
}

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, 
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: white;
    background-color: transparent;
}

Answer 1

如果要将下拉列表设置为静态，可以将下拉列表设置为绝对位置。

＆＃13;

ul{
    margin:0px;
    padding:0px;
    position:absolute;
    left:300px; /* adjust the left based on need */
}

＆＃13;

如果要设置动态位置，请计算偏移量并设置左侧位置。Set offset dynamically using javascript

Answer 2

下面是左下角而不是向下位置的下拉菜单的工作解决方案

#sidebar.visible{
    left:0px;
    transition:left 0.3s linear;
}

ul{
    margin:0px;
    padding:0px;
}

ul li{
    list-style:none;
}

ul li a{
    background:#0000FF ;
    color:white;
    border-bottom:1px solid #111;
    display:block;
    width:180px;
    padding:10px;
    text-decoration: none;
}

#sidebar-btn{
    display:inline-block;
    vertical-align: middle;
    width:20px;
    height:15px;
    cursor:pointer;
    margin:20px;
    position:absolute;
    top:0px;
    right:-60px;
}

#sidebar-btn span{
    height:1px;
    background:white;
    margin-bottom:5px;
    display:block;
}

#sidebar-btn span:nth-child(2){
    width:75%;
}

#sidebar-btn span:nth-child(3){
    width:50%;
}

#navbar-toggle collapsed{
    background:#0000FF ;

}


.navbar {background:#0000FF ;}

 nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: white;
    background-color: transparent;
}
.dropdown-menu {
    position: absolute;
    top: 0;
    left: 180px;
    min-width: 180px;
}

如果您需要任何进一步的帮助，请随意

侧边栏菜单下拉列表从右侧下降

2 个答案: