docs/content/components/menu.md in bootstrap-bookingsync-sass-0.0.17 vs docs/content/components/menu.md in bootstrap-bookingsync-sass-0.0.18
- old
+ new
@@ -1,182 +1,265 @@
-## Menu
+# Menu
-### Basic example
-
<div class="example">
- <nav class="menu flex-col">
- <header class="dropdown">
- <div class="bar">
- <img src="http://placehold.it/24x24" class="img-responsive img-circle brand" alt="Fullname">
- <p>
- Surf Office: Lisbon<br>
- <small>
- <a data-target="#menu-header-submenu" href="#" data-toggle="dropdown"
- aria-haspopup="true" aria-expanded="false" id="menu-switch-account">Switch account
- <span class="caret"></span></a>
- </small>
- </p>
- </div>
- <div id="menu-header-submenu" class="menu-dropdown" aria-labelledby="menu-switch-account">
+ <div class="sheet-header">
+ <h3 id="menu-example">Basic example</h3>
+ </div>
+ <div class="bs-example bs-sheet" data-example-id="menu-example">
+ <nav class="menu flex-col">
+ <header class="dropdown">
+ <div class="bar">
+ <img src="http://placehold.it/24x24" class="img-responsive img-circle brand"
+ alt="Fullname">
+ <p>
+ Vacation Rentals<br>
+ <small>
+ <a data-target="#menu-header-submenu" href="#"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"
+ id="menu-switch-account">Switch account
+ <span class="caret"></span></a>
+ </small>
+ </p>
+ </div>
+ <div id="menu-header-submenu" class="menu-dropdown"
+ aria-labelledby="menu-switch-account">
+ <ol>
+ <li role="presentation">
+ <a href="#">Bed and Breakfast</a>
+ </li>
+ <li role="presentation" class="active">
+ <a href="#">City Apartments</a>
+ </li>
+ </ol>
+ </div>
+ </header>
+ <div class="body flex-1">
<ol>
+ <li role="presentation" class="active">
+ <a href="#">
+ <i class="fa fa-calendar fa-fw"></i>
+ <span>Bookings</span>
+ </a>
+ </li>
<li role="presentation">
- <a href="#">SurfOffice: Grand Canaria</a>
+ <a href="#">
+ <i class="fa fa-users fa-fw"></i>
+ <span>Clients</span>
+ </a>
</li>
- <li role="presentation" class="active">
- <a href="#">SurfOffice: Santa Cruz</a>
+ <li role="presentation">
+ <a href="#">
+ <i class="fa fa-envelope-o fa-fw"></i>
+ <span>Inquiries</span></a>
</li>
- </ol>
- </div>
- </header>
- <div class="body flex-1">
- <ol>
- <li role="presentation" class="active">
- <a href="#"><i class="fa fa-calendar fa-fw"></i> <span>Bookings</span></a>
- </li>
- <li role="presentation">
- <a href="#"><i class="fa fa-users fa-fw"></i> <span>Clients</span></a>
- </li>
- <li role="presentation">
- <a href="#"><i class="fa fa-envelope-o fa-fw"></i> <span>Inquiries</span></a>
- </li>
- <li role="presentation">
- <a href="#"><i class="fa fa-home fa-fw"></i> <span>Rentals</span></a>
- </li>
- <li role="presentation">
- <a href="#"><i class="fa fa-star fa-fw"></i> <span>Reviews</span></a>
- </li>
- <li role="presentation">
- <a href="#"><i class="fa fa-globe fa-fw"></i> <span>Website</span></a>
- </li>
- <li role="presentation">
- <a href="#"><i class="fa fa-cubes fa-fw"></i> <span>Apps</span></a>
- </li>
- </ol>
- </div>
- <footer>
- <div class="bar">
- <img src="https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-06-11/6253926944_bd7ce3198dba69ac91be_24.jpg" class="img-responsive img-circle avatar" alt="Peter Fabor">
- <p>
- Peter Fabor<br>
- <small>
- <a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown"
- aria-haspopup="true" aria-expanded="false" id="menu-manage-account">Manage Account
- <i class="fa fa-gear"></i></a>
- </small>
- </p>
- </div>
- <div id="menu-footer-submenu" class="menu-dropright flex-col" aria-labelledby="menu-manage-account">
- <ol class="flex-1">
- <li class="back text-center" role="presentation">
- <a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown">
- <i class="fa fa-long-arrow-left fa-fw"></i> <span class="sr-only">Back</span></a>
+ <li role="presentation">
+ <a href="#">
+ <i class="fa fa-home fa-fw"></i>
+ <span>Rentals</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-user fa-fw"></i> <span>Personal Information</span></a>
+ <a href="#">
+ <i class="fa fa-star fa-fw"></i>
+ <span>Reviews</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-calendar-o fa-fw"></i> <span>Calendar Preferences</span></a>
+ <a href="#">
+ <i class="fa fa-globe fa-fw"></i>
+ <span>Website</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-clock-o fa-fw"></i> <span>Time Format</span></a>
+ <a href="#">
+ <i class="fa fa-cubes fa-fw"></i>
+ <span>Apps</span>
+ </a>
</li>
</ol>
</div>
- </footer>
- </nav>
+ <footer>
+ <div class="bar">
+ <img src="http://placehold.it/24x24"
+ class="img-responsive img-circle avatar" alt="John Doe">
+ <p>
+ John Doe<br>
+ <small>
+ <a data-target="#menu-footer-submenu" href="#"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"
+ id="menu-manage-account">Manage Account
+ <i class="fa fa-gear"></i></a>
+ </small>
+ </p>
+ </div>
+ <div id="menu-footer-submenu" class="menu-dropright flex-col"
+ aria-labelledby="menu-manage-account">
+ <ol class="flex-1">
+ <li class="back text-center" role="presentation">
+ <a data-target="#menu-footer-submenu" href="#"
+ data-toggle="dropdown">
+ <i class="fa fa-long-arrow-left fa-fw"></i>
+ <span class="sr-only">Back</span>
+ </a>
+ </li>
+ <li role="presentation">
+ <a href="#">
+ <i class="fa fa-user fa-fw"></i>
+ <span>Personal Information</span>
+ </a>
+ </li>
+ <li role="presentation">
+ <a href="#">
+ <i class="fa fa-calendar-o fa-fw"></i>
+ <span>Calendar Preferences</span>
+ </a>
+ </li>
+ <li role="presentation">
+ <a href="#">
+ <i class="fa fa-clock-o fa-fw"></i>
+ <span>Time Format</span>
+ </a>
+ </li>
+ </ol>
+ </div>
+ </footer>
+ </nav>
+ </div>
</div>
~~~ html
<nav class="menu flex-col">
<header class="dropdown">
<div class="bar">
- <img src="http://placehold.it/24x24" class="img-responsive img-circle brand" alt="Fullname">
+ <img src="http://placehold.it/24x24" class="img-responsive img-circle brand"
+ alt="Fullname">
<p>
- Surf Office: Lisbon<br>
+ Vacation Rentals<br>
<small>
- <a data-target="#menu-header-submenu" href="#" data-toggle="dropdown"
- aria-haspopup="true" aria-expanded="false" id="menu-switch-account">Switch account
+ <a data-target="#menu-header-submenu" href="#"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"
+ id="menu-switch-account">Switch account
<span class="caret"></span></a>
</small>
</p>
</div>
- <div id="menu-header-submenu" class="menu-dropdown" aria-labelledby="menu-switch-account">
+ <div id="menu-header-submenu" class="menu-dropdown"
+ aria-labelledby="menu-switch-account">
<ol>
<li role="presentation">
- <a href="#">SurfOffice: Lisbon
- <span class="label label-transparent pull-right">current</span>
- </a>
+ <a href="#">Bed and Breakfast</a>
</li>
- <li role="presentation">
- <a href="#">SurfOffice: Grand Canaria</a>
- </li>
<li role="presentation" class="active">
- <a href="#">SurfOffice: Santa Cruz</a>
+ <a href="#">City Apartments</a>
</li>
</ol>
</div>
</header>
<div class="body flex-1">
<ol>
<li role="presentation" class="active">
- <a href="#"><i class="fa fa-calendar fa-fw"></i> <span>Bookings</span></a>
+ <a href="#">
+ <i class="fa fa-calendar fa-fw"></i>
+ <span>Bookings</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-users fa-fw"></i> <span>Clients</span></a>
+ <a href="#">
+ <i class="fa fa-users fa-fw"></i>
+ <span>Clients</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-envelope-o fa-fw"></i> <span>Inquiries</span></a>
+ <a href="#">
+ <i class="fa fa-envelope-o fa-fw"></i>
+ <span>Inquiries</span></a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-home fa-fw"></i> <span>Rentals</span></a>
+ <a href="#">
+ <i class="fa fa-home fa-fw"></i>
+ <span>Rentals</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-star fa-fw"></i> <span>Reviews</span></a>
+ <a href="#">
+ <i class="fa fa-star fa-fw"></i>
+ <span>Reviews</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-globe fa-fw"></i> <span>Website</span></a>
+ <a href="#">
+ <i class="fa fa-globe fa-fw"></i>
+ <span>Website</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-cubes fa-fw"></i> <span>Apps</span></a>
+ <a href="#">
+ <i class="fa fa-cubes fa-fw"></i>
+ <span>Apps</span>
+ </a>
</li>
</ol>
</div>
<footer>
<div class="bar">
- <img src="https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-06-11/6253926944_bd7ce3198dba69ac91be_24.jpg" class="img-responsive img-circle avatar" alt="Peter Fabor">
+ <img src="http://placehold.it/24x24"
+ class="img-responsive img-circle avatar" alt="John Doe">
<p>
- Peter Fabor<br>
+ John Doe<br>
<small>
- <a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown"
- aria-haspopup="true" aria-expanded="false" id="menu-manage-account">Manage Account
+ <a data-target="#menu-footer-submenu" href="#"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"
+ id="menu-manage-account">Manage Account
<i class="fa fa-gear"></i></a>
</small>
</p>
</div>
- <div id="menu-footer-submenu" class="menu-dropright flex-col" aria-labelledby="menu-manage-account">
+ <div id="menu-footer-submenu" class="menu-dropright flex-col"
+ aria-labelledby="menu-manage-account">
<ol class="flex-1">
- <li role="presentation">
- <a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown">
- <i class="fa fa-long-arrow-left fa-fw"></i> <span>Back</span></a>
+ <li class="back text-center" role="presentation">
+ <a data-target="#menu-footer-submenu" href="#"
+ data-toggle="dropdown">
+ <i class="fa fa-long-arrow-left fa-fw"></i>
+ <span class="sr-only">Back</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-user fa-fw"></i> <span>Personal Information</span></a>
+ <a href="#">
+ <i class="fa fa-user fa-fw"></i>
+ <span>Personal Information</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-calendar-o fa-fw"></i> <span>Calendar Preferences</span></a>
+ <a href="#">
+ <i class="fa fa-calendar-o fa-fw"></i>
+ <span>Calendar Preferences</span>
+ </a>
</li>
<li role="presentation">
- <a href="#"><i class="fa fa-clock-o fa-fw"></i> <span>Time Format</span></a>
+ <a href="#">
+ <i class="fa fa-clock-o fa-fw"></i>
+ <span>Time Format</span>
+ </a>
</li>
</ol>
</div>
</footer>
</nav>
~~~
-### Full height fixed position menu
-
-Add `.menu-fixed` class to make the menu fixed to the left viewport edge.
+<div class="example">
+ <div class="sheet-header">
+ <h3 id="menu-example">Full height fixed position menu</h3>
+ </div>
+ <div class="bs-example bs-sheet" data-example-id="menu-example">
+ <p>Add <code>.menu-fixed</code> class to make the menu fixed to the left viewport edge.</p>
+ </div>
+</div>
~~~ html
<nav class="menu menu-fixed flex-col">
...
</nav>