Saturday 15 August 2015

HTML / CSS fluid collapsible sidebar -


I am trying to create a toggleable sidebar for this website, and what do I need  Image

I want the main content to be on the screen after fluid and optimization. Twitter is a simple way to do this without using structures such as Bootstrap .... So what am I asking if there is no way to open the sidebar without any framework?

Was it looking for you? let me know.

HTML

  & lt; Div id = "inline_container" & gt; & Lt; Div id = "toggle_menu" & gt; & Lt; Div id = "toggle" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "main_container" & gt; Main container & lt; / Div & gt; & Lt; / Div & gt;   

javascript

  var toggled = true; $ ("Width");} {{toggled = true; $ (" $ (This). Value ({width: "200px"}, "sharp");}});   

css

  * {margin: 0; Padding: 0;}. Thebody {height: 100%; Width: 100%;} #inline_container {height: 500px; Width: 100%;} #toggle_menu {height: 100%; Width: 20px; Display: Inline-block; Swim left; Background: lime;} # main_ container {height: 100%; Width: 65%; Display: Inline-block; Float: left;} # toggle {height: 100%; Width: 20px; Display: Inline-block; Swim left; Background: green;}    

No comments:

Post a Comment