TLN Hover Menu Up to 3 or More Levels

Size: px

Start display at page:

Download "TLN Hover Menu Up to 3 or More Levels"

Adelia Webster
5 years ago
Views:

TLN Hover Menu Up to 3 or More Levels Applies to: This article applied to EP 7.0 EHP1 SP6. Summary We already have documents/codes for implementation of 2 level hover menu in TLN.

1 TLN Hover Menu Up to 3 or More Levels Applies to: This article applied to EP 7.0 EHP1 SP6. Summary We already have documents/codes for implementation of 2 level hover menu in TLN. This document provides technical details for implementing the hover menu up to 3 level. The same approach can be applied for implementing hover menu up to n levels as per the requirements. The SAP has provided new AJAX based framework page for better look and feel in EP 7.01 and higher. This document is for the people who want to go for hover menus. Author: Company: Deepak Tiwari IBM India Created on: 25 December 2010 Author Bio Deepak Tiwari is working with IBM as a Technology consultant for SAP Enterprise Portal. He has experience working on Web Dynpro Java, EP, CAF/GP, KM & C, Adobe Interactive Forms, PDK (Portal Development Kit) and Portal Administration SAP AG 1

2 Table of Contents Introduction... 3 Expected Output:... 3 New Portal Application Project... 3 Create JSP... 5 TLN.jsp 7 TLN_style.jsp:... 9 Portalapp.xml: Related Content Disclaimer and Liability Notice SAP AG 2

This document describes the details about the JavaScript, CSS and use of navigation tags in JSP to implement hover

3 Introduction Hover menus are the dropdown menus which show hovering effect on mouse over. These menus can be implemented for SAP enterprise portal also (in TLN and DLN) by using Navigation tag libraries. This document describes the details about the JavaScript, CSS and use of navigation tags in JSP to implement hover menu. Expected Output: New Portal Application Project Create New Portal application project in your NWDS as described below SAP AG 3

4 Please refer to links mentioned in the last of this paper for more details SAP AG 4

jsp(contains the CSS) Step 1: Select the folder to create JSP.

5 Create JSP Create two JSP files as described below : 1)TLN.jsp (contains the hover menu code) 2)TLN_style.jsp(contains the CSS) Step 1: Select the folder to create JSP. Select the menu option New>Other Step 2: Select option Simple>File 2010 SAP AG 5

6 Step 3: The selected folder path comes by default. Follow steps 1 to 3 to create TLN_style.jsp. Note: Separate CSS file can also be used for styling SAP AG 6

