Last post Mar 12, 2020 02:45 AM by yij sun
Member
75 Points
513 Posts
Mar 11, 2020 05:00 AM|zhyanadil.it@gmail.com|LINK
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; position: fixed; 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>
Contributor
3730 Points
1409 Posts
Mar 12, 2020 02:45 AM|yij sun|LINK
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;*/ position: fixed; 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 { position: absolute; 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
Member
75 Points
513 Posts
how to change sidebar to toggle on small device
Mar 11, 2020 05:00 AM|zhyanadil.it@gmail.com|LINK
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
Contributor
3730 Points
1409 Posts
Re: how to change sidebar to toggle on small device
Mar 12, 2020 02:45 AM|yij sun|LINK
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:
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