Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/duanewilson/bootstrap-fullscreen-menu
Bootstrap Fullscreen Menu
https://github.com/duanewilson/bootstrap-fullscreen-menu
Last synced: 3 months ago
JSON representation
Bootstrap Fullscreen Menu
- Host: GitHub
- URL: https://github.com/duanewilson/bootstrap-fullscreen-menu
- Owner: duanewilson
- License: other
- Created: 2014-10-26T16:35:41.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-10T06:02:04.000Z (about 6 years ago)
- Last Synced: 2024-05-14T15:36:42.308Z (6 months ago)
- Size: 5.86 KB
- Stars: 60
- Watchers: 9
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
bootstrap-fullscreen-menu
================
A simple CSS fullscreen menu Bootstrap 3 & 4, using the bootstrap modal
#Demo:
* https://duanewilson.github.io
##Requires:
* Bootstrap (http://getbootstrap.com)
* //maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
* //maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
##Additional Features When Using
* Font Awesome CDN (//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css)
##License:
Bootstrap Fullscreen Menu by HelloDuane is licensed under a Creative Commons Attribution 4.0 International License.
##Code
###CSS CLASS
```css
/* FULL SCREEN MODAL STYLES
-------------------------------------------------- */
.fullscreen .modal-dialog {
margin: 0 0 0 0;
max-width: 100%;
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
color: #333;
}
.fullscreen .modal-content {
height: 100%;
min-height: 100%;
border-radius: 0;
color: #333;
background: rgba(255, 255, 255, 0.97);
overflow:auto;
}
.fullscreen .modal-body ul {
padding: 100px 0 0 0;
}
.fullscreen .modal-body li {
padding: 10px 0 10px 0 ;
}
.fullscreen .modal-body a {
color: #333;
font-size: 300%;
}
@media (max-width: 480px){
.fullscreen .modal-body ul {
padding: 30px 0 0 0;
overflow: auto;
}
.fullscreen .modal-body li {
padding: 4px 0 4px 0 ;
}
.fullscreen .modal-body a {
color: #333;
font-size: 200%;
text-transform: uppercase;
font-weight: 700;
}
}
```
###Bootstrap Menu Replacement
####navbar-header
```HTML
...
```
####modal
```HTML
```