--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Yet another megamenu for Bootstrap 3">
+ <meta name="author" content="@geedmo">
+ <title>Yamm!3 Megamenu for Bootstrap3</title>
+ <!-- Bootstrap and demo CSS -->
+ <link href="demo/components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+ <link href="demo/components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
+ <link href="demo/css/demo.css" rel="stylesheet">
+ <!-- Yamm styles-->
+ <link href="yamm/yamm.css" rel="stylesheet">
+ <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!--if lt IE 9
+ script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
+ script(src='https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
+
+ -->
+ </head>
+ <body>
+ <!-- Demo navbar -->
+ <div class="navbar yamm navbar-default navbar-fixed-top">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>
+ </div>
+ <div id="navbar-collapse-1" class="navbar-collapse collapse">
+ <ul class="nav navbar-nav">
+ <!-- Classic list -->
+ <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">List<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <!-- Content container to add padding -->
+ <div class="yamm-content">
+ <div class="row">
+ <ul class="col-sm-2 list-unstyled">
+ <li>
+ <p><strong>Section Title</strong></p>
+ </li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ </ul>
+ <ul class="col-sm-2 list-unstyled">
+ <li>
+ <p><strong>Links Title</strong></p>
+ </li>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ </ul>
+ <ul class="col-sm-2 list-unstyled">
+ <li>
+ <p><strong>Section Title</strong></p>
+ </li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>List Item</li>
+ </ul>
+ <ul class="col-sm-2 list-unstyled">
+ <li>
+ <p><strong>Section Title</strong></p>
+ </li>
+ <li>List Item</li>
+ <li>List Item</li>
+ <li>
+ <ul>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ <li><a href="#"> Link Item </a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!-- Accordion demo -->
+ <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Accordion<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <div class="row">
+ <div id="accordion" class="panel-group">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>
+ </div>
+ <div id="collapseOne" class="panel-collapse collapse in">
+ <div class="panel-body">Ut consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>
+ </div>
+ <div id="collapseTwo" class="panel-collapse collapse">
+ <div class="panel-body">Nullam pretium fermentum sapien ut convallis. Suspendisse vehicula, magna non tristique tincidunt, massa nisi luctus tellus, vel laoreet sem lectus ut nibh. </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>
+ </div>
+ <div id="collapseThree" class="panel-collapse collapse">
+ <div class="panel-body">Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Sed vitae ipsum non nibh mattis congue eget id augue. </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!-- Classic dropdown -->
+ <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Classic<b class="caret"></b></a>
+ <ul role="menu" class="dropdown-menu">
+ <li><a tabindex="-1" href="#"> Action </a></li>
+ <li><a tabindex="-1" href="#"> Another action </a></li>
+ <li><a tabindex="-1" href="#"> Something else here </a></li>
+ <li class="divider"></li>
+ <li><a tabindex="-1" href="#"> Separated link </a></li>
+ </ul>
+ </li>
+ <!-- Pictures -->
+ <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Pictures<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <div class="row">
+ <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="demo/img/190.jpg"></a></div>
+ <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="demo/img/190.jpg"></a></div>
+ <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="demo/img/190.jpg"></a></div>
+ <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="demo/img/190.jpg"></a></div>
+ <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="demo/img/190.jpg"></a></div>
+ <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="demo/img/190.jpg"></a></div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="jumbotron intro">
+ <div class="container">
+ <h1 class="page-header">Hello, Yamm 3!</h1>
+ <p>This is<i>Yet another megamenu </i>for Bootstrap 3 from Twitter. Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.</p>
+ <p>This project is currently hosted on Github and is the sequel to Bootstrap2 Yamm <small><sup><a href="http://geedmo.github.com/yamm" title="Yamm for Bootstrap 2" target="_blank" class="text-muted"><em class="glyphicon glyphicon-new-window"></em></a></sup></small></p><br>
+ <p><a href="https://github.com/geedmo/yamm3" class="btn btn-default btn-lg">View on Github</a> <a href="https://github.com/geedmo/yamm3/archive/master.zip" class="btn btn-primary btn-lg">Download</a></p>
+ </div>
+ </div>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-4">
+ <p class="lead">Markup</p><ol>
+<li><p>Reuse navbar markup and add class <code>.yamm</code> at the top.</p>
+</li>
+<li><p>Then add your markup into the <code>.dropdown-menu</code></p>
+</li>
+<li><p>Optionally use <code>.yamm-content</code> to wrap content with padding.</p>
+</li>
+</ol>
+
+ </div>
+ <div class="col-md-8">
+ <pre class="prettyprint"><nav class="navbar yamm navbar-default " role="navigation">
+...
+ <ul class="nav navbar-nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <div class="row">
+ ...
+ </li>
+ </ul>
+ </li>
+ </ul>
+...
+</nav></pre>
+ </div>
+ </div>
+ </div>
+ <div class="jumbotron">
+ <div class="container">
+ <p class="lead">Grid Example</p>
+ <!-- Grid demo navbar -->
+ <div class="navbar navbar-default yamm">
+ <div class="navbar-header">
+ <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>
+ </div>
+ <div id="navbar-collapse-grid" class="navbar-collapse collapse">
+ <ul class="nav navbar-nav">
+ <!-- Grid 12 Menu -->
+ <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Grid<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="grid-demo">
+ <div class="row">
+ <div class="col-sm-12">.col-sm-12</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-6">.col-sm-6</div>
+ <div class="col-sm-6">.col-sm-6</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-4">.col-sm-4</div>
+ <div class="col-sm-4">.col-sm-4</div>
+ <div class="col-sm-4">.col-sm-4</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-3">.col-sm-3</div>
+ <div class="col-sm-3">.col-sm-3</div>
+ <div class="col-sm-3">.col-sm-3</div>
+ <div class="col-sm-3">.col-sm-3</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-2">.col-sm-2</div>
+ <div class="col-sm-2">.col-sm-2</div>
+ <div class="col-sm-2">.col-sm-2</div>
+ <div class="col-sm-2">.col-sm-2</div>
+ <div class="col-sm-2">.col-sm-2</div>
+ <div class="col-sm-2">.col-sm-2</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!--With Offsets
+ -->
+ <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Offset<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="grid-demo">
+ <div class="row">
+ <div class="col-sm-4">4</div>
+ <div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
+ <div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!--Aside Menu
+ -->
+ <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Aside<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="grid-demo">
+ <div class="row">
+ <div class="col-sm-3"><br>
+ <h3>3</h3><br>
+ </div>
+ <div class="col-sm-9"><br>
+ <h3>9</h3><br>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!--Nesting Menu
+ -->
+ <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nesting<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="grid-demo">
+ <div class="row">
+ <div class="col-sm-12">12</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">12
+ <div class="row">
+ <div class="col-sm-4">4</div>
+ <div class="col-sm-4">4</div>
+ <div class="col-sm-4">4</div>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-4">
+ <p class="lead">Width</p><p>By default every mega-dropdown will take the content size so is possible to use add <code>.yamm-fw</code> to <code>.dropdown</code> to expand it fullwidth</p>
+<p>Yamm works better with fullwidth menus.</p>
+
+ </div>
+ <div class="col-md-8">
+ <pre class="prettyprint"><nav class="navbar yamm navbar-default " role="navigation">
+...
+ <ul class="nav navbar-nav">
+ <li class="dropdown yamm-fw">
+ ...
+ </li>
+ </ul>
+...
+</nav></pre>
+ </div>
+ </div>
+ </div>
+ <div class="jumbotron">
+ <div class="container">
+ <p class="lead">More components</p>
+ <!-- Extra components navbar -->
+ <div class="navbar navbar-default yamm">
+ <div class="navbar-header">
+ <button type="button" data-toggle="collapse" data-target="#navbar-collapse-2" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>
+ </div>
+ <div id="navbar-collapse-2" class="navbar-collapse collapse">
+ <ul class="nav navbar-nav">
+ <!-- Media Example -->
+ <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Media<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <ul class="media-list">
+ <li class="media"><a href="#" class="pull-right"><img src="demo/img/64x64.gif" alt="64x64" class="media-object"></a>
+ <div class="media-body">
+ <h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante.
+ </div>
+ </li>
+ <li class="media"><a href="#" class="pull-right"><img src="demo/img/64x64.gif" alt="64x64" class="media-object"></a>
+ <div class="media-body">
+ <h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
+ </div>
+ </li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!-- Tables -->
+ <li class="dropdown yamm-fullwidth"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Tables<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </li>
+ </ul>
+ </li>
+ <!-- Thumbnails demo -->
+ <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Thumbnails<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="thumbnail"><img alt="260x130" src="demo/img/260.jpg">
+ <div class="caption">
+ <h3>Thumb Label</h3>
+ <p>Mazagran doppio half and half aftertaste organic, rich doppio</p>
+ <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="thumbnail"><img alt="260x130" src="demo/img/260.jpg">
+ <div class="caption">
+ <h3>Thumb Label</h3>
+ <p>Black latte cinnamon, cultivar trifecta crema cappuccino</p>
+ <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="thumbnail"><img alt="260x130" src="demo/img/260.jpg">
+ <div class="caption">
+ <h3>Thumb Label</h3>
+ <p>Bar roast et, as latte café au lait, mocha aromatic robusta</p>
+ <p><a href="#" class="btn btn-primary">Action </a> <a href="#" class="btn btn-default">Action </a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <!-- Forms -->
+ <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Forms<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="yamm-content">
+ <form action="send.php">
+ <div class="form-group">
+ <input id="inputName" type="text" placeholder="Name" class="form-control">
+ </div>
+ <div class="form-group">
+ <input id="inputEmail" type="password" placeholder="Email" class="form-control">
+ </div>
+ <div class="form-group">
+ <textarea placeholder="Write your message.." class="form-control"></textarea>
+ </div>
+ <div class="form-group">
+ <button type="submit" class="btn btn-success">Send</button>
+ </div>
+ </form>
+ </div>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-4">
+ <p class="lead">JavaScript</p><p>This code will prevent unexpected menu close when using some components (like accordion, forms, etc)</p>
+
+ </div>
+ <div class="col-md-8">
+ <pre class="prettyprint">$(document).on('click', '.yamm .dropdown-menu', function(e) {
+ e.stopPropagation()
+})</pre>
+ </div>
+ </div>
+ <footer>
+ <hr>
+ <div class="row">
+ <div class="col-sm-4">
+ <p>MIT © Geedmo 2014</p>
+ </div>
+ <div class="col-sm-8">
+ <div class="social">
+ <ul class="list-inline text-right">
+ <li>
+ <iframe src="http://ghbtns.com/github-btn.html?user=geedmo&repo=yamm3&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px" class="github-btn"></iframe>
+ </li>
+ <li>
+ <iframe src="http://ghbtns.com/github-btn.html?user=geedmo&repo=yamm3&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px" class="github-btn"></iframe>
+ </li>
+ <li><a href="https://twitter.com/share" data-lang="en" class="twitter-share-button">Tweet</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </footer>
+ </div>
+ <!-- /container -->
+ <!-- Bootstrap core JavaScript-->
+ <script src="demo/components/jquery/dist/jquery.js"></script>
+ <script src="demo/components/bootstrap/dist/js/bootstrap.min.js"></script>
+ <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css"></script>
+ <script>
+ $(function() {
+ window.prettyPrint && prettyPrint()
+ $(document).on('click', '.yamm .dropdown-menu', function(e) {
+ e.stopPropagation()
+ })
+ })
+ </script>
+ <!-- tweet and share :)-->
+ <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+ </body>
+</html>
\ No newline at end of file
projects / yaffs-website / blobdiff