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