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!!
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.
- Content Administration
- User Administration
- System Administration
- Content Management
- Other Roles
Changes for implementing jQuery TLN in SAP Netweaver Portal
Instead of using the HTML code which I have posted above, you have to use following code for implementing same functionality in SAP Netweaver Portal. This is because we need to use navigation tags for fetching the parent node and child nodes.
Portal TLN Code
Here, we are fetching TLN nodes and applying the same jQuery functionality that should generate similar effect in Portal.
If this isn’t enough, I will upload plugin for Portal TLN soon so that you don’t need to change the code at all.