#nice-boot-sidebar
Nice Bootstrap sidebar template
Nice what ?
The default bootstrap 3 style provides a default way to define horizontal navigation block.
It's normally done by setting a class names to an ul
<ul class="nav nav-pills nav-stacked">
But I find it a bit HTML5 non compliant as we already have the <nav> tag available so we'd better leave the ul clean.
This template contains an alternative vertical navigation that address this issue, it is left positioned and fixed and it can be used for building beautiful backends.
Show us the result dude !!
Yup, here's the link to the result on JSFiddle
Better, here you can view it full screen
Usage
The complete template is built with Stasis using my base template for front-end prototyping StasisTPL so you should have a valid Ruby environment to run it, I use RVM.
CSS are written with SASS
JS are written with CoffeeScript
HTML are written with HAML
To run the example, just do
git clone https://github.com/FranckyU/nice-boot-sidebar.git
cd nice-boot-sidebar
bundle #assuming you already have a ruby environment
stasis -d 3000
# Now you should have it visible at http://127.0.0.1:3000
For non Ruby-Stasis users, just copy the compiled HTML structure in index.html along with JS, CSS and image files from /public folder into your project and that should be OK.
Changelog
2013-11-29
- Adding submenu that displays on expand for active item
- Local Test OK on FF25
2013-11-28
- Made the width auto when expanded
- Adding CSS classes prefix
- Encapsulated NBS JS code within a class
TODO
- Fix padding gap on expand/collapse