Drop down menus?

I am new to Radiant and using radiant tags, and I am having trouble
finding a solution for drop-down menus using r:navigation. What I want
to do is this, similar to the “suckerfish dropdowns” from alistapart.com
(http://www.alistapart.com/articles/dropdowns) :

  • Menu Item 1
    • 
    • Sub Menu Item 1
    • 
    • Sub Menu Item 2
    • 
    • Sub Menu Item 3
    
  • Menu Item 2
  • 
  • Menu Item 3

Are there any facilities for this in r:navigation or do I need to cobble
this together by hand? Thanks in advance.

~Nate

Nate,

It depends on how you want to generate those menus. <r:navigation> is
best for single list navigation menus that have highlighting, not nested
menus. However, assuming you’ll be generating the navigation from the
page structure, you could do something like this:

<r:find url="/">

That will generate a list based on the homepage’s children and
grandchildren pages.

Sean

On Tue, 2008-05-27 at 10:20 -0500, Sean C. wrote:

  • grandchildren pages.
  • OMG! Are you kidding me? It’s that easy? I am really loving the switch
    to Radiant.

    One question though, I am using r:navigation to show the current page
    with :here and :selected methods(?), so how would this work with the
    markup you described?

    ~Nate

    There are two tags that you’ll be interested in, and I’ll let you figure
    out where to place them. The first is <r:if_self> which will output its
    contents if the local page (within an iteration) is the same as the
    global page (the one rendering).
    The second is <r:if_ancestor_or_self> which will do the same but also
    renders if the local page is an ancestor of the global page. You should
    be able to use these to accomplish the same effect as <r:here> and
    <r:selected> in the navigation tag.

    Sean

    Given that nested list, there are a number of sites that show how to do
    the ‘suckerfish’ pull-downs using ONLY CSS.

    Sean C. said the following on 27/05/08 11:20 AM:

  • grandchildren pages. >
  • Menu Item 1
  • > this together by hand? Thanks in advance. >


    Many of life’s failures are people who did not realize how close they
    were to success when they gave up.
    Thomas A. Edison

    On Tue, 2008-05-27 at 11:30 -0400, Anton A. wrote:

    Given that nested list, there are a number of sites that show how to do
    the ‘suckerfish’ pull-downs using ONLY CSS.

    Well, only css and a little javascript. My query was about finding the
    most Radiant way to do it. Sean’s solution got me through the list
    generating part, now it’s up to me for the styling. I am aware of the
    various ‘suckerfish’ implementations. What I am not familiar with is the
    radius way to auto-generate the site structure.

    ~Nate

    Well, only css and a little javascript. My query was about finding the
    most Radiant way to do it. Sean’s solution got me through the list
    generating part, now it’s up to me for the styling. I am aware of the
    various ‘suckerfish’ implementations. What I am not familiar with is the
    radius way to auto-generate the site structure.

    Nate, Sean’s pointer on the if_self and if_self_or_ancestor tags is
    key. I have built site map snippets as well as dynamic navigation
    with these. The other possible trick is you can use clever ‘opt out’
    page parts that can remove unwanted pages from this menu. Such as :

    <r:unless_content part=“no-nav”>

  • <r:link /><r:if_ancestor_or_self>…
    </r:unless_content>

    In this example any page with a no-nav page part will be ignored. You
    can add these at the top level for things that you don’t want to
    appear in your menu but still be visible in other spaces. You can
    then make a sub-nav snippet that continues to refer to itself so that
    you can nest down many levels. Hopefully that gives you enough to go
    on.

    Cheers,
    Marty

  • On Tue, 2008-05-27 at 11:14 -0600, Marty H. wrote:

    You can
    then make a sub-nav snippet that continues to refer to itself so that
    you can nest down many levels. Hopefully that gives you enough to go
    on.

    You lost me here. I got the no-nav thing, but I don’t understand what
    you would do with a subnav snippet.

    ~Nate

    Anton A. wrote:

    There ARE pure CSS pull-downs.

    Anton, I couldn’t get to the link you provided so just in case I wanted
    to make sure you and others were aware that you do need a bit of
    javascript with suckerfish menus if you plan to support IE 6 or lower
    (they only support the pseudo classes (like :hover) on tags so you
    can have javascript “add” attributes to your DOM so the older IE’s can
    play along).

    If your requirements are only for newer browsers, then you can get by
    with true css-only drop down menus.

    -Chris

    [email protected] said the following on 27/05/08 01:05 PM:

    On Tue, 2008-05-27 at 11:30 -0400, Anton A. wrote:

    Given that nested list, there are a number of sites that show how to do
    the ‘suckerfish’ pull-downs using ONLY CSS.

    Well, only css and a little javascript.

    There ARE pure CSS pull-downs.
    I’ve always preferred them to the javascript ones for a variety of
    reasons, not least of which is that the ones I’ve used (go google) are
    portable across browsers and work when javascript is turned off, as many
    people do thinking that this makes them immune to things like XSS.

    Her, for example, is a CSS generator with which you can even customize
    the CSS

    http://pixopoint.com/suckerfish_css/


    “Democracy” is a system that allows those who are directly affected by
    decisions to exert some influence on the decision makers,

    Hi!

    I don’t know exactly what you’re looking for… The navigation that
    you describe below is only one level (with no sub categories), for
    that using a dropdown menu isn’t all that common. Anyways dropdowns
    are most commonly achieved using CSS (see
    http://www.alistapart.com/articles/dropdowns)
    to style a unordered list (just like the code Sean C. gave you
    would have done). However, it seems like you’d rather specify the menu
    items manually (Sean’s code would automatically have created the
    navigation based on your site three).

    If you manually want to specify the navigation I’d recommend using the
    <r:navigation> tag. In general I’d suggest that you look through the
    comments in the Radiant code for more in depth explanations, since the
    wiki documentation isn’t all that complete:
    http://github.com/radiant/radiant/tree/master/app/models/standard_tags.rb

    Don’t know exactly what you needed to know, but hope this helps. Good
    luck!

    cheers, Simon

    I don’t know exactly what you’re looking for… The navigation that
    you describe below is only one level (with no sub categories), for
    that using a dropdown menu isn’t all that common. Anyways dropdowns
    are most commonly achieved using CSS (see
    http://www.alistapart.com/articles/dropdowns)
    to style a unordered list (just like the code Sean C. gave you
    would have done). However, it seems like you’d rather specify the menu
    items manually (Sean’s code would automatically have created the
    navigation based on your site three).

    cheers, Simon

    Sounds like I’m making this harder than need be. I would prefer to have
    it created dynamically based on the site tree. I have all the pages in
    order and parent/child relationships are correct.

    If I understand you correctly, I should swamp my existing code with
    Sean’s and that should get me moving in the right direction?

    Thanks for the input, Simon

    Hi!

    Yes, if you want it made up automatically then go with Sean’s code…
    and to make that into a drop-down use this:
    http://www.alistapart.com/articles/dropdowns
    (the article has nothing to do with Radiant, it’s just about CSS…
    but Sean’s code does the Radiant part)

    Don’t know how much experience you have with CSS, but I guess you’ll
    be fine with that article. Good luck!

    cheers, Simon

    I am also VERY new to Radiant and my first project has a painfully tight
    deadline requiring dynamic drop downs. I have a bout 48 hours to figure
    this out and have reached extreme frustration with the wiki
    documentation.

    I understand and appreciate the simplicity of Sean’s contribution below:

    Sean C. wrote:

    <r:find url="/">

    My issues is figuring out how to apply it to my site. I currently have
    the main navigation in a snippet that is called from the Normal Layout.
    All but two of the main menu items required drop downs. The code I am
    currently using is below:

    <r:link>HOME</r:link>|
    <r:link>ABOUT THE TOUR</r:link>|
    <r:link>RIDER AREA</r:link>|
    <r:link>OUR PARTNERS</r:link>|
    <r:link>POST-NEWS
    COMMUNITY
    </r:link>|
    <r:link>MEDIA ROOM</r:link>|
    <r:link>ABOUT US</r:link>

    Hate to be so publicly naive, but would be extremely grateful for any
    assistance.

    -Kelly

    I would suggest the “Son of Suckerfish” for building the drop downs. It
    uses
    some javascript, but is compatible with just about every recent (or not
    so
    recent in the case of IE6) browser. It’s the place I start for dropdowns
    when I have to use them.

    ~Nate

    I forgot…

    Son of Suckerfish: http://htmldog.com/articles/suckerfish/dropdowns/

    If you are putting flash on a page you should be worried about using 12
    lines of js.

    ~Nate

    This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

    | Privacy Policy | Terms of Service | Remote Ruby Jobs