i trying write article beside vertical menu, article going inside menu. want menu fixed on page on left side , new articles or pictures should come on after menu.
my html
<nav id="wrapper-250"> <ul class="accordion"> <li id="one" class="files"> <a href="#one">health beat</a> <ul class="sub-menu"> <li><a href="#"><em>01</em>sub menu 1</a> <ul class="sub-sub-menu"> <li><a href="#"><em>a</em>sub menu 2</a></li> <li><a href="#"><em>b</em>sub menu 2</a></li> <li><a href="#"><em>c</em>sub menu 2</a></li> <li><a href="#"><em>d</em>sub menu 2</a></li> <li><a href="#"><em>e</em>sub menu 2</a></li> </ul> </li> <li><a href="#"><em>02</em>sub menu 1</a></li> <li><a href="#"><em>03</em>sub menu 1</a></li> <li><a href="#"><em>04</em>sub menu 1</a></li> <li><a href="#"><em>05</em>sub menu 1</a></li> </ul> </li> <li id="two" class="mail"> <a href="#two">mail</a> <ul class="sub-menu"> <li><a href="#"><em>01</em>hotmail</a></li> <li><a href="#"><em>02</em>yahoo</a></li> </ul> </li> <li id="three" class="cloud"> <a href="#three">cloud</a> <ul class="sub-menu"> <li><a href="#"><em>01</em>connect</a></li> <li><a href="#"><em>02</em>profiles</a></li> <li><a href="#"><em>03</em>options</a></li> <li><a href="#"><em>04</em>connect</a></li> <li><a href="#"><em>05</em>profiles</a></li> <li><a href="#"><em>06</em>options</a></li> </ul> </li> <li id="four" class="sign"> <a href="#four">sign out</a> <ul class="sub-menu"> <li><a href="#"><em>01</em>log out</a></li> <li><a href="#"><em>02</em>delete account</a></li> <li><a href="#"><em>03</em>freeze account</a></li> </ul> </li> </ul> </nav> <div id="body-part"> <p> </p> </div>
add big padding-left #body-part:
padding-left: 500px; /* example */ demo here: http://jsfiddle.net/balq1d1k/
or can using jquery if width of #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10)); 
Comments
Post a Comment