Creating a jump
menu in Drupal using views,
some template overrides and a bit of javascript

Tags:

I was working on a project recently which required a jump menu to navigate organic group home pages. I'll tell you now in a simplified version how I went about it.

Step one

Build a view which outputs the links to the nodes you want in your jump menu.
I am just going to build a view exposing all my blog posts.

  1. Give your view a handy name, I've gone for blog_jump_menu
  2. Basic settings
    Items to display: Unlimited
  3. Fields
    NID: no label, not linked to node (this provide the node ID so we can generate a link to the node)
    Node title: no label, trimmed to 20 characters with ellipsis on word boundary not linked to node (this provides the label for each item on the jump menu)
  4. Filters
    Published: Yes
    Node type: Blog
  5. Add block display
    Views settings for drupal jump menu
  6. Enable the block 'blog_jump_menu: Block' and put it in a region of your choice on the block configuration page admin/build/block

Step two

We need to create some template files to override the standard views output. Using the tpl templates available in the theme information on the edit page for your view, you need to create the following tpl files and store theme in your theme directory.

File name: views-view-unformatted--blog-jump-menu.tpl.php

This template file is used to wrap the output from the view in a html form plus the small javascript snippet.

  1. <script language="JavaScript">
  2. function openDir( form ) {
  3. var newIndex = form.fieldname.selectedIndex;
  4. if ( newIndex == 0 ) {
  5. alert( "Please choose a post " );
  6. } else {
  7. cururl = form.fieldname.options[ newIndex ].value;
  8. window.location.assign( cururl );
  9. }
  10. }
  11. </script>
  1. <form id="blogJump" name="blogJump">
  2. <!-- define form for jump menu -->
  3. <select name="fieldname" size="1" onChange="openDir( this.form )">
  4. <option>Choose post</option>
  5. <!-- set default non selectable option -->
  1. <?php foreach ($rows as $id => $row): ?>
  2. <?php print $row; ?> <!-- print each row from the view -->
  3. <?php endforeach; ?>
  1. </select>
  2. </form>

File name: views-view-fields--blog-jump-menu.tpl.php
This provides the output for each row of the view. The default wrapped this in multiple span and div tags which are unnecessary for this project.

  1. <?php foreach ($fields as $id => $field): ?>
  2. <?php print $field->content; ?>
  3. <?php endforeach; ?>

File name: views-view-field--blog-jump-menu--nid.tpl.php
This displays the 'NID' field for each row of the view, by default it will just output the NID (node id) but we need to add HTML before and after the output.

  1. <option value="/node/<?php print $output; ?>">

File name: views-view-field--blog-jump-menu--title.tpl.php
This displays the 'title' field for each row of the view, by default it will just output the title but we need to add HTML after the output.

  1. <?php print $output; ?></option>

Step three

The final HTML rendered by Drupal.

  1. <script language="JavaScript">
  2. function openDir( form ) {
  3. var newIndex = form.fieldname.selectedIndex;
  4. if ( newIndex == 0 ) {
  5. alert( "Please choose a post " );
  6. } else {
  7. cururl = form.fieldname.options[ newIndex ].value;
  8. window.location.assign( cururl );
  9. }
  10. }
  11. </script>
  1. <form id="blogJump" name="blogJump">
  2. <!-- define form for jump menu -->
  3. <select name="fieldname" size="1" onChange="openDir( this.form )">
  4. <option>Choose post</option>
  5. <!-- set default non selectable option -->
  6. <option value="/node/1"> Title of node 1 ...</option>
  7. <option value="/node/2"> Title of node 2 ...</option>
  8. etc.........
  9. </select>
  10. </form>

Sources:
The javascript snippet came from http://javascript.internet.com/

It is great to have the

Submitted by Anonymous on Tue, 2012-01-31 16:56.

It is great to have the opportunity to read a good quality article with useful information on topics that plenty are interested on.I concur with your conclusions and will eagerly look forward to your future updates Resume help

We need to create some

Submitted by Anonymous on Sun, 2012-01-29 11:35.

We need to create some template files to override the standard views output. Using the tpl templates available in the theme information on the edit page for your view, you need to create the following tpl files and store theme in your theme directory. petit boulot

I rancor straightlaced

Submitted by Anonymous on Thu, 2012-01-19 16:47.

I rancor straightlaced enjoyed trait your wet posts.I am impressed.I was toil for determinative weakening on this somatesthesia. Salutary act Add for recounting pakistan navy jobs 2011

I hope you have a nice day!

Submitted by Anonymous on Thu, 2012-01-19 16:40.

I hope you have a nice day! Very good article, well written and very thought out. I am looking forward to reading more of your posts in the future adventure games

I admit, this process give me

Submitted by Anonymous on Tue, 2012-01-17 05:09.

I admit, this process give me headache, can you share some guide?

landscape photography

Thanks for making such a cool

Submitted by Anonymous on Fri, 2012-01-27 18:37.

Thanks for making such a cool post which is really very well writte
"Jogging Tips"

Post very nicely written, and

Submitted by Anonymous on Tue, 2012-01-17 13:04.

Post very nicely written, and it contains useful facts. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement. Thanks for sharing with us
"Essays term papers"

Its opportunity are so

Submitted by Anonymous on Sat, 2012-01-28 20:30.

Its opportunity are so fantastic and working style so speedy.I think it may be help all of yoCasio Uhrenarmband
u.

nice

Submitted by Anonymous on Thu, 2012-01-19 09:38.

The topic that your blog deals with demands loads of research.This kind of blog always useful for blog readers,
essay help
university essay uk