7 TLN.jsp This JSP contains the html code for creating hover menu. Copy and paste the below code to your TLN.jsp file. taglib uri="navigationtaglibrary" prefix="nav" %> taglib uri="frameworktaglibrary" prefix="frm" %> <% String webpath = componentrequest.getwebresourcepath(); %> <%-- include style jsp --%> <%@ include file="tln_style.jsp" %> <html > <head> <%-- using CSS file <link rel="stylesheet" type="text/css" href="<%=webpath%>\css\tlnhover.css" /> --%> <script type="text/javascript"> TLNHover = function() { if (!document.all) return; // continue only for IE var cssrule; var newselector; for (var i = 0; i < document.stylesheets.length; i++) { for (var j = 0; j < document.stylesheets[i].rules.length ; j++) { cssrule = document.stylesheets[i].rules[j]; if (cssrule.selectortext.indexof("li:hover") >= 0) { newselector = cssrule.selectortext.replace(/li:hover/gi, "LI.iehover"); document.stylesheets[i].addrule(newselector, cssrule.style.csstext); var getelm = document.getelementbyid("navigation").getelementsbytagname("li"); for (var i=0; i<getelm.length; i++) { getelm[i].onmouseover=function() { this.classname+=" iehover"; getelm[i].onmouseout=function() { this.classname=this.classname.replace(new RegExp(" iehover\\b"), ""); if (window.attachevent) window.attachevent("onload", TLNHover); </script> </head> <body> 2010 SAP AG 7

8 <%-- this is the main navigation section --%> <div class="clear"> </div> <div id="hovernav" style="background-color:#ffffff;height:30px;width:100%;"> <ul id="navigation"> <%-- iterate level 1 navigation nodes --%> <nav:iterateinitialnavnodes> <li class="header"><a class="headanchor"><nav:navnodeanchor navigationmethod="byurl" anchorattributes="style='text-decoration: none;color:#000;font-weight: bold;'" /></a> <%-- check child nodes --%> <nav:ifnavnodehaschildren> <ul class="sub"> <%-- iterate level 2 --%> <nav:iteratenavnodechildren> <%-- check child nodes level 3--%> <nav:ifnavnodehaschildren> <li ><a class="fly" ><nav:navnodeanchor navigationmethod="byurl"/></a> <ul > <%-- iterate child nodes level 3--%> <nav:iteratenavnodechildren> <li><a><nav:navnodeanchor navigationmethod="byurl" /></a></li> </nav:iteratenavnodechildren> </ul> </li> </nav:ifnavnodehaschildren> <nav:ifnotnavnodehaschildren> <li ><a><nav:navnodeanchor navigationmethod="byurl"/></a> </li> </nav:ifnotnavnodehaschildren> </nav:iteratenavnodechildren> </ul> </nav:ifnavnodehaschildren> </li><b> </b> </nav:iterateinitialnavnodes> </ul> <div class="clear"> </div> </div> <div class="clear"> </div> <div id="breadcrumb"> <%-- iterate through all the nodes in the current nav path --%> <nav:iteratenavnodesinselectedpath> <nav:navnodeanchor navigationmethod="byurl"/> <%-- output '>>' to separate the nodes --%> <nav:ifhasmoreiterations> >> </nav:ifhasmoreiterations> </nav:iteratenavnodesinselectedpath> </div> </body> <script>tlnhover;</script> </html> 2010 SAP AG 8

9 TLN_style.jsp: This jsp contains the style sheet for the hover menu items defined in TLN.jsp. Copy and paste below code or change the style sheet as per the requirement. <style> #navigation {background-color:#ffffff; float: left;position: absolute; list-style:none;margin-left:5px;-moz-margin-start:0px;padding-left=2px;margintop:5px; #navigation li.header{padding-left: 10px;padding-right: 10px;margin-right:2px;whitespace: nowrap; border:1px solid #ffffff; background-color:#e0e0e0;display: -mozinline-stack; display: inline-block; float:left;height:25px;text-decoration:none;fontfamily:arial;font-style:normal;font-size:13px;font-color:#000000; #navigation li.header a.headanchor{text-decoration: none; height: 20px;position: absolute;font-color:#000000; #navigation li:hover a.headanchor{text-decoration:none;position: absolute;fontcolor:#ffffff; #navigation li:hover {position:relative;z-index:100; background-color: #A3A3A3; font-weight: bold;font-color:#ffffff;width:auto; #navigation li:hover ul.sub {left:0px; top:23px; background: #E0E0E0; z- index:300;width:300px;border:1px solid #5c731e;height:auto; #navigation li:hover ul.sub li {left:10px;right:5px;background: #E0E0E0;font: 0.5em Arial; color:#000000; font-size: 1em; position:relative; width:285px; height: 25px; #navigation li:hover ul.sub li a{position: absolute;z-index:200; font: 0.4em Arial; text-decoration:none;color:#000000; font-size: 1em;display: block;width: 285px; #navigation li:hover ul.sub li a.fly{ background:#e0e0e0 url(<%=webpath%>\images\arrow.gif) 280px 6px no-repeat ; #navigation li:hover ul.sub li a:hover {position:relative;background:#a3a3a3 ;color:#ffffff; border-color:#000000;width:280px;height:auto; #navigation li:hover ul.sub li a.fly:hover{position:relative;zindex:300;background:#a3a3a3 url(<%=webpath%>\images\arrow.gif) 280px 6px norepeat;color:#ffffff; width:auto;height:auto; #navigation li:hover li:hover ul, #navigation li:hover li:hover li:hover ul, #navigation li:hover li:hover li:hover li:hover ul, #navigation li:hover li:hover li:hover li:hover li:hover ul {left:285px; top:2px;bottom: 2px; background: #E0E0E0; border:1px solid #5c731e;display: block; width:300px;position:absolute; z-index:400; textdecoration:none;height:auto; #navigation ul, #navigation li:hover ul ul, #navigation li:hover li:hover ul ul, #navigation li:hover li:hover li:hover ul ul, #navigation li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;text-decoration:none;height:auto;display: block;border:1px solid #5c731e; 2010 SAP AG 9

10 #breadcrumb { margin-top: 0px; margin-left:0px; padding-top:5px; paddingleft:10px; font: 0.7em Arial, sans-serif; font-weight: bold; color: #000000; padding-left: 10px; background-color:#ffffff; #breadcrumb a:visited { color: #000000; text-decoration: none; #breadcrumb a, a.active { color: #000000; text-decoration: none;.clear{ clear:both; height:1px; overflow:hidden; margin-bottom:-1px; marginleft:-1px; line-height:1%; font-size:0px; * html.clear{height:auto </style> Note : Required images need to be copied in the images folder of the project. If the EP server is not unix based (windows based ) the \ in the image url should be changed to / SAP AG 10

11 Portalapp.xml: This is the deployment descriptor of the project. Copy and paste the below code. <?xml version="1.0" encoding="utf-8"?> <application name="tln_hover_app"> <application-config> <property name="vendor" value="sap.com"/> <property name="securityarea" value="netweaver.portal"/> <property name="sharingreference" value="com.sap.portal.navigation.navigationtaglibrary,com.sap.portal.pagebuilder,com. sap.portal.navigation.service,com.sap.portal.navigation.helperservice"/> </application-config> <components> <component name="tlnhover"> <component-config> <property name="jsp" value="jsp/tln.jsp"/> <property name="componenttype" value="jspnative"/> <property name="authscheme" value="anonymous"/> </component-config> <component-profile> <property name="navigationtaglibrary" value="/service/com.sap.portal.navigation.navigationtaglibrary/taglib/taglibrary.tld" /> <property name="frameworktaglibrary" value="/service/com.sap.portal.pagebuilder/taglib/framework.tld"/> <property name="epcflevel" value="0"/> <property name="com.sap.portal.iview.showtray" value="false"/> <property name="com.sap.portal.reserved.iview.isolationmode" value="embedded"/> </component-profile> </component> </components> <services/> </application> This hover menu can be made up to n levels by adding more navigation node iteration(or removing for less levels) in TLN.jsp. Also the style can be change by changing the TLN_style.jsp SAP AG 11

12 Related Content SAP AG 12

13 Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document SAP AG 13

Add /Remove Links on ESS Home Page in Business Package 1.5

Add /Remove Links on ESS Home Page in Business Package 1.5 Applies to: SAP ECC EHP5. For more information, visit the Enterprise Resource Planning homepage. Summary Customizing links on ESS Overview page