Drop down menus?

casper_the_ghost · May 27, 2008, 4:47pm

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
(Suckerfish Dropdowns – A List Apart) :

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

casper_the_ghost · May 27, 2008, 5:20pm

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

casper_the_ghost · May 27, 2008, 5:29pm

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

casper_the_ghost · May 27, 2008, 5:45pm

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

casper_the_ghost · May 27, 2008, 6:05pm

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

casper_the_ghost · May 27, 2008, 7:05pm

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

casper_the_ghost · May 27, 2008, 7:15pm

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

casper_the_ghost · May 27, 2008, 9:08pm

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

casper_the_ghost · May 27, 2008, 10:50pm

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

casper_the_ghost · May 27, 2008, 9:35pm

[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

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

casper_the_ghost · January 10, 2009, 10:52pm

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
Suckerfish Dropdowns – A List Apart)
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:

github.com

radiant/radiant/blob/master/app/models/standard_tags.rb

module StandardTags

  include Radiant::Taggable
  include LocalTime

  require "will_paginate/view_helpers"
  include WillPaginate::ViewHelpers

  class TagError < StandardError; end
  class RequiredAttributeError < StandardError; end

  desc %{
    Causes the tags referring to a page's attributes to refer to the current page.

    *Usage:*
    
    <pre><code><r:page>...</r:page></code></pre>
  }
  tag 'page' do |tag|
    tag.locals.page = tag.globals.page

This file has been truncated. show original

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

cheers, Simon

casper_the_ghost · January 10, 2009, 11:24pm

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
Suckerfish Dropdowns – A List Apart)
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

casper_the_ghost · January 11, 2009, 1:28am

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:

(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

casper_the_ghost · January 10, 2009, 9:11pm

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:

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

-Kelly

casper_the_ghost · January 11, 2009, 4:38am

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

casper_the_ghost · January 11, 2009, 4:43am

I forgot…

Son of Suckerfish: Son of Suckerfish Dropdowns

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

~Nate