Yet another megamenu for Bootstrap 3

Last update: Nov 10, 2022

Related tags

Overview

Yamm

This is Yet another megamenu 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.

Demo

Here you can find Yamm for Bootstrap 4

Install with npm

npm install @geedmo/yamm3 --save

Install with bower

bower install yamm3 --save

Install via composer

{
    "require": {
        "geedmo/yamm3": "dev-master"
    }
}

Markup

Reuse navbar markup and add class .yamm at the top.
Then add your markup into the .dropdown-menu
Optionally use .yamm-content to wrap content with padding.

Example

<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>

Fullwidth

By default every mega-dropdown will take the content size so is possible to use add .yamm-fw to .dropdown to expand it fullwidth. Yamm works better with fullwidth menus.

Example

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown yamm-fw">
             ...
       </li>
     </ul>
...
</nav>

Javascript

If necessary, this code will prevent unexpected menu close when using some components (like accordion, forms, etc)

$(document).on('click', '.yamm .dropdown-menu', function(e) {
   e.stopPropagation()
})

AngularJS

Check it at hjzheng/angular-mega-menu

Bugs and feature requests

Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Compile

Run the following commands in the repository folder

npm install
gulp

To compile yamm with demo

gulp demo

License

Licenced under MIT - details here

Sponsored content

Comments

Optional removal of fixed navbar for mobile sizes.

Added a '.yamm-responsive' class added to navbar, which removes the effects of a fixed navbar at mobile sizes. This allows large megamenu content to be fully visible on mobile devices.

opened by AnthonyPAlicea 4
Adds scss implementation and updates bower.json.

Adds a .scss implementation for sass compilers. Fixes the "main" specification to match the docs at http://bower.io/docs/creating-packages/#main.

opened by paulschwarz 2
Update yamm.less

Concerning https://github.com/geedmo/yamm3/issues/18

If I am not mistakien, Bootstrap already provides this :

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L3226

btw, thanks for this useful repository :-)

opened by X13454 0
add div[class*="col-"].fw

add line below to make content inside .yamm-content under div[class*="col-"].fw class auto width:

.yamm-content div[class*="col-"].fw { width: auto; }

opened by latuminggi 0
Trim trailing white space throughout the project

Many editors clean up trailing white space on save. By removing it all in one go, it helps keep future diffs cleaner by avoiding spurious white space changes on unrelated lines.

opened by jdufresne 0
Separate yamm.css and _yamm.scss to different directories
Move the compiled yamm.css to a dist directory.

When compiling yamm3 using webpack and sass, the following error is received:

SassError: It's not clear which file to import for '@import ".../node_modules/@geedmo/yamm3/yamm/yamm"'. Candidates: .../node_modules/@geedmo/yamm3/yamm/_yamm.scss .../node_modules/@geedmo/yamm3/yamm/yamm.css Please delete or rename all but one of these files. on line 1 of .../app/javascript/stylesheets/application.scss

By moving the compiled output to a separate directory, it avoids the ambiguity. The source files continue to live in the yamm directory. The output now lives in the dist directory, which is commonly used by other projects (e.g. jQuery).
opened by jdufresne 1

Releases(v1.3.1)

v1.3.1(May 6, 2019)

To use: import '@geedmo/yamm3';
Source code(tar.gz)
Source code(zip)
v1.3.0(May 6, 2019)
Publish to npm

Organized tags for Bower

Updated demo dependencies

Other minor changes to project structure

Source code(tar.gz)
Source code(zip)
v1.1.0(Apr 4, 2015)
Updated demo to Bootstrap 3.3.4

Improved demo assets organization

Source code(tar.gz)
Source code(zip)

Owner

geedmo

GitHub http://geedmo.github.io/yamm3/

Yet-Another-Relog-Mod - Just another relog mod. Call it YARM!

Yet Another Relog Mod A relog mod with a name so long, you can just call it YARM for short. Features An aesthetic relog list design that follows my "p

0 Oct 19, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

3 May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

Bootstrap-select - Shim repository for Bootstrap-select that works with bootstrap 4.

bootstrap-select Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard sel

35 Aug 27, 2022

The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

5.4k Jan 8, 2023

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

14 Feb 10, 2022

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

138 Jan 2, 2023

Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale.

Istanbul - a JS code coverage tool written in JS Deprecation Notice: this version of istanbul is deprecated, we will not be landing pull requests or r

8.6k Jan 4, 2023

Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

3 Sep 21, 2022

Yet another megamenu for Bootstrap 3

Related tags

Overview

Yamm

Demo

Install with npm

Install with bower

Install via composer

Markup

Fullwidth

Javascript

AngularJS

Bugs and feature requests

Compile

License

Sponsored content

Comments

Optional removal of fixed navbar for mobile sizes.

Adds scss implementation and updates bower.json.

Update yamm.less

add div[class*="col-"].fw

Trim trailing white space throughout the project

Separate yamm.css and _yamm.scss to different directories

Releases(v1.3.1)

v1.3.1(May 6, 2019)

v1.3.0(May 6, 2019)

v1.1.0(Apr 4, 2015)

Owner

geedmo

Yet-Another-Relog-Mod - Just another relog mod. Call it YARM!

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

Bootstrap-select - Shim repository for Bootstrap-select that works with bootstrap 4.

The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale.

yet another unzip library for node

yet another zip library for node

Yet another Linux distribution for voice-enabled IoT and embrace Web standards

Yet Another JSX using tagged template

Alternatively called Yet Another Enhancement Point Tracker

Yet another concurrent priority task queue, yay!

Yet another eslint blame (might) with better adaptability

Yet another basic minter.

Yet another advanced djs slash command handler made by dano with ❤️

💚 Yet another mutli purpose discord bot, allowing you to maintain and manage your discord server with ease.

Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections