W3.CSS Sidebar | sidebar web
W3.CSSVerticalNavigationBarsWithsidenavigation,youhaveseveraloptions:AlwaysdisplaythenavigationpanetotheleftofthepagecontentUseacollapsible,"fullyautomatic"responsivesidenavigationOpennavigationpaneovertheleftpartofthepagecontentOpennavigationpaneoverallofthepagecontentSlidethepagecontenttotherightwhenopeningthenavigationpaneDisplaythenavigationpaneontherightsideinsteadoftheleftsideAlwaysDisplaytheSidebarExample Link1 Link2 Link3
With side navigation, you have several options:
Always display the navigation pane to the left of the page content Use a collapsible, "fully automatic" responsive side navigation Open navigation pane over the left part of the page content Open navigation pane over all of the page content Slide the page content to the right when opening the navigation pane Display the navigation pane on the right side instead of the left side Always Display the Sidebar Example Link 1 Link 2 Link 3<div style="margin-left:25%">... page content ...</div>
Try It Yourself »[1] Open the Sidebar Navigation Over a Part of the Content Example function w3_open() { document.getElementById("mySidebar").style.display = "block";}function w3_close() { document.getElementById("mySidebar").style.display = "none";}
Try It Yourself »[2] Open the Sidebar Navigation Over the Content Example function w3_open() { d...