Pinned menu with flexible horizontal position - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Pinned menu with flexible horizontal position

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#container {<!--   ww w.  ja  va 2  s  . co  m-->
   width: 200px;
   margin: 0 auto;
   height: 100%;
}
#content {
   width: 148px;
   border: 1px solid gray;
}
#sidebar {
   width: 48px;
   margin-left: 150px;
   position: fixed;
   top: 50%;
   right: 50%;
   margin-right: -100px;
   border: 1px solid gray;
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar sem iaculis diam ultrices pretium. Donec dapibus venenatis tellus, ac euismod nibh vehicula ut. Vestibulum pretium, massa vitae venenatis consequat, dolor dui porttitor augue, ut condimentum augue enim sed diam. Quisque aliquam lobortis rutrum. Sed sit amet turpis orci, at ultrices dolor. Curabitur venenatis, odio ut lacinia sodales, mauris tortor venenatis libero, eget consequat purus velit quis lacus. Cras ipsum justo, faucibus id placerat a, pharetra a nunc. Vestibulum adipiscing, ipsum non auctor tincidunt, est lorem ultricies dolor, posuere elementum tortor urna id tortor. Quisque luctus fringilla metus eget tempus. Vivamus purus orci, faucibus quis aliquam vitae, adipiscing eget dolor. Sed odio turpis, lobortis sed rutrum eget, interdum eget enim. Suspendisse lectus libero, feugiat eget laoreet id, luctus in odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla dolor libero, convallis ut sagittis at, viverra gravida odio. Sed et nisl cursus libero pellentesque mollis. Nunc ut felis leo, a egestas purus. Ut et consequat nisl. Nulla tempus massa sit amet quam tempor fermentum. 
   </div> 
   <div id="sidebar">
     I stay the same. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials