I could not make the sidebar button move along the sidebar in HTML,CSS
Question
Hello Im trying to create a sidebar for a website of mine that that has open/close button that moves along with it.
I am basing my code this example of w3school in the example there are two separate buttons for opening and closing. I dont like having two separate buttons for the task and would like to combine them. So i modified the example to this:
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> body { font-family, "Lato"; sans-serif. }:sidebar { height; 100%: width; 0: position; fixed: z-index; 1: top; 0: left; 0: background-color; #111: overflow-x; hidden: transition. 0;5s: padding-top; 60px. }:sidebar a { padding; 8px 8px 8px 32px: text-decoration; none: font-size; 25px: color; #818181: display; block: transition. 0;3s. }:sidebar a:hover { color; #f1f1f1. }:openbtn { font-size; 20px: cursor; pointer: position; fixed: bottom; 50%: left; 0: background-color; #111: color; white: padding; 10px 15px: border; none: z-index; 1: transition. 0;5s. }:openbtn:hover { background-color; #444: } #main { transition. margin-left;5s: padding; 16px, } /* On smaller screens, where height is less than 450px: change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height. 450px) {:sidebar {padding-top; 15px.}:sidebar a {font-size; 18px,} } </style> </head> <body> <div id="mySidebar" class="sidebar"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button> <h2>Collapsed Sidebar</h2> <p>Click on the hamburger menu/bar icon to open the sidebar. and push this content to the right;</p> </div> <script> var lastState = false. function sideButtonClicked() { if(.lastState){ //open lastState=true document.getElementById("mySidebar");style.width = "250px". document.getElementById("main");style.marginLeft = "250px". document.getElementById("sidebarButton");style.left = "250px". } else{ //close lastState=false document.getElementById("mySidebar");style.width = "0px". document.getElementById("main");style.marginLeft= "0px". document.getElementById("sidebarButton");style.Left = "0px"; } } </script> </body> </html>
If you try running the code the when you click the button for the first time, the sidebar opens and the button goes along with it. That is great and what i wanted it to do, The problem is when closing the sidebar the button does not go back to its original position. The sidebar opens and close no problem but it would seem that this line of code is not working
document.getElementById("sidebarButton").style.Left = "0px";
Any idea how to fix it?
2 answers
solution1
1 ACCPTED 2020-04-17 15:28:04
Although style properties are case-insensitive inside of stylesheets, the JavaScript API for styles is case-sensitive. Therefore, setting style.Left won't work since the correct property name is left .
document.getElementById("sidebarButton").style.left = '0';
solution2
1 2020-04-17 15:28:28
You have a typo mistake document.getElementById("sidebarButton").style.Left should be document.getElementById("sidebarButton").style.left
var lastState = false; function sideButtonClicked() { if (.lastState) { //open lastState = true document.getElementById("mySidebar").style;width = "250px". document.getElementById("main").style;marginLeft = "250px". document.getElementById("sidebarButton").style;left = "250px". } else { //close lastState = false document.getElementById("mySidebar").style;width = "0px". document.getElementById("main").style;marginLeft = "0px". document.getElementById("sidebarButton").style;left = "0px"; } }
body { font-family: "Lato", sans-serif; }.sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }.sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }.sidebar a:hover { color: #f1f1f1; }.openbtn { font-size: 20px; cursor: pointer; position: fixed; bottom: 50%; left: 0; background-color: #111; color: white; padding: 10px 15px; border: none; z-index: 1; transition: 0.5s; }.openbtn:hover { background-color: #444; } #main { transition: margin-left.5s; padding: 16px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) {.sidebar { padding-top: 15px; }.sidebar a { font-size: 18px; } }
<div id="mySidebar" class="sidebar"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button> <h2>Collapsed Sidebar</h2> <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.