JS - Lateral Sidebar

Barra lateral para celular

HTML

<!------------- LATERAL SIDEBAR ------------->

  <div id="minimal_wall">

    <input type="checkbox" id="check">

    <label for="check">

      <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com

        /f/ce612125-96d6-4376-a8b3-6b72e463ad1e/

        d6s5d9m-8cbe2096-f452-42e1-a694-ffef7291a4b1.

        png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.

        eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQ

        xNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY

        0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL

        2ZcL2NlNjEyMTI1LTk2ZDYtNDM3Ni1hOGIzLTZiNzJlNDYzYWQxZVwv

        ZDZzNWQ5bS04Y2JlMjA5Ni1mNDUyLTQyZTEtYTY5NC1mZmVmNzI5MWE0YjEucG

        5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.6aaql

        V2GiO50pnn90Oy8UOSg3pZWPf-hsCm7O0Mkevs"

        alt="" style="height: 60px" id="btn">

      <img src="img/cruzx.png" alt="" style="height: 26px" id="cancel">

    </label>

    <div class="sidebar">

        <header>Links</header>

        <ul>

            <li><a href="https://api.whatsapp.com/send/

                ?phone=+528117281794&text=Buen%20día,%20" target="_blank">

                <img src="img/whatsapplogo.jpg" alt="" style="height: 30px;

                vertical-align: middle; margin-right: 15px;"> Whatsapp</a></li>

            <li><a href="https://www.google.com/search?q=nfl+games&source=

                lmns&bih=611&biw=1366&rlz=1C1ONGR_enMX1040MX1040&hl=es&sa=X&ve

                d=2ahUKEwj10I-gm7WBAxU0JN4AHd79BacQ0pQJKAB6BAgBEAI" target="_blank">

                <img src="https://neiuindependent.org/wp-content/uploads/

                2019/11/nfl-national-football-league-royalty-free-thumbnail.jpg"

                 alt="" style="border-radius: 50px; height: 30px;

                vertical-align: middle; margin-right: 15px;">NFL</a></li>

            <li><a href="https://www.google.com/search?q=real+madrid&rlz=

                1C1ONGR_enMX1040MX1040&sxsrf=AJOqlzWXkyzXe3IZxTcO_cp9xrA4CBtr

                cw%3A1676834253739&ei=zXXyY9bjLLDbkPIPnYmWoAs&ved=0ahUKEwiW_qm

                wpqL9AhWwLUQIHZ2EBbQQ4dUDCA8&uact=5&oq=real+madrid&gs_lcp=Cgxnd

                3Mtd2l6LXNlcnAQAzIECCMQJzIECC4QJzILCAAQgAQQsQMQgwEyCwgAEIAEELED

                EIMBMggIABCxAxCDATIICAAQsQMQgwEyCwgAEIAEELEDEIMBMgsIABCABBCxAxC

                DATIFCAAQgAQyCAgAELEDEIMBOgoIABBHENYEELADOgUIIRCgAToQCAAQgAQQ

                FBCHAhCxAxCDAToKCAAQgAQQFBCHAjoFCC4QgAQ6CwguEIAEELEDEIMBSgQI

                QRgAUMAEWOQRYPoTaAFwAXgBgAGPAYgBvQiSAQM1LjWYAQCgAQHIAQjAA

                QE&sclient=gws-wiz-serp" target="_blank">

                <img src="img/rmadrid.png" alt="" style="border-radius: 50px;

                height: 35px; vertical-align: middle; margin-right: 15px;">

                Real Madrid</a></li>

        </ul>

    </div>

  </div>

CSS

/************ LATERAL SIDEBAR ************/

#minimal_wall{

    width: 100%;

    height: 0px;

    background: #042231;

}

.sidebar {

  position: fixed;

  left: -250px;

  width: 250px;

  height: 100%;

  background: #063146;

  transition: all .5s ease;

}

.sidebar header {

  font-size: 22px;

  color: white;

  line-height: 70px;

  text-align: center;

  background: #063146;

  user-select: none;

}

.sidebar ul a{

  display: block;

  height: 100%;

  width: 100%;

  line-height: 65px;

  font-size: 16px;

  color: white;

  padding-left: 40px;

  box-sizing: border-box;

  border-bottom: 1px solid black;

  border-top: 1px solid rgba(255,255,255,.1);

  transition: .4s;

}

.sidebar ul li:hover a{

  padding-left: 50px;

}

.sidebar ul a i{

  margin-right: 16px;

}

#check{

  display: none;

}

label #btn,label #cancel{

  position: absolute;

  background: #ffffff;

  border-radius: 50px;

  cursor: pointer;

  padding: 3px;

}

label #btn{

  left: 15px;

  top: 20px;

  font-size: 35px;

  color: white;

  transition: all .5s;

}

label #cancel{

  z-index: 1111;

  left: -195px;

  top: 20px;

  font-size: 30px;

  color: #0a5275;

  padding: 6px;

  transition: all .5s ease;

 

}

#check:checked ~ .sidebar{

  left: 0;

}

#check:checked ~ label #btn{

  left: 250px;

  opacity: 0;

  pointer-events: none;

}

#check:checked ~ label #cancel{

  left: 210px;

}

JAVASCRIPT

// nuevo diseño

posicionarMenu();

 

$(window).scroll(function() {    

    posicionarMenu();

});

 

function posicionarMenu() {

    var altura_del_header = $('.header').outerHeight(true);

    var altura_del_menu = $('.menu').outerHeight(true);

 

    if ($(window).scrollTop() >= altura_del_header){

        $('.menu').addClass('fixed');

        $('.wrapper').css('margin-top', (altura_del_menu) + 'px');

    } else {

        $('.menu').removeClass('fixed');

        $('.wrapper').css('margin-top', '0');

    }

}