Rails simple navigation how to style?

Question

I am using the simple navigation gem to create some "simple" navigation for my website.

I already have created a tabbed menu with CSS, JQUERY & HTML.

The only problem is creating the exact same CSS and HTML with simple navigation.

Here is my HTML that I am trying to create with simple navigation:

<ul id="ulmenu">



<li class="topmenuli" id="menufirst">

<a href="#" class="">Frontpage<span id="frontpage"></span></a>

<ul id="submenu" style="display: none;">

  <li><a style="font-weight:bolder;text-decoration:underline;background:url(../images/menua.png) no-repeat center bottom;" href="#" class="">Submenu 1</a></li>

   <li><a href="#" class="">Submenu 2</a></li>

</ul>

</li>

<li class="topmenuli">

<span style="display:block;" id="pets"></span>

<a href="#">Pets</a>

<ul style="display:none;" id="submenu">

  <li><a href="#">Submenu 1</a></li>

  <li>Submenu 2</li>

</ul>

</li>

</ul>

My simple navigation config file:

SimpleNavigation::Configuration.run do |navigation|



    primary.item :frontpage, 'frontpage', root_url, :id => 'menufirst', :class => 'topmenuli'

    primary.item :domain, 'Pets', domain_path do |sub_nav|

      # Add an item to the sub navigation (same params again)

      sub_nav.item :dogs, 'Dogs', dogs_path

    end

  end

The output:

<ul><li id="menufirst" class="topmenuli selected simple-navigation-active-leaf"><a class="selected" href="http://localhost:3000/"><span>Frontpage</span></a></li>

<li id="petes"><a href="/pets"><span>Pets</span></a></li></ul>

Not quite as my HTML. The submenus are not showed. I also tried to use highligt but then the breadcrumb navigation is totally wrong.

How do I create my HTML menu with simple navigation?

Answer 1

to change attributes on your <ul> container, use (for example) :

primary.item :domain, 'Pets', domain_path do |sub_nav|
  sub_nav.dom_id = 'some_submenu_id'
  sub_nav.dom_class = 'some_submenu_class'
  sub_nav.item :dogs, 'Dogs', dogs_path
  # add any more items you want
end

to change attributes on your <li> elements :

primary.item :domain, 'Pets', domain_path, :class => 'my_class', :id => 'my_id' # etc.

it is also possible to provide a custom id attribute generator (as stated in the documentation ):

navigation.id_generator = Proc.new {|key| "my-prefix-#{key}"}

as to your style attributes, i don't know if simple_navigation handles this, but all you have to do is to create some minimal css selectors:

.block
{
  display: block;
}

.container
{
  margin: 1em;
}

... and associated classes :

<div class="block container">I will be displayed as a block and have a 1em margin</div>

Rails simple navigation how to style?

Sign up