Awesome Sidebar Menu With Toggle – Using HTML CSS JQuery

20
45



DarkCode in Facebook

Paypal Donation Link

Music 1
Nom : Itro & Tobu – Cloud 9 [NCS Release]
Link :

Tobu:
➞ Spotify
➞ SoundCloud
➞ Facebook
➞ Twitter
➞ YouTube

Itro:
➞ Spotify
➞ Facebook
➞ Twitter
➞ YouTube
➞ SoundCloud

Music 2
Nom : Disfigure – Blank [NCS Release]
Link :

Follow Disfigure:

Nguồn:https://quydinh.com/

20 COMMENTS

  1. Idk why but the content:'<icon code>'; property never works for me.

    Just going to do it in font awesome I guess

  2. You are a brilliant thinker, your way of coding inspired me. can not thank you enough. big fan from now on.

  3. Thanks for this. How to animate the open and close buttons as the transition property CSS doesn't work when I put that on?

  4. Nice
    Though I am facing a weird issue where doing float: right and margin-right: -100px would cause a horizontal scroll bar to appear, which is not the case with the left one

  5. Mine is not runing any suggestion?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title> Stucki de México </title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    </head>

    <body>
    <div class="sidebar">
    <ul>
    <li><a class = "option" href="#">Iniciar Turno</a></li>
    <li><a class = "option" href="#">Terminar Turno</a></li>
    <li><a class = "option" href="#">Administrar</a></li>
    <li><a class = "option" href="#">Pruebas</a></li>
    <li><a class = "option" href="#">Reportar Paro</a></li>
    </ul>
    </div>
    <a class="btn_list"></a>
    <script type="text/javascript">
    $('btn_list').on("click", function(){
    $('.btn_list').toggleClass('btnc');
    $('.sidebar').toggleClass('side');
    });
    </script>
    </body>
    </html>

    ****And the CSS

    @import url('http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');

    .option{

    }

    body,html{
    margin:0;
    padding:0;
    height: 100%;
    width: 100;
    }

    .sidebar{
    float: left;
    width: 220px;
    height: 100%;
    background: #2C3E50;
    overflow: hidden;
    margin-left: -220px;
    transition: 0.8s all;
    }

    .side{
    margin-left: 0px;
    }

    .sidebar ul{
    margin: 0;
    padding: 0;
    }

    .sidebar ul li{
    list-style: none;
    }

    .sidebar ul li a{
    text-decoration: none;
    color: white;
    height: 80px;
    width: 100%;
    font-size: 30px;
    line-height: 80px;
    display: block;
    transition: 0.6s all;
    }

    .sidebar ul li a:hover{
    background: #34495E;
    }

    .btn_list{
    float: left;
    padding: 0 10px;
    font-size: 40px;
    text-decoration: none;
    color: #2C3E50;
    cursor: pointer;
    }

    .btn_list:before {
    content: url("toggle2.png");
    }

    .btnc:before {
    content: url("toggle.png");
    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here