| | 1. Point the browser to `miller-columns/index.html`. |
| | |
| | -# Usage |
| | +# Example |
| | |
| | -1. Include `theme.css`. |
| | -1. Include jQuery library. |
| | -1. Include `columns.js`. |
| | -1. Create a element for the nested HTML list's columnar version. |
| | -1. Add the nested HTML list inside the columnar element. |
| | -1. Optionally, include breadcrumb and toolbar classes on div elements. |
| | -1. Add the following code to the HTML document: |
| | +The header code: |
| | |
| | ``` |
| | + <link type="text/css" rel="stylesheet" href="theme.css"/> |
| | + <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
| | + <script type="text/javascript" src="columns.min.js"></script> |
| | + |
| | <script type="text/javascript"> |
| | $(document).ready( function() { $("div.columns").millerColumns(); }); |
| | </script> |
| | ``` |
| | |
| | -See the example `index.html` for further details. |
| | +The body code: |
| | + |
| | +``` |
| | +<div id="container"> |
| | + <div class="breadcrumb"></div> |
| | + <div class="columns" tabindex="1"> |
| | + <ul> |
| | + <li>Level 1</li> |
| | + <li>Level 1 |
| | + <ul> |
| | + <li>Level 2</li> |
| | + <li>Level 2 |
| | + <ul> |
| | + <li>Level 3</li> |
| | + <li>Level 3</li> |
| | + </ul> |
| | + </li> |
| | + <ul> |
| | + </ul> |
| | + </div> |
| | + <div class="toolbar"></div> |
| | +</div> |
| | +``` |
| | + |
| | +The `breadcrumb`, `toolbar`, and `container` items are optional. |
| | + |
| | +See `index.html` for more details. |
| | |
| | |