Great Article

Submitted by Anonymous on Thu, 2011-12-29 20:31.

really loved reading your thoughts, obviously you know what are you talking about! Your site is so easy to use too, I’ve bookmark it in my folder
logo design competition

This script was really

Submitted by Anonymous on Mon, 2011-12-19 11:32.

This script was really helpful. I tried it on my website and it worked !! Thanks for sharing.
Dedicated SEO | Website Design Sydney

Nice One!

Submitted by Anonymous on Fri, 2011-12-16 14:42.

I feel delighted to read such a good post, I would like to thank the Author for this marvelous efforts. This post is good in regards of both knowledge as well as information. Thanks for the post.Logo Design Contest

Bravo!

Submitted by Anonymous on Fri, 2011-12-16 14:40.

I'm the same way, I do my best to remain neutral. It's hard, if you communicate with the person the other person dislikes, then you fall out of favor with them! I simple can't dislike a person, just because someone else does, I just can't.University Essays Online

Nice One!

Submitted by Anonymous on Fri, 2011-12-16 14:39.

Our company strives to offer customers a managed language learning that will help you quickly, effectively and permanently learn the new language you tried to achieve. University Essays UK

Thanks for a good example of

Submitted by Anonymous on Fri, 2011-12-16 13:22.

Thanks for a good example of a java programming. That's a very useful info for me. how to write thesis

I have been reading blogs on

Submitted by Anonymous on Sat, 2012-01-14 18:37.

I have been reading blogs on this subject for a few hours now and your content is the most informed I have read thus far. Thanks for putting this information in one place.
"ray ban sunglasses"

Nice Information

Submitted by Anonymous on Thu, 2011-12-15 07:18.

Education is an ornament in prosperity and a refuge in adversity.Essays Help

I usually don't post in Blogs

Submitted by Anonymous on Sat, 2011-12-10 19:34.

I usually don't post in Blogs but your blog forced me to, awesome work, stunning!
-motor traders insurance

<a href="http://www.itweb7.com/journeying-recommendations-effort

Submitted by Anonymous on Wed, 2011-12-07 03:26.

very good blog, I think the article that you create can be helpful to all who read it. I must wait for your post at a later time.

american airlines

Submitted by Anonymous on Wed, 2011-12-07 03:23.

I think this is a very good article, and my first time to find an article like this. I am very interested, and I think this could help to all who read it. thanks and i wait for the next post.

northwest airlines careers

Submitted by Anonymous on Wed, 2011-12-07 03:21.

very nice post, I was interested to learn about your blog and I will bookmark your blog in my PC. I wait for the next post. thank you

northwest airlines careers

northwest airlines phone number

Submitted by Anonymous on Wed, 2011-12-07 03:18.

I think this is a very good blog, and I am very very interested to read it. I hope you can provide other information which is helpful for all. thank you
northwest airlines phone number

AWESOME

Submitted by Anonymous on Fri, 2011-12-02 11:32.

you mentioned in post is just too good that will be extremely helpful
Cv Editing

I’ve decided to make it open

Submitted by Anonymous on Fri, 2011-11-25 19:11.

I’ve decided to make it open source so that it’s freely available to anyone interested in learning how mouse gestures are implemented. I will be also be posting new releases regularly so that non-developers can benefit from mouse gestures. personal statement writers

Thanks for this read mate.

Submitted by Anonymous on Wed, 2011-11-23 20:51.

Thanks for this read mate. Well, this is my first visit to your blog! But I admire the precious time and effort you put into it, especially into interesting articles you share here!
-cote d azur real estate

Resources like the one you

Submitted by Anonymous on Fri, 2011-11-11 21:13.

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful. Thanks for the information.
Dave @ compare van insurance

Jump menu in open atrium

Submitted by Anonymous on Sat, 2011-09-10 13:24.

How can make changes in the View Style Jump menu of Open Atrium.

do this via the Jump module

Submitted by Anonymous on Tue, 2011-08-02 04:23.

Here's how I'm managing to do this via the Jump module.
http://drupal.org/node/1236318#comment-4810854

Still dealing with dummy items via Special Menu Item though :(

Andaba buscando algo así para

Submitted by Anonymous on Thu, 2011-07-14 14:08.

Andaba buscando algo así para el diseño de una página web, Diseño web Madrid

You are the Light of my day today!

Submitted by Anonymous on Sat, 2011-05-28 14:03.

Thank you for this clear and concise tutorial and the files!
I searched the net and could not find a solution until I chance upon your tutorial. Thank you again.

vuelos

Submitted by Anonymous on Sat, 2011-01-29 21:39.

¿Quieres viajar y disfrutar de la vida conociendo nuevos lugares y culturas? Barceló viajes te invita a recorrer el mundo y a vivir una experiencia única. Con nuestra experiencia te ofrecemos múltiples ventajas y facilidad para emprender tus sueños, coloca tu ilusión en nuestras manos y la haremos realidad.
vuelos baratos
vuelos
hoteles

Thanks for the very

Submitted by Anonymous on Fri, 2010-12-10 03:28.

Thanks for the very comprehensive tutorial. I needed to address a problem that required a jump menu to navigate organic group home pages for reparo de parabrisas.

does this work in drupal 6?

Submitted by Anonymous on Tue, 2010-08-24 17:26.

Does this work in drupal 6? Filenames should use all dashes eventhough the view name contains an underscore?

Reliable writing help for

Submitted by Anonymous on Wed, 2012-01-25 16:21.

Reliable writing help for college students at write research paper, useful tips on how to do a book report