Bootstrap Flyout List

Creates an animated, styled list for the sidebar in Bootstrap for launching modals.

Usage

Simply drop the CSS onto any page:

<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-flyout-list.css"/>

To style the sidebar list, simply add the "flyout-list" class to it and wrap each list item's contents with a ...:

<div class="sidebar">
  <ul class="flyout-list">
    <li><a href="#"><span class="flyout-list-card">Item 1</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 2</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 3</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 4</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 5</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 6</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 7</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 8</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 9</span></a></li>
    <li><a href="#"><span class="flyout-list-card">Item 10</span></a></li>
  <ul>
</div>

License

Copyright 2011 Entropi Software, LLC.

Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0