 HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP MORE  REFERENCES  EXERCISES   

w3schools.com
Hide Navbar on Scroll THE WORLD'S LARGEST WEB DEVELOPER SITE

Subscribe to Packt for

Learn tech skills unlimited access to text
and video content from
your way 7,000 products. Ditch the
developer
How TO - Collapse Sidepanel webinars
❮ Previous Next ❯

Learn how to create a collapsible sidepanel menu.

Learn tech skills

your way with a
☰ Toggle Sidepanel Packt
subscription.

Collapsed Sidepanel
Click on the hamburger menu/bar icon to open the sidepanel.

COLOR PICKER

Try it Yourself »

HOW TO

Create a Collapsed Sidepanel Tabs

Dropdowns
Step 1) Add HTML:
Accordions
Side Navigation

Example Top Navigation

Modal Boxes
Progress Bars
<div id="mySidepanel" class="sidepanel"> Parallax
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> Login Form
<a href="#">About</a> HTML Includes
<a href="#">Services</a> Google Maps
<a href="#">Clients</a> Range Sliders
<a href="#">Contact</a> Tooltips
</div> Slideshow
Filter List
Sort List
<button class="openbtn" onclick="openNav()">&#9776; Toggle Sidepanel</button>
<h2>Collapsed Sidepanel</h2>
<p>Content...</p>
SHARE

 
Step 2) Add CSS:

Example
CERTIFICATES
/* The sidepanel menu */ HTML
.sidepanel { CSS
height: 250px; /* Specify a height */ JavaScript
width: 0; /* 0 width - change this with JavaScript */ SQL
position: fixed; /* Stay in place */ Python
z-index: 1; /* Stay on top */ PHP
top: 0; jQuery
Bootstrap
left: 0;
XML
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
Read More »
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */

.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}

/* Position and style the close button (top right corner) */

.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */

.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}

.openbtn:hover {
background-color: #444;
}

Find the technology insight

Ditch the developer and support you need with
Packt’s 7,000 eBooks and
webinars videos.

Step 3) Add JavaScript:

Example

/* Set the width of the sidebar to 250px (show it) */

function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}

/* Set the width of the sidebar to 0 (hide it) */

function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}

Try it Yourself »

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

❮ Previous Next ❯

Learn tech skills your way

Find the technology insight and support

you need with Packt’s 7,000 eBooks and
videos.
Packt

Elasticsearch: Intro to ELK

Watch an introductory primer on ingest, search,
analysis, and visualization capabilities.

Elasticsearch Sign Up

REPORT ERROR PRINT PAGE FORUM ABOUT

Top Tutorials Top References Top Examples Web Certificates

HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples SQL Certificate
SQL Tutorial Python Reference SQL Examples Python Certificate
Python Tutorial W3.CSS Reference Python Examples jQuery Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples Bootstrap Certificate
PHP Tutorial HTML Colors PHP Examples XML Certificate
jQuery Tutorial jQuery Reference jQuery Examples
Java Tutorial Java Reference Java Examples Get Certified »
C++ Tutorial Angular Reference XML Examples

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are
constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie
and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.