Source of file sidebar.php
Size: 8,176 Bytes - Last Modified: 2021-12-24T07:20:59+00:00
/var/www/docs.ssmods.com/process/src/public/sidebar.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 | <?php include("header.php")?> <div class="page secondary with-sidebar"> <div class="page-header"> <div class="page-header-content"> <h1>Sidebar<small>demo</small></h1> <a href="/" class="back-button big page-back"></a> </div> </div> <div class="page-sidebar"> <ul> <li> <a>Projects</a> <ul class="sub-menu"> <li><a href="">Currently</a></li> <li><a href="">Closed</a></li> </ul> </li> <li> <a>Notes</a> <ul class="sub-menu"> <li><a href="">Important</a></li> <li><a href="">Today</a></li> <li><a href="">Weekly</a></li> <li><a href="">Monthly</a></li> </ul> </li> <li class="sticker sticker-color-orange"><a href="#"><i class="icon-cart"></i> Shopping</a></li> <li class="sticker sticker-color-orangeDark"><a href="#"><i class="icon-clipboard"></i> Recipes</a></li> <li class="sticker sticker-color-green"><a href="#"><i class="icon-history"></i> Hobbies</a></li> <li class="sticker sticker-color-pink dropdown active" data-role="dropdown"> <a><i class="icon-list"></i> To Do dropdown</a> <ul class="sub-menu light sidebar-dropdown-menu open"> <li><a href="">Today</a></li> <li><a href="">To Do List</a></li> <li><a href="">To Do after work</a></li> <li><a href="">Movies to watch</a></li> </ul> </li> <li class="sticker sticker-color-red dropdown active" data-role="dropdown"> <a><i class="icon-list"></i> To Do dropdown</a> <ul class="sub-menu light sidebar-dropdown-menu"> <li><a href="">Today</a></li> <li><a href="">To Do List</a></li> <li><a href="">To Do after work</a></li> <li><a href="">Movies to watch</a></li> </ul> </li> <li class="sticker sticker-color-orange dropdown active" data-role="dropdown"> <a><i class="icon-list"></i> List opened</a> <ul class="sub-menu light sidebar-dropdown-menu keep-opened open"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> </ul> </li> <li class="sticker sticker-color-green dropdown active" data-role="dropdown"> <a><i class="icon-list"></i> List opened</a> <ul class="sub-menu light sidebar-dropdown-menu keep-opened"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> </ul> </li> </ul> </div> <div class="page-region"> <div class="page-region-content"> <div class="span9"> <h2>Before</h2> <p> You must create page layout for using <code>sidebar</code> </p> <pre class="prettyprint linenums"> <div class="page [secondary] with-sidebar"> <div class="page-header" /> <div class="page-sidebar" /> <div class="page-region" /> </div> </pre> <h2>Sidebar</h2> <p> For define sidebar you must use <code><ul /></code> </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li><a>Item</a></li> ... <li><a>Item</a></li> </ul> </div> </pre> <h2>Icons</h2> <p> You can use <code>icon-*</code> class to add icon on the menu item </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li><a><i class="icon-cube"></i>Item</a></li> ... </ul> </div> </pre> <h2>Colored stickers</h2> <p> You can create colored stickers for sidebar menu items. To create sticker, add class <code>sticker</code> for menu item. </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li class="sticker"><a>Item</a></li> ... </ul> </div> </pre> <p> To color sticker you can use colors classes with prefix <code>sticker-</code>. For Example: <code>sticker-color-blue</code> </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li class="sticker sticker-color-blue"><a>Item</a></li> ... </ul> </div> </pre> <h2>Second level menu</h2> <p> You can create the second level menu in sidebar. </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li> <a>Item</a> <ul class="sub-menu"> ... </ul> </li> ... </ul> </div> </pre> <h2>Second level Dropdown menu</h2> <p> Also you can create second level <strong>dropdown</strong> menu. </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li data-role="dropdown"> <a>Item</a> <ul class="sub-menu sidebar-dropdown-menu"> ... </ul> </li> ... </ul> </div> </pre> <p> To use dropdown menu you must add <code>dropdown.js</code> in head of you page. </p> <h2>Second level menu Dropdown opened menu</h2> <p> You can add <code>keep-opened</code> class to sub-menu to prevent default collapsing of menu. </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li> <a>Item</a> <ul class="sub-menu sidebar-dropdown-menu keep-opened"> ... </ul> </li> ... </ul> </div> </pre> <h2>Lighting second level menu</h2> <p> You can lighting second level menu with subclass <code>light</code>. </p> <pre class="prettyprint linenums"> <div class="page-sidebar"> <ul> <li> <a>Item</a> <ul class="sub-menu light"> ... </ul> </li> ... </ul> </div> </pre> </div> </div> </div> </div> <?php include("footer.php")?> |