This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Slideout Menu (<<< glued on the left of page)

Web navigation anchored to sidebar, slides out on hover.

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
<!-- DC Slideout Menu CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/menus/slideout/css/dc_slideout_menu.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Slideout Menu JS -->
<script type="text/javascript" src="dcodes/menus/slideout/js/dc_slideout_menu.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
<!-- DC Slideout Menu CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/menus/slideout/css/dc_slideout_menu.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Slideout Menu JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/slideout/js/dc_slideout_menu.js"></script>

<-- See menu on side bar


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi nulla, facilisis nec sagittis sed, aliquet sit amet arcu. Nunc porttitor mollis purus, eu varius erat congue viverra. Praesent eu lectus nisl, quis tincidunt metus. Nam nec laoreet massa. Donec molestie arcu vitae diam pulvinar dapibus. Aliquam erat volutpat. In commodo faucibus nisi at suscipit. Praesent luctus urna tellus, quis pulvinar massa. Suspendisse tempor commodo libero, at imperdiet dolor pretium eu. Nunc ornare lobortis elit, nec vulputate sapien elementum et. Aliquam pharetra, velit in congue dapibus, turpis velit fermentum lorem, ut luctus mauris libero at orci.

Proin luctus mauris at arcu suscipit tincidunt. Proin in orci at orci laoreet vehicula. Curabitur a leo id lectus hendrerit pulvinar. Nulla malesuada, tortor sed consectetur lobortis, elit velit bibendum massa, ac dictum risus eros fringilla neque. Praesent sem enim, imperdiet eget ornare in, mattis non lacus. Nam tristique diam id quam bibendum iaculis. Pellentesque odio eros, congue id scelerisque molestie, lacinia eget arcu. Nullam ac iaculis nisl. Vestibulum facilisis arcu a magna vestibulum a porta ipsum sagittis. Cras suscipit, turpis vitae lacinia aliquam, arcu massa varius urna, quis dignissim sem eros egestas tortor. Pellentesque ac tortor eget arcu fermentum pellentesque. Vestibulum eu lacus lacus, eu vehicula ipsum. In hac habitasse platea dictumst. Ut id ligula lorem. Nullam vel purus sit amet neque aliquet laoreet.
Menu

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- DC Slideout Menu Start -->
<div id="dc_slideout" class="dc_slideout">
  <ul>
      <li><a href="#" class="hover">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
  <div class="dc_slideout-main">Menu</div>
  <div class="dc_slideout-right"></div>
</div>
<!-- DC Slideout Menu End -->
        


© TemplateAccess