Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Killer solution for menus and tabs in Rails

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 test
Octocat-spinner-32 .document
Octocat-spinner-32 .gitignore
Octocat-spinner-32 Gemfile
Octocat-spinner-32 LICENSE
Octocat-spinner-32 README.rdoc
Octocat-spinner-32 Rakefile
Octocat-spinner-32 init.rb
Octocat-spinner-32 menu_builder.gemspec
README.rdoc

menu_builder

With this gem/plugin you get a helper to define menus and also can control the current item of menu in controller. Easy like always should be!

Instalation

Rail2

gem.config "menu_builder", :version => '0.2.1'

Rails3

gem "menu_builder", '>=0.4.1'

Usage

Just install the plugin and see the example below:

Example

Controller

class DashboardController < ApplicationController
  menu_item :mydashboard
  ...
end

You can also change to menu item in action level instead of class level:

class DashboardController < ApplicationController
  menu_item :mydashboard

  def prices
    menu_item :prices
    ...
  end
end

View

ERB code

<%= menu(:id=>"mainMenu", :class=>"menu") do |m| %>
  <%= m.account 'Account', account_path, :style => 'float: right' %>
  <%= m.users 'Users', users_path, :style => 'float: right' %>
  <%= m.mydashboard 'Dashboard', '/' %>
  <%= m.projects 'Projects', projects_path %>
<% end %>

HTML Result

<ul id="mainMenu" class="menu">
  <li><a href="/accounts">Account</a></li>
  <li><a href="/users">Users</a></li>
  <li><a href="/" class="current">Dashboard</a></li>
  <li><a href="/projects">Projects</a></li>
</ul>

Blocks for content

Also is possible to pass blocks instead of simple strings for content. In this way you can create menu item with icons. Like below:

<%= menu do |m| %>
  <% m.account account_path do %>
    <%= image_tag "icon.jpg" /> Accounts
  <% end %>
  <%= m.users "Users", users_path %>
  <%= m.posts "Posts", posts_path %>
<% end %>

CSS and HTML

This plugin don't came with any kind of asset like image or css. The layout of menu depends of your css. You can use any kind of CSS technique you want, like below:

<html>
<head>
  <style type="text/css" charset="utf-8">
    #header ul { font-family:Tahoma; position: absolute; margin:0; list-style:none; }
    #header li { display:inline; margin:0; padding:0; }

    #header a {
       float:left;
       background: url(corner_left.jpg) no-repeat left top;
       margin:0;
       padding:0 0 0 4px;
       text-decoration:none;
    }
    #header a span {
       float:left;
       display:block;
       background: url(corner_right.jpg) no-repeat right top;
       padding:4px 14px 4px 6px;
       color:#FFF;
    }

    #header a:hover span { color:#FFF; }
    #header a:hover { background-position:0% -43px; }
    #header a:hover span { background-position:100% -43px; }
    #header #current a { background-position:0% -43px; }
    #header #current a span { background-position:100% -43px; }
  </style>
</head>

<body>
  <div id="header">
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>Quem Somos</span></a></li>
      <li><a href="#"><span>Portif&oacute;lio</span></a></li>
      <li><a href="#"><span>Contato</span></a></li>
    </ul>
  </div>
</body>
</html>

You can read a full tutorial and see a working demo of above in this link

Author

Authors

Daniel Lopes

Blog

blog.areacriacoes.com.br

Github

github.com/danielvlopes

Twitter

danielvlopes

Note on Patches/Pull Requests

  • Fork the project.

  • Make your feature addition or bug fix.

  • Add tests for it. This is important so I don't break it in a future version unintentionally.

  • Commit, do not mess with rakefile, version, or history.

  • Send me a pull request :)

License

MenuBuilder is released under the MIT License.

Copyright

Copyright © 2010 Daniel Lopes. See LICENSE for details.

Something went wrong with that request. Please try again.