https://github.com/robinradic/bootstrap-advanced-dropdowns
Advanced bootstrap dropdowns, multi-level, scrollable, icons, badges. css/scss only
https://github.com/robinradic/bootstrap-advanced-dropdowns
Last synced: 2 months ago
JSON representation
Advanced bootstrap dropdowns, multi-level, scrollable, icons, badges. css/scss only
- Host: GitHub
- URL: https://github.com/robinradic/bootstrap-advanced-dropdowns
- Owner: RobinRadic
- Created: 2015-08-19T01:35:26.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-03T06:44:00.000Z (almost 11 years ago)
- Last Synced: 2025-02-15T22:06:05.597Z (over 1 year ago)
- Language: JavaScript
- Size: 1.7 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Bootstrap Advanced Dropdowns
=============================
[](https://www.npmjs.com/package/bootstrap-advanced-dropdowns)
[](https://www.npmjs.com/package/bootstrap-advanced-dropdowns)
[](http://radic.mit-license.org)
Improved dropdown menus for bootstrap. Highly customizable `SCSS` styles with a modular approach and easymode theme creation.
Comes with several ready to use example themes.
#### [View Demo](http://robin.radic.nl/bootstrap-advanced-dropdowns/)
### Features
##### Dropdown features
- Unlimited multi-level dropdown menu
- Scrollable dropdown
- Dropdown notification list
- Dropdown task list
- Normal and inversed dropdown colors
- Icons and badges
- Headers, footers, seperators.
- Additional utility classes to help with positioning and dimensions
##### Implementation features
- Easy to override or extend
- Modular approach. Exclude stuff you don't want / Include only the stuff you want.
- Highly customisable
- Or if your already content with the package as-is, simply include the css or scss in your own project.
### Installation
##### Bower
`bower install --save bootstrap-advanced-dropdowns`
##### Npm
`npm install --save bootstrap-advanced-dropdowns`
##### Direct download
[Click here](https://gitbub.com) to download the latest version
### Implementing
##### CSS
Without the use of SCSS, you can simply reference bootstrap-advaced-dropdowns in your html.
```html
```
##### SCSS
By using SCSS you will have multiple ways of implementing.
Here's an **example** of how to completely customize bootstrap-advanced-dropdowns.
**Note** that there are other ways of implementing. This is the most complete one.
**Before importing any bootstrap-advanced-dropdowns `scss` file, ensure bootstrap variables and mixins have been imported**
```scss
@import "path/to/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "path/to/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
```
**your-project / _variables.scss**
```scss
// ... your code ...
$dropdown-class-prefix: 'dropdown';
$dropdown-include-utilities: true;
$dropdown-include-notifications: true;
$dropdown-include-task-list: true;
$dropdown-include-scrollable: true;
// ... your code ...
```
**your-project / stylesheet.scss**
```scss
// ... your code ...
@import "your-project/_variables.scss"
// ... your code ...
@import "path/to/bootstrap-advanced-dropdowns/dropdown";
```
If your `SCSS` structure uses a multi-theme approach, you can add the following to the theme file.
Otherwise, you could append it to the code above.
**your-project / themes / theme-one-stylesheet.scss**
```scss
// ... your code ...
@import "your-project/_variables.scss"
// ... your code ...
// Overide bootstrap-advanced-dropdown theme variables.
// Check out the bootstrap-advanced-dropdown/_theme-variables.scss file for all variables
@import "path/to/bootstrap-advanced-dropdowns/theme-variables";
$dropdown-box-shadow-size: 5px;
$dropdown-wide-min-width: 300px;
$dropdown-header-font-size: 13px;
$dropdown-bg: #ffffff;
$dropdown-box-shadow-color: rgba(#222, 0.2);
$dropdown-header-bg: #e4e4e4;
$dropdown-inverse-bg: #333333;
$dropdown-inverse-box-shadow-color: rgba(#000, 0.2);
$dropdown-inverse-header-bg: #454545;
$dropdown-inverse-header-color: #b3b3b3;
$dropdown-tasklist-item-border-color: #e4e4e4;
$dropdown-inverse-tasklist-item-border-color: #484848;
$dropdown-inverse-notifications-icon-color: #d8d1d1;
$dropdown-inverse-notifications-item-border-color: #484848;
@import "path/to/bootstrap-advanced-dropdowns/themes/theme";
```