Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	HTML Sidenav Tutorial
ID	4841267216957440
Created	7 months ago, 1716057899271
Updated	7 months ago, 1716057910465
Code	<!DOCTYPE html> <!-- HTML Sidenav Tutorial by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) Learn to make a sleek and functional side navigation menu using HTML, CSS, and JavaScript. Beginner friendly! Remember to open a new webpage so that you can copy paste the example code there and play around until you are familiar with all of it. If you have any questions, tell me in the Questions section below. Don't undestand a piece of code? Play around with it: What will happen if I remove this line? What will happen if I change this to 30 instead of 3? If you're allowed to you can search it up: Google: text-decoration CSS Firefox: h1 tag HTML Edge: how to use google fonts etc. Released 18 May 2024 at around 2:45 PM. --> <html> <head> <meta charset="utf-8"> <title>HTML Sidenav Tutorial</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Mono&family=Lobster&family=Material+Icons&family=Parisienne&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/paraiso-dark.min.css" rel="stylesheet"> <style> body { background-color: rgb(255, 255, 255); padding: 30px; } h1, h2, h3 { font-family: "Roboto", arial; font-weight: 400; } p { font-weight: 400; line-height: 22px; font-family: "Roboto", arial; } pre code { font-size: 12px; line-height: 16px; border-radius: 2px; padding: 10px 15px !important; font-family: "Roboto Mono"; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.21); } code { color: rgb(0, 0, 0); } .example { background: #FFF; padding: 10px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.21); } .example a { font-family: "Roboto", sans-serif; color: rgb(45, 116, 214); text-decoration: none; } .example a:hover { color: rgb(6, 65, 120); text-decoration: underline; } button { background-color: #80DEEA; font-family: "Roboto", sans-serif; font-weight: 500; font-size: 14px; border: none; border-radius: 2px; height: 40px; padding: 0px 16px; cursor: pointer; transition: background-color 0.1s; } button:hover { background-color: #4DD0E1; } button:focus { background-color: #26C6DA; } a { font-family: "Roboto", sans-serif; font-weight: 500; color: rgb(70, 156, 95); text-decoration: none; } a:hover { color: rgb(48, 117, 68); text-decoration: underline; } nav.navbar { background-color: #37474F; height: 60px; display: flex; justify-content: center; } nav.navbar a { text-decoration: none; color: #FFF; padding: 0 20px; height: 60px; line-height: 60px; } nav.navbar a:hover { background-color: #263238; color: #FFF; text-decoration: none; } .example { position: relative; } /* Custom Sidenav Styles / #sidenav { height: 100%; / Set the height to cover the entire viewport / width: 0; / Initially, the side navigation is hidden / position: fixed; / Position the sidenav relative to the viewport / z-index: 1; / Ensure the sidenav stays on top of other elements / top: 0; / Align the sidenav to the top of the viewport / left: 0; / Align the sidenav to the left of the viewport / background-color: #333; / Dark background color for the sidenav / overflow-x: hidden; / Hide any content that overflows horizontally / transition: width 0.5s; / Smooth transition for the sidenav width / padding-top: 60px; / Add padding at the top to accommodate a fixed navbar / } #sidenav a { padding: 15px 20px; / Set padding for the links inside the sidenav / text-decoration: none; / Remove underlines from the links / font-size: 20px; / Set the font size for the links / color: #ccc; / Set the default text color for the links / display: block; / Display the links as block elements / transition: color 0.3s; / Smooth transition for link text color / } #sidenav a:hover { color: #fff; / Change the text color on hover / } #sidenav .closebtn { position: absolute; / Position the close button relative to its containing element / top: 0; / Align the close button to the top of the sidenav / right: 10px; / Align the close button to the right side with a small margin / font-size: 28px; / Set the font size for the close button / } #main { transition: margin-left .5s; / Smooth transition for the main content margin / padding: 20px; / Add padding to the main content / } </style> </head> <body> <div class='scene'> <h1>HTML Sidenav Tutorial</h1> <p><b style="font-weight:500;">by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios</a></b></p> <button onclick='changePage(1);'>View Demo</button> <p>Learn how to make a side navigation menu (sidenav) for your website using HTML, CSS, and JavaScript. <br>Open a <a href="https://www.khanacademy.org/computer-programming/new/webpage" target="_blank">new webpage</a> to follow along and write your own code.</p> <h2>Starter Code</h2> <pre><code><!DOCTYPE html><br><html><br> <head><br> <meta charset='utf-8'><br> <title>Sidenav</title><br> <style> / CSS goes here / </style> </head><br> <body><br> <!-- HTML goes here --><br> </body><br></html></code></pre> <h2>Headers</h2> <p style="font-weight:500;color:#1B5E20;">Prerequisites: Google Fonts, Basic HTML/CSS</p> <h2>Sidenav HTML Structure</h2> <p>Add the HTML below inside the body tag in your program. I have explained the purpose of every single tag we will be using.</p> <pre><code><!-- Opening the side navigation menu --> <div id="sidenav" class="sidenav"> <!-- Close button to close the side navigation --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <!-- Links for different sections --> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <!-- Main content area --> <div id="main"> <!-- Button to open the side navigation --> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Sidenav</span> </div> </code></pre> <h2>Sidenav CSS</h2> <p>Add the CSS below inside the style tag in your program. I have explained the purpose of every single CSS property we will be using.</p> <pre><code>/ Custom Sidenav Styles / #sidenav { height: 100%; / Set the height to cover the entire viewport / width: 0; / Initially, the side navigation is hidden / position: fixed; / Position the sidenav relative to the viewport / z-index: 1; / Ensure the sidenav stays on top of other elements / top: 0; / Align the sidenav to the top of the viewport / left: 0; / Align the sidenav to the left of the viewport / background-color: #333; / Dark background color for the sidenav / overflow-x: hidden; / Hide any content that overflows horizontally / transition: width 0.5s; / Smooth transition for the sidenav width / padding-top: 60px; / Add padding at the top to accommodate a fixed navbar / } #sidenav a { padding: 15px 20px; / Set padding for the links inside the sidenav / text-decoration: none; / Remove underlines from the links / font-size: 20px; / Set the font size for the links / color: #ccc; / Set the default text color for the links / display: block; / Display the links as block elements / transition: color 0.3s; / Smooth transition for link text color / } #sidenav a:hover { color: #fff; / Change the text color on hover / } #sidenav .closebtn { position: absolute; / Position the close button relative to its containing element / top: 0; / Align the close button to the top of the sidenav / right: 10px; / Align the close button to the right side with a small margin / font-size: 28px; / Set the font size for the close button / } #main { transition: margin-left .5s; / Smooth transition for the main content margin / padding: 20px; / Add padding to the main content / } </code></pre> <h2>Sidenav JavaScript</h2> <p>Add the following JavaScript to handle the opening and closing of the sidenav. I have explained the purpose of every document method we will be using.</p> <pre><code><script> // opens sidenav function openNav() { document.getElementById("sidenav").style.width = "250px"; / Set the width of the sidenav to 250 pixels / document.getElementById("main").style.marginLeft = "250px"; / Push the main content to the right by 250 pixels / } // closes sidenav function closeNav() { document.getElementById("sidenav").style.width = "0"; / Set the width of the sidenav to 0, hiding it / document.getElementById("main").style.marginLeft = "0"; / Reset the margin of the main content, bringing it back to its original position / } </script> </code></pre> <h2>Full Source Code</h2> <pre><code><!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Sidenav</title> <style> / Custom Sidenav Styles / #sidenav { height: 100%; / Set the height to cover the entire viewport / width: 0; / Initially, the side navigation is hidden / position: fixed; / Position the sidenav relative to the viewport / z-index: 1; / Ensure the sidenav stays on top of other elements / top: 0; / Align the sidenav to the top of the viewport / left: 0; / Align the sidenav to the left of the viewport / background-color: #333; / Dark background color for the sidenav / overflow-x: hidden; / Hide any content that overflows horizontally / transition: width 0.5s; / Smooth transition for the sidenav width / padding-top: 60px; / Add padding at the top to accommodate a fixed navbar / } #sidenav a { padding: 15px 20px; / Set padding for the links inside the sidenav / text-decoration: none; / Remove underlines from the links / font-size: 20px; / Set the font size for the links / color: #ccc; / Set the default text color for the links / display: block; / Display the links as block elements / transition: color 0.3s; / Smooth transition for link text color / } #sidenav a:hover { color: #fff; / Change the text color on hover / } #sidenav .closebtn { position: absolute; / Position the close button relative to its containing element / top: 0; / Align the close button to the top of the sidenav / right: 10px; / Align the close button to the right side with a small margin / font-size: 28px; / Set the font size for the close button / } #main { transition: margin-left .5s; / Smooth transition for the main content margin / padding: 20px; / Add padding to the main content / } </style> </head> <body> <!-- Opening the side navigation menu --> <div id="sidenav" class="sidenav"> <!-- Close button to close the side navigation --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <!-- Links for different sections --> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <!-- Main content area --> <div id="main"> <!-- Button to open the side navigation --> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Sidenav</span> </div> <script> // opens sidenav function openNav() { document.getElementById("sidenav").style.width = "250px"; / Set the width of the sidenav to 250 pixels / document.getElementById("main").style.marginLeft = "250px"; / Push the main content to the right by 250 pixels / } // closes sidenav function closeNav() { document.getElementById("sidenav").style.width = "0"; / Set the width of the sidenav to 0, hiding it / document.getElementById("main").style.marginLeft = "0"; / Reset the margin of the main content, bringing it back to its original position / } </script> </body> </html> </code></pre> <p>Once you are done feel free to save the project and share the link with me in the Tips and Thanks below.</p> <p>You can subscribe to the author <a href="https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016?width=600px" target="_blank">here</a>.</p> <p>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/'>LeaferStudios</a></p> </div> <div class='scene'> <!-- Opening the side navigation menu --> <div id="sidenav" class="sidenav"> <!-- Close button to close the side navigation --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <!-- Links for different sections --> <a href="#"style='font-family:serif;'>About</a> <a href="#"style='font-family:serif;'>Services</a> <a href="#"style='font-family:serif;'>Clients</a> <a href="#"style='font-family:serif;'>Contact</a> </div> <!-- Main content area --> <div id="main"> <!-- Button to open the side navigation --> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Sidenav</span> <p style='padding-top:90px;'>Click the icon to toggle the side navigation menu. Want to learn how to make this?</p> <button onclick='changePage(0);'>Read Tutorial</button> <br><br> <p>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/'>LeaferStudios</a></p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script type> hljs.initHighlightingOnLoad(); //document.body.style.all = "initial"; </script> <script> // Function to handle S.P.A. scene changes function changePage(id) { // get page elements var pages = document.getElementsByClassName("scene"); // loop through page elements for (var i = 0; i < pages.length; i++) { // hide all pages pages[i].style.display = "none"; } // display only [id] page, starting from page 0 document.getElementsByClassName("scene")[id].style.display = "block"; } // change to page 0 changePage(1); // opens sidenav function openNav() { document.getElementById("sidenav").style.width = "250px"; / Set the width of the sidenav to 250 pixels / document.getElementById("main").style.marginLeft = "250px"; / Push the main content to the right by 250 pixels / } // closes sidenav function closeNav() { document.getElementById("sidenav").style.width = "0"; / Set the width of the sidenav to 0, hiding it / document.getElementById("main").style.marginLeft = "0"; / Reset the margin of the main content, bringing it back to its original position / } </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*"); } }; </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvltePMCAw
Votes	4
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	7 months ago, 1716062652018
Updated	7 months ago, 1716062652018
Source Deleted	unknown