Next Tutorial

Drupal 7 Tutorial Part 15: Drupal 7 Advanced Taxonomy Concepts

Drupal 7 Tutorial Part 9: How to re order menu links using drag & drop / menu links weights

Submitted by anilsagar on Tue, 06/07/2011 - 20:16

Hi Drupalers,

In last tutorial, we saw how to create a new menu from scratch. In this tutorial we are going to learn below mentioned topics.

  • Changing order of menus using drag & drop / weight option inside menu edit page.

How to reorder menu links in drupal 7 ?

         In last tutorial we created menu called "Administration Shortcuts" with two links. Let's reorder these menu links. You can see menu in the left side bar as shown below.

                        In the menu "blocks landing page" link appears first then "user listing". Let's change this order of menu links. To quickly navigate to administration of this menu, login as admin and hover on the block. You can see a wheel like icon on top. Click on that icon. Then, click on "list links" link to go to list of links in this menu. You will see something like below.

  Now take your mouse on top of block landing page, hold the right mouse button and drag it to down. Once you drag it to down holding mouse button, screen will look like below.

 By dragging the link downwards, you reordered the menu link. Now click  on save below to save the changes. After saving go to home page to see the changes. Now user listing comes on top.

How to reorder menu links in Drupal 7 using weights ?:

   In last section, we saw how to reorder menus using drag and drop feature. Let's see now how to reorder the menus using weight option. Both, will do the same job actually. Now by changing the weights let's reorder our menu links.

  Open the list of "Administration Shortcuts" links just by following steps discussed above. You will see the page like in screen shot 2. As you see now "User listing" links appears first then "Blocks landing page" appears second. Let's change this order.

  • Click on edit link next to "User listing" link. Then choose weight select box just above save button. You will see something like below.

  • Remember lighter one floats and heavier one sinks. Means smallest number goes to top and highest number to bottom.
  • As you see currently this menu link has weight -50 and "Blocks landing page" has weight -49. Since we know -50 < -49 "Blocks landing page" goes down.
  • Change the menu link "user listing" weight to "-48" so that it goes below "Blocks landing page" since -49 < -48.
  • After changing from -50 to -48 click on save. To see the change go to home page. Now "Blocks landing page" appears first. We normally adjust weights of menu links relatively to other links in the menu.

In drupal 7, where ever weights appears they follow the same rule. Lighter one floats and heavier one sinks. Means smallest number goes to top and highest number to bottom.

Hope, you learnt how to reorder menus and how to use weights concepts. Stay tuned for more tutorials.

Cheers,

Anil Sagar

11 comments

No Drag Icon

Submitted by Allison (not verified) on Wed, 12/07/2011 - 02:12.

Hi Anil,

I have the silliest problem: unlike in your screen shot, I seem to be missing the little "drag" cross icon. Am I missing a setting? A module? Any help would be greatly appreciated!

Thanks for all your hard work!

Alli

Hi Alli

Submitted by anilsagar on Wed, 12/07/2011 - 17:43.

Please verify java-script is enabled in your browser and no java-script error in the page because of any custom code using firebug plugin in Firefox.

Cheers,
Anil Sagar

Hi Anil, It was turned on,

Submitted by Allison (not verified) on Thu, 12/08/2011 - 19:09.

Hi Anil, It was turned on, but, I disable and re-enabled it after I updated my browser. When everything restarted, I had the options. Thanks for the tip!

I can't get the menu items to

Submitted by DJ (not verified) on Wed, 08/03/2011 - 03:51.

I can't get the menu items to move. I click and drag but it doesn't move

Very impressed

Submitted by J E Slone (not verified) on Thu, 07/21/2011 - 07:25.

Let me add my appreciation for the tutorials you have provided. I recently discovered Drupal and have been having difficulty with many of the concepts and techniques. Your use of natural 'human' language is especially appreciated. I look forward to seeing more installments.

Thank you

Submitted by anilsagar on Thu, 07/21/2011 - 12:32.

Hi J E Slone,

Thank you very much for your appreciation. It helps me to write more articles!

Cheers,
Anil Sagar

Your all tutorials are

Submitted by Anonymous (not verified) on Wed, 07/06/2011 - 13:39.

Your all tutorials are awesome..

beginners can get allot from it..

Can you also produce stuff like that for drupal templating..

Thanks for the stuff..

Replace Home menu option with an house icon

Submitted by Anonymous (not verified) on Mon, 07/04/2011 - 16:14.

Hi there,

Any trick for replacing a Home menu option with the House icon like in the admin menu ?

Great tuto !

Thanks a lot

Change the favicon

Submitted by anilsagar on Wed, 07/06/2011 - 16:00.

HI,

Just goto appearance>> select seven theme settings, then remove default favicon and upload your own icon.

Cheers,
Anil Sagar

RSS would be great

Submitted by rookie (not verified) on Sat, 06/11/2011 - 22:49.

As I recommendation it would be great if the page had an RSS or something allowing us to follow you, I definitely will become your fan.

Hi

Submitted by anilsagar on Sun, 06/12/2011 - 19:09.

Thank you very much for following my articles. Here is the RSS feed link. http://www.anilsagar.com/rss.xml

You can subscribe to google feedburner also. Link is available on right side bar.

Cheers,
Anil Sagar

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image. Ignore spaces and be careful about upper and lower case.
©2010 AnilSagar. All rights reserved. Drupal theme by Kiwi Themes.