locked
how to change sidebar to toggle on small device RRS feed

  • Question

  • User-1634604574 posted

    i have this code which hide side bar on small device i don't want to to hide it i want change it to toggle on small device

        #sidenav {
    height: 100%;
    width: 280px;
    ;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
    transition: all 300ms ease 0s;
    }
    
    #sidenav a {
    padding: 0px 0px 0px 32px;
    margin: 0px;
    text-decoration: none;
    color: #0e1c2c;
    display: block;
    transition: 0.3s
    }
    
    #sidenav a:hover {
    color: #ea4e3c;
    }
    
    @@media (max-width: 768px) {
        #sidenav {
            display: none;
        }
    }

    <div id="sidenav">
        <img id="logo" src="Images/Logo.png">
        <a href="#first">
            <p>Home</p>
        </a>
        <a href="#second">
            <p>What?</p>
        </a>
        <a href="#third">
            <p>Who?</p>
        </a>
        <a href="#fourth">
            <p>Contact</p>
        </a>
    </div>

    Wednesday, March 11, 2020 5:00 AM

Answers

  • User1535942433 posted

    Hi zhyanadil.it@gmail.com,

    Accroding to your description,I suggest you could create a button and you could click the button to toggle the sidenav.

    Besides,I suggest you could use bootstrap navbar or mdb sidenav.These are more Simple and convenient.

    More details,you could refer to below codes:

     <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="Scripts/jquery-3.0.0.min.js"></script>
        <style>
            #sidenav {
                height: 100%;
                width: 0;
                /*width: 280px;*/
                ;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: #111;
                overflow-x: hidden;
                transition: 0.5s;
                padding-top: 10px;
                /*transition: all 300ms ease 0s;*/
            }
    
                #sidenav a {
                    padding: 0px 0px 0px 32px;
                    margin: 0px;
                    text-decoration: none;
                    color: #818181;
                    display: block;
                    font-size: 25px;
                    transition: 0.3s
                }
    
                    #sidenav a:hover {
                        color: #f1f1f1;
                    }
    
                #sidenav .closebtn {
                    ;
                    top: 0;
                    right: 25px;
                    font-size: 36px;
                    margin-left: 50px;
                }
    
            .openbtn {
                font-size: 20px;
                cursor: pointer;
                background-color: #111;
                color: white;
                padding: 10px 15px;
                border: none;
            }
    
                .openbtn:hover {
                    background-color: #444;
                }
    
            #main {
                transition: margin-left .5s;
                padding: 16px;
            }
            /*@media (max-width: 768px) {
                #sidenav {
                    display: none;
                }
            }*/
            @media screen and (max-height: 768px) {
                #sidenav {
                    padding-top: 15px;
                }
    
                    #sidenav a {
                        font-size: 18px;
                    }
            }
        </style>
    
    
     <div id="sidenav">
                <a href="javascript:void(0)" class="closebtn">×</a>
                <a href="#first">
                    <p>Home</p>
                </a>
                <a href="#second">
                    <p>What</p>
                </a>
                <a href="#third">
                    <p>Who</p>
                </a>
                <a href="#fourth">
                    <p>Contact</p>
                </a>
            </div>
            <div id="main">
                <asp:Button ID="Button1" runat="server" Text="☰ Open Sidebar" class="openbtn" />
            </div>
            <script>
                $(function () {
                    $(".openbtn").on('click', function () {
                        event.preventDefault();
                        $("#sidenav").width("250px");
                        $("#main").css("margin-left", "250px");
                    })
                    $(".closebtn").on('click', function () {
                        event.preventDefault();
                        $("#sidenav").width("0px");
                        $("#main").css("margin-left", "0px");
                    })
                })
            </script>

    Result:

    More details,you could refer to below articles:

    Bootstrap-sidebar:

    https://bootstrapious.com/p/bootstrap-sidebar

    MDB-sidenav:

    https://mdbootstrap.com/docs/jquery/navigation/sidenav/

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2020 2:45 AM