Jmenu::Rails
Gemified the jMenu jquery plugin to use with assets pipeline in Rails(~>4.0.0.beta1) projects.
Original source : https://github.com/alpixel/jMenu
Installation
Add this line to your application's Gemfile:
gem "jmenu-rails", "~> 1.9"
And then execute:
$ bundle
Or install it yourself as:
$ gem install jmenu-rails
Usage
To require jMenu UI modules, add the following to your application.js:
//= require jMenu.jquery
Also add the jMenu UI CSS to your application.css:
/*
*= require jMenu.jquery
*/
Finally, you can make coffeescript as like:
jQuery ->
$("#jMenu").jMenu
openClick: false
ulWidth: "auto"
effects:
effectSpeedOpen: 150
effectSpeedClose: 150
effectTypeOpen: "slide"
effectTypeClose: "hide"
effectOpen: "linear"
effectClose: "linear"
TimeBeforeOpening: 100
TimeBeforeClosing: 11
animatedText: false
paddingLeft: 1
Notes
Renamed jMenu.jquery.css to jMenu.jquery.css.erb and inserted ERB code to the url source of background-image tags.
.jMenu li ul li.arrow {
background-color: #322f32;
background-image: url(<%= image_path('arrow_down.png') %>);
background-repeat: no-repeat;
background-position: center center;
height: 6px;
padding: 0;
border-bottom: none;
padding-bottom: 10px
}
.jMenu li ul li a.isParent {
background-color: #3a3a3a;
background-image: url(<%= image_path('arrow_right.png') %>);
background-repeat: no-repeat;
background-position: right center;
}
Default theme color is darkgray and so, if you want the light theme color, added the followings to your custom stylesheet:
.jMenu li {
background-color: #eaeaea !important;
}
.jMenu li a {
color:gray !important;
}
.jMenu li ul li {
background-color: #eaeaea !important;
border-bottom: 1px solid #eaeaea !important;
}
.jMenu li ul li.arrow {
background-color: #eaeaea !important;
}
.jMenu li ul li a.isParent {
background-color: #eaeaea !important;
}
.jMenu li ul li a:hover {
background-color: #c4c4c4 !important;
border-top: 1px solid #eaeaea !important;
border-bottom: 1px solid #eaeaea !important;
}
See the example script for light theme
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request