Splitting the top navigation in two

Posted on by

 topnav3

This is a follow-up on a post by Jan Tielens, so I recommend that you read his post first for more details (the screenshot is taken from his post btw). The idea is to break the top navigation bar in two when you have too many menu items.

My personal comment was that in this precise case jQuery didn’t bring much value. To make my point, here is an example of plain JavaScript that gives the same result:

<script type="text/javascript">

//Contact: Christophe@PathToSharePoint.com

// Grab the top navigation menu
var Menu = document.getElementById("zz1_TopNavigationMenu");

// Count half of the tabs
var counter = Math.round(Menu.getElementsByTagName("table").length/2);

// Add a row above the existing one
Menu.insertRow(0);

// Move half of the tabs to the first row (each tab is made of 3 cells)
for (i=0;i<counter*3;i++) {
Menu.rows&#91;0&#93;.appendChild(Menu.rows&#91;1&#93;.cells&#91;0&#93;);
}

</script>

As usual, you can use a Content Editor Web Part to add the script to your page.

Note that I am not trying to argue about Jan’s approach. His post clearly states the specific context of his demo, where he was responding to a jQuery question (if you’re interested in learning jQuery, note his use of the gt() and lt() selectors). I am just taking this opportunity to remind you that jQuery is not necessarily the miracle answer [Note to self: write a post about what jQuery is NOT good at].
If you already use jQuery in your page, then either solution is fine. If not, then just use my script and don’t bother about loading the jQuery library.

The Jan Tielens challenge

I have already talked about Jan in a previous post. End users who visit his blog can certainly feel like a kid in front of a bakery display: so many goodies that are out of reach!
So here is my proposal: if you find on Jan’s site a tool you’d like to have as an end user, send me the challenge! If a topic gets enough votes, I’ll work on a solution that can be implemented on the client side.

Oh, and don’t ask about highlighting rows in a list, it’s already done!

22 thoughts on “Splitting the top navigation in two”

  1. Pingback: The "Jan Tielens" SharePoint Challenge by Christophe - Jan Tielens' Bloggings

  2. Pingback: Links (4/2/2009) « Steve Pietrek - Everything SharePoint and Office

  3. Ok, now for the interesting part.

    Using JQuery or JS, this splitted top navigation don’t support second line sub-menu items :
    – second line submenus are displayed on the first line
    – second line submenus don’t phase out : the last submenu remains on display

    So my challenge will be … After this little nice teaser … Is there an easy way, with JS or JQuery, to make this multiline trick working with two or three navigation levels ?

  4. Jan had a post on showing alerts pop-up using jquery from a list. I am looking for a cleaner way to do this with JS. Maybe this would be a good post in your blog.

    Thanks
    Jake

  5. I am able to integrate this code with the easy tabs to create two rows of tabs. I have a lot of tabs and they look kinda bad on one row.
    My coding knowledge is pretty basic and would appreciate any help with this.
    Even a simple wrap text might do the trick i guess, but I dont know where or how to add it.

    Thanks

  7. Use the following code if you are using a feature with a delegate control

    function SplitNavigation()
    {
    //chris’s code here..
    }
    _spBodyOnLoadFunctionNames.push(‘SplitNavigation’);

  8. Hi, your post is exactly what I need!! but since I am not precisly an exper I am not sure how to add this script in my page…
    You mention that this can be done adding a content editor web part.. and I did but nothing happens…
    Can you please help me? I might be missing one step here
    Thanks!!

  9. This is a wonderful script. However, it does not seem to work in a “publishing” environment, such as with a Collaboration Portal site template. I used the JQuery script that Jan had for that and it works fine.

    Another thing…how would you put this functionality in to the Easy Tabs script? I’ve tried to get it to work and just hit the proverbial brick wall with every attempt. I would really appreciate it if you could give a pointer or two on this.

    Thanks for all your efforts. You really do save many people a lot of time. You ROCK!

  10. I too have MOSS or what we used to call SharePoint Portal. I’ve been able to use may of the other CEWP’s (thank you!!!) but this one doesn’t seem to do anything. Do I need to put it on a particular page of the portal? Thanks!

  11. Just stumbled across your page. I’m in love with this site! I currently have a sharepoint site with somewhere around 20 Top Navigation Tabs (one for different locations & departments of our business…) This code worked PERFECTLY. The only thing thats a pain is that I have to add the content editor web part for ever single page & sub-page! but, for how much this is going to help our users (and me)…that isnt much of an issue

    Thank you so much for this code!

    • You’re welcome!

      If this applies to the whole site, you might consider adding the script to the master page, instead of each page individually.

  12. Hi Christophe,

    I was unable to get this to work, even after following your instructions to the T. I tried debugging it using alerts, and found that the script was not executing properly. It appears as though it exits successfully after ‘N/2’ iterations, where N = #of tabs in the top link bar. My script with alerts looks like this:

    var Menu = document.getElementById(“zz1_TopNavigationMenu”);
    alert(“1”);
    var counter = Math.round(Menu.getElementsByTagName(“table”).length/2);
    alert(“2”);
    Menu.insertRow(0);
    alert(“3”);
    for (i=0;i<counter*3;i++)
    {Menu.rows[0].appendChild(Menu.rows[1].cells[0]);}
    alert("4");

    Your help would be much appreciated. 🙂
    Thanks,
    Sid

  14. Sid and Pat: sorry, I don’t see what could go wrong. As you can see this is a short and straightforward script. Maybe you are using a custom SharePoint 2007 layout?

      • Well, it all depends on how your master page is built. An easy way is to simply paste the script at the bottom of the master page, just before the body end tag. In this case, you’ll certainly want to add a test that will check the number of tabs first.

  17. First off, this script is great. It does exactly what I want….but I would like to tweak it a little bit.

    I have an odd number of rows, and after using this script, the top row shows 6 tabs and the lower row shows 5. That means the 6 tab on the top row is hanging out in lala land. Any idea on how I could make this look better?

    I noticed that the script automatically makes each of the tabs equal length. Is there any way to NOT do this…and have them at their original length (dependent on amount of text in the tab itself).???

  18. Christophe:

    I have the opposite issue, My topnav when is in a full screen it is in one line and I want to keep it that way, but when I shrink the page then the topnav brakes in two rows, how can I avoid that?

Comments are closed.