www.aleph1.co.uk Git - yaffs-website/blob - vendor/geedmo/yamm3/README.md

   1 # Yamm
   2
   3
   4 This is *Yet another megamenu for [Bootstrap 3](http://getbootstrap.com/)* from Twitter.
   5
   6 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.
   7
   8 ####[Demo](http://geedmo.github.io/yamm3)
   9
  10 ### Markup
  11
  12 1. Reuse navbar markup and add class `.yamm` at the top.
  13
  14 2. Then add your markup into the `.dropdown-menu`
  15
  16 3. Optionally use `.yamm-content` to wrap content with padding.
  17
  18 Example
  19
  20     <nav class="navbar yamm navbar-default " role="navigation">
  21         ...
  22         <ul class="nav navbar-nav">
  23             <li class="dropdown">
  24                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
  25                 <ul class="dropdown-menu">
  26                     <li>
  27                         <div class="yamm-content">
  28                         <div class="row">
  29                             ...
  30                     </li>
  31                 </ul>
  32             </li>
  33         </ul>
  34         ...
  35     </nav>
  36
  37
  38 ### Fullwidth
  39
  40 By default every mega-dropdown will take the content size so is possible to use add `.yamm-fw` to `.dropdown` to expand it fullwidth.
  41 Yamm works better with fullwidth menus.
  42
  43 Example
  44
  45     <nav class="navbar yamm navbar-default " role="navigation">
  46     ...
  47          <ul class="nav navbar-nav">
  48            <li class="dropdown yamm-fw">
  49                  ...
  50            </li>
  51          </ul>
  52     ...
  53     </nav>
  54
  55
  56 ### Javascript
  57
  58 If necessary, this code will prevent unexpected menu close when using some components (like accordion, forms, etc)
  59
  60     $(document).on('click', '.yamm .dropdown-menu', function(e) {
  61        e.stopPropagation()
  62     })
  63
  64
  65 ### Install via composer
  66
  67         {
  68                 "require": {
  69                         "geedmo/yamm3": "dev-master"
  70                 }
  71         }
  72
  73 ### Compile
  74
  75 Run the following commands in the repository folder
  76
  77 - npm install
  78 - gulp
  79
  80 To compile yamm with demo
  81
  82 - gulp demo
  83
  84 ### License
  85
  86 - Licenced under MIT - [details here](LICENSE.txt)