SAP User Experience, Design, and Web Technologies

jQuery top-level navigation menu

Ahh after publishing jQuery toolbar, I am glad to come up with yet another jQuery plug-in for top-level navigation. One of my readers commented to show a simple snippet for showing how can a jQuery be implemented in SAP Portal. Though I have mentioned SAP, the plug-in I am posting today it independent of SAP and can be implemented on any website. There’s a small tweak you need to do in order to implement this functionality in SAP Portal TLN. And believe me, I have made it so easy, that even a newbie could do it.

Demo Page URL (Please note, this menu would work in IE6+ only. I am working on Mozilla bug-fix and would quickly update it)

So Ram, this for you :) Let’s get the design rolling!!

jQuery Hover Menu

jQuery Hover Menu Screenshot

What are the jQuery functions we’re going to use?

  • “.hover” is the major function that we would be using for triggering the dropdown effect.
  • “.slideDown” & “.slideUp” are the two function that will actually geenrate the dropdown effect.

CSS Styling

jQuery Code

Download Source Code

Changes for implementing jQuery TLN in SAP Netweaver Portal

Instead of using the HTML code which I have posted above, you have to use navigation tags for fetching the parent node and child nodes.


(11) Comments

  1. Ameya, just a quick question. Would this plugin look exactly the same if i implement it in portal by creating iview?

    I cannot leave without appreciating your efforts. Gr88


    • Yes, it should and it will work exactly in similar way. It should work correctly in all browsers. It may even work in IE6 but I have not tested it in IE6. Thanks for kind words. :) keep visiting..


  2. Thank you so much Ameya for posting this piece for me.
    I will try this on my NWCE 7.2 system and get back to you.
    Highly appreciate your help :-)


  3. I am glad that my posts could be of any help to you. Feel free to contact me by commenting or using contact us section.



  4. Hi Ameya,
    The download code does not work, can you provide a link to download the TLN code.

    Thanks to your website, it is helpful and provides lot of insights into newer portal versions


    • Hi Sid,

      What version of Portal are you trying to run this code? I am sorry to say if you are deploying on CE or later versions of portal, this code won’t work. If you are deploying on Netweaver Portal 7.0, then let me know what error are you getting. I might be able to fix that up for you.
      Thanks for kind words :)


Leave a Reply

Your email address will not be published. Required fields are marked *