Sidebar menu dropdown coming down from the right

Question

I have completed the sidebar menu already but I want it to dropdown coming from the right but mine is coming downwards. I try to search for those whose dropdown list comes out from the right but I can't find a lot of example. Can someone teach me what should I do to make it appear to the right side instead of coming downwards? Thanks in advance

As you can see in my screenshot, my dropdown is coming downwards only, I want it to appear at the right side. How do I do it?

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

score 1 · Answer 1 · answered Nov 15 '17 at 06:57

If you want to position the dropdown static, you can set the dropdown to absolute position.

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

If you want to set dynamic position, Calculate the offset and set left position.Set offset dynamically using javascript

score 1 · Accepted Answer · edited Nov 15 '17 at 07:05

Here is with working solution for the drop-down menu opening in left instead of in downward position

#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;
}

Feel free if you need any further help

Sidebar menu dropdown coming down from the right

2 Answers2