-
-
Save appdevb/462b3ce6f11499204aec577ec19c42cf to your computer and use it in GitHub Desktop.
A CodePen by medienvp. MVP Menu Bottom - App-like menu bar at the bottom of the screen. Uses flexbox with a fallback for IE as well as bootstrap for the glyphicons. Is responsive (try). Detaches from the bottom when the screen gets too small.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="mvp-menu-bottom"> | |
| <ul> | |
| <li> | |
| <a href="#"> | |
| <span class="icon icon-home icon-white"> </span> | |
| Dashboard | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="active"> | |
| <span class="icon icon-align-justify icon-white"> </span> | |
| Content | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <span class="icon icon-envelope icon-white"> </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <span class="icon icon-signal icon-white"> </span> | |
| Analytics | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <span class="icon icon-question-sign icon-white"> </span> | |
| Support | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <span class="icon icon-briefcase icon-white"> </span> | |
| Impressum | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // emulate active state on click | |
| jQuery(function($) { | |
| $(document).ready(function() { | |
| $('.mvp-menu-bottom a').on('click', function (e) { | |
| item = $(this); | |
| item.parents('ul').find('a').removeClass('active'); | |
| item.addClass('active'); | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // set up color environment | |
| @colorBodyBg: #FCFBE3; | |
| @colorBodyText: #333333; | |
| @colorDominantBg: #F02311; | |
| @colorDominantText: #ffffff; | |
| body { | |
| background-color: @colorBodyBg; | |
| color: @colorBodyText; | |
| } | |
| // setup box model | |
| * { | |
| box-sizing:border-box; | |
| } | |
| .mvp-menu-bottom { | |
| position:absolute; | |
| bottom:0; | |
| left:0; | |
| right:0; | |
| background-color:#333; | |
| //height:68px; | |
| } | |
| .mvp-menu-bottom ul, | |
| .mvp-menu-bottom li, | |
| .mvp-menu-bottom a { | |
| height:100%; | |
| } | |
| .mvp-menu-bottom ul { | |
| display:flex; | |
| list-style:none; | |
| padding:0; | |
| margin:0 10%; | |
| } | |
| .mvp-menu-bottom li { | |
| flex: 1; | |
| /* for IE */ | |
| float:left; | |
| width:auto; | |
| } | |
| .mvp-menu-bottom a { | |
| display:block; | |
| text-align:center; | |
| text-decoration:none; | |
| padding: 1em; | |
| color:#fff; | |
| } | |
| .mvp-menu-bottom a:hover { | |
| background-color:#555; | |
| color:white; | |
| text-decoration:none; | |
| } | |
| .mvp-menu-bottom a.active, | |
| .mvp-menu-bottom a:active { | |
| background-color:@colorDominantBg; | |
| color: @colorDominantText; | |
| cursor:default; | |
| } | |
| .mvp-menu-bottom .icon { | |
| display:block; | |
| margin:0 auto; | |
| margin-bottom:3px; | |
| } | |
| /* CSS3 decoration */ | |
| .mvp-menu-bottom a { | |
| text-shadow: 2px 1px 0 #000000; | |
| filter: dropshadow(color=#000000, offx=1, offy=1); | |
| } | |
| .mvp-menu-bottom a { | |
| transition: background 0.3s; | |
| } | |
| /* responsiveness */ | |
| @media all and (min-width:1600px) { | |
| .mvp-menu-bottom { | |
| font-size:1.1em; | |
| } | |
| } | |
| @media all and (max-width:1024px) { | |
| .mvp-menu-bottom { | |
| font-size:0.8em; | |
| } | |
| } | |
| /* for smaller sizes show menu vertically and detach from bottom */ | |
| @media all and (max-width:480px) { | |
| .mvp-menu-bottom { | |
| position:static; | |
| height: auto; | |
| } | |
| .mvp-menu-bottom ul { | |
| display:block; | |
| margin:0; | |
| } | |
| .mvp-menu-bottom li { | |
| display:block; | |
| float:none; | |
| } | |
| .mvp-menu-bottom a { | |
| text-align:left; | |
| padding-left:2em; | |
| } | |
| .mvp-menu-bottom .icon { | |
| display:inline-block; | |
| margin-right:1em; | |
| } | |
| } | |
| /* print */ | |
| @media print { | |
| .mvp-menu-bottom { | |
| display:none; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment