Source of file menus.php
Size: 8,641 Bytes - Last Modified: 2021-12-24T07:20:59+00:00
/var/www/docs.ssmods.com/process/src/public/menus.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 | <?php include("header.php")?> <div class="page secondary"> <div class="page-header"> <div class="page-header-content"> <h1>Menus<small>demo</small></h1> <a href="/" class="back-button big page-back"></a> </div> </div> <div class="page-region"> <div class="page-region-content"> <div class="span10"> <h2>Dropdown Menu</h2> <div class="clearfix"> <ul class="dropdown-menu open" style="display: block; position: static; margin-bottom: 15px; margin-left: 0;"> <li><a href="#">ItemName</a></li> <li><a href="#">ItemName</a></li> <li><a href="#">ItemName</a></li> <li><a href="#">ItemName</a></li> <li class="divider"></li> <li><a href="#">ItemName</a></li> </ul> </div> <p> Toggleable, contextual menu for displaying lists of links. Made interactive with the <code>dropdown</code> javascript plugin. </p> </div> <h2>Navigation Bar</h2> <div class="span10"> <div class="nav-bar"> <div class="nav-bar-inner"> <a href="#"><span class="element brand">Product Name</span></a> <span class="divider"></span> <ul class="menu"> <li data-role="dropdown"> <a>Item 1</a> <ul class="dropdown-menu"> <li><a href="#">SubItem 1</a></li> <li><a href="#">SubItem 2</a></li> <li><a href="#">SubItem 3</a></li> <li class="divider"></li> <li><a href="#">SubItem 4</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> </div> <br /> <p>You can change color of the navigation bar. To set predefined color for navigation bar you can use bg-color-* classes.</p> <br /> <br /> <br /> <code> <div class="nav-bar bg-color-darken">...</div> </code> <div class="nav-bar bg-color-darken"> <div class="nav-bar-inner"> <a href="#"><span class="element brand">Product Name</span></a> <span class="divider"></span> <ul class="menu"> <li data-role="dropdown"> <a>Item 1</a> <ul class="dropdown-menu"> <li><a href="#">SubItem 1</a></li> <li><a href="#">SubItem 2</a></li> <li><a href="#">SubItem 3</a></li> <li class="divider"></li> <li><a href="#">SubItem 4</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <code> <div class="nav-bar bg-color-green">...</div> </code> <div class="nav-bar bg-color-green"> <div class="nav-bar-inner"> <a href="#"><span class="element brand">Product Name</span></a> <span class="divider"></span> <ul class="menu"> <li data-role="dropdown"> <a>Item 1</a> <ul class="dropdown-menu"> <li><a href="#">SubItem 1</a></li> <li><a href="#">SubItem 2</a></li> <li><a href="#">SubItem 3</a></li> <li class="divider"></li> <li><a href="#">SubItem 4</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <code> <div class="nav-bar bg-color-pink">...</div> </code> <div class="nav-bar bg-color-pink"> <div class="nav-bar-inner"> <a href="#"><span class="element brand">Product Name</span></a> <span class="divider"></span> <ul class="menu"> <li data-role="dropdown"> <a>Item 1</a> <ul class="dropdown-menu"> <li><a href="#">SubItem 1</a></li> <li><a href="#">SubItem 2</a></li> <li><a href="#">SubItem 3</a></li> <li class="divider"></li> <li><a href="#">SubItem 4</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <p> For additional colors see <a href="global.php">this page</a>. </p> <h2>Component definition</h2> <pre class="prettyprint linenums"> <div class="nav-bar"> <div class="nav-bar-inner"> <span class="element">Product Name</span> <span class="divider"></span> <ul class="menu"> <li data-role="dropdown"> <a href="#">Item 1</a> <ul class="dropdown-menu"> <li><a href="#">SubItem</a></li> ... <li><a href="#">SubItem</a></li> </ul> </li> <li><a /></li> <li class="divider"></li> <li><a /></li> </ul> </div> </div> </pre> <p> For dropdown you must include in head <code>dropdown.js</code> </p> </div> </div> </div> </div> <?php include("footer.php")?> |