Visit our webpage at:
You can also check out the code on Codepen: https://codepen.io/mitchellbarron10/pen/EqZjQj
This project involves JavaScript embedded in html code.
The task at hand is to ensure that the navbar (located on the top right corner of the page) remains closed upon loading. When clicked, it should open, and when the X button on the navbar is clicked, it should close.
I attempted to use separate buttons for openbtn and closebtn functionalities.
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
<ul id="menuicons">
<a href="../html-link.htm"><img src="images/noun_Login_801390.png" width="82" height="86" title="White flower" alt="Flower"></a>
<a href="../html-link.htm"><img src="images/noun_Shopping Cart_17861.png" width="82" height="86" title="White flower" alt="Flower"></a>
</ul>
</div>
<script type="text/javascript">/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
} </script>
<script type="text/javascript">/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}</script>