title: Sidebar navigation and display content on right side
body: <p>I want to display sidebar navigation(left menu links) and content of each clicked vertical menu display on right side.</p>
  
  <p>For example lets say I have this left menu:</p>
  
  <ul>
  <li>London</li>
  <li>New York</li>
  </ul>
  
  <p>If I click on London link the content/page should display on right side and same for New york link.</p>
  
  <p><a href="http://jsfiddle.net/J5nCS/717/" rel="noreferrer">http://jsfiddle.net/J5nCS/717/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
      background-color:black;
      color:white;
      text-align:center;
      padding:5px;
  }
  #nav {
      line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      padding:5px;          
  }
  #section {
      width:350px;
      float:left;
      padding:10px;        
  }
  #footer {
      background-color:black;
      color:white;
      clear:both;
      text-align:center;
     padding:5px;      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
  &lt;h1&gt;City Gallery&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="nav"&gt;
  London&lt;br&gt;
  Paris&lt;br&gt;
  Tokyo&lt;br&gt;
  &lt;/div&gt;
  
  &lt;div id="section"&gt;
  &lt;h2&gt;London&lt;/h2&gt;
  &lt;p&gt;
  London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.
  &lt;/p&gt;
  &lt;p&gt;
  Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
  Copyright © footer.com
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>