Example of horizontal tabs with some tabs having drop down menu

[telese...@gmail.com]

I am enjoying the use simple-navigation.  I am a rails newbie and this gem saved me a lot of work.  However, my application is growing and my single horizontal tabbed menu needs to be split up into some sub-menus.

The problem is that of the current examples there does not seem to be one quite like what I want to do.

II may need to use javascript to do what I want but I am not familiar with superfish and I am hoping a few lines of code will do instead.  I have written simple javacript code before for showing and hiding elements.

What I would like is for the SECONDARY menu (see below) to drop down when I mouseover or click on it (both or either) allowing me to select (click) on an item (link) in the sub-menu.

Are there any examples of doing this?

----------
I have attached my actual code but here is a simplified listing:

 primary.item :home         
 primary.item :about        
 primary.item :services     
 primary.item :products     
 primary.item :library      
 primary.item :admin  # currently points to the same as users      
   secondary.item :users    
   secondary.item :groups   
   secondary.item :respondents
   secondary.item :diagnostics
 end
 primary.item :dbadmin      
 primary.item :contact      
 primary.item :profile      
 
And my CSS (for original horizontal tabs only):

#top_navigation {
    float: left;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 2px solid black; }
    #top_navigation ul {
      height: 25px;
      margin: 0 0px 0 0;
      padding: 0; }
      #top_navigation ul li {
        display: inline;
        list-style-type: none;
        margin: 0;
        padding: 0; }
      #top_navigation ul li.left {
        text-align: right;
        float: right; }
      #top_navigation ul li.user {
        text-align: right;
        float: right;
        padding: 8px 8px 6px;
        margin: 0;
        background-color: #ffffff;
        color: #000000;
        font-size: 0.9em; }
          #top_navigation ul li a {
            -moz-border-radius: 0.5em 0.5em 0 0;
            -webkit-border-radius: 0.5em 0.5em 0 0;
            border-radius: 0.5em 0.5em 0 0;
            float: left;
            font-size: 10pt;
            font-weight: normal;
            margin: 0;
            padding: 4px 8px 6px;
            background-color: #002f5a;
            border-color: #f4fcf2;
            border-style: solid;
            border-width: 1px;
            color: #ffffff;
            text-decoration: none; }
          #top_navigation ul li a:hover {
            background-color: #66a3ff;
            color: #ffffff; }
          #top_navigation ul li a.selected {
            background-color: #a3f5fd;
            border: 1px solid;
            border-color: #afc0a4;
            color: #2f3c4c;
            font-weight: bold; }

[telese...@gmail.com]

I tried attaching my code to the first message but it gave me errors...

Tried again but cannot seem to attach files.  Anyway I can try again if anyone wants to see my exact code.

[Andi Schacke]

This really sounds exactly like a very common use case for using a jquery/javascript menu plugin. I think I would not go  the path to roll my own solution for this. Rather invest some time to get your head around one of those frameworks (superfish is pretty easy). Maybe you find some other plugins here: http://www.tripwiremagazine.com/2012/12/jquery-menu-plugins.html

The key point for simple-navigation is to render all the items on page load (using :expand_all => true).

If you need further help, let me know.

Andi

--
You received this message because you are subscribed to the Google Groups "simple-navigation" group.
To unsubscribe from this group and stop receiving emails from it, send an email to simple-navigat...@googlegroups.com.
To post to this group, send email to simple-n...@googlegroups.com.
Visit this group at http://groups.google.com/group/simple-navigation?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.