5 meta(http-equiv='X-UA-Compatible', content='IE=edge')
6 meta(name='viewport', content='width=device-width, initial-scale=1.0')
7 meta(name='description', content='Yet another megamenu for Bootstrap 3')
8 meta(name='author', content='@geedmo')
9 title Yamm!3 Megamenu for Bootstrap3
11 // Bootstrap and demo CSS
12 link(href='demo/components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
13 link(href='demo/components/bootstrap/dist/css/bootstrap-theme.min.css', rel='stylesheet')
14 link(href='demo/css/demo.css', rel='stylesheet')
17 link(href='yamm/yamm.css', rel='stylesheet')
19 // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
21 script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
22 script(src='https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
32 h1.page-header Hello, Yamm 3!
35 i Yet another megamenu
36 | 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.
37 p This project is currently hosted on Github and is the sequel to Bootstrap2 Yamm
38 small: sup: a.text-muted(href="http://geedmo.github.com/yamm", title="Yamm for Bootstrap 2", target="_blank")
39 em.glyphicon.glyphicon-new-window
42 a.btn.btn-default.btn-lg(href='https://github.com/geedmo/yamm3') View on Github
44 a.btn.btn-primary.btn-lg(href='https://github.com/geedmo/yamm3/archive/master.zip') Download
51 1. Reuse navbar markup and add class `.yamm` at the top.
53 2. Then add your markup into the `.dropdown-menu`
55 3. Optionally use `.yamm-content` to wrap content with padding.
59 | <nav class="navbar yamm navbar-default " role="navigation">
61 | <ul class="nav navbar-nav">
62 | <li class="dropdown">
63 | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
64 | <ul class="dropdown-menu">
66 | <div class="yamm-content">
67 | <div class="row">
85 By default every mega-dropdown will take the content size so is possible to use add `.yamm-fw` to `.dropdown` to expand it fullwidth
87 Yamm works better with fullwidth menus.
91 | <nav class="navbar yamm navbar-default " role="navigation">
93 | <ul class="nav navbar-nav">
94 | <li class="dropdown yamm-fw">
103 p.lead More components
111 This code will prevent unexpected menu close when using some components (like accordion, forms, etc)
115 | $(document).on('click', '.yamm .dropdown-menu', function(e) {
116 | e.stopPropagation()
124 | MIT © Geedmo 2014
127 ul.list-inline.text-right
129 iframe.github-btn(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')
131 iframe.github-btn(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')
133 a.twitter-share-button(href='https://twitter.com/share', data-lang='en') Tweet
138 // Bootstrap core JavaScript
139 script(src='demo/components/jquery/dist/jquery.js')
140 script(src='demo/components/bootstrap/dist/js/bootstrap.min.js')
141 script(src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css')
145 window.prettyPrint && prettyPrint()
146 $(document).on('click', '.yamm .dropdown-menu', function(e) {
150 // tweet and share :)
152 | !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");