on 06-22-2015 7:29 PM
Hi
We are implementing TLN Hover Menu in our Portal. However there couple of issues with it currently
1) When you hover over, the dropdown does not open in a top up window. Rather it pushes the content area down
edit: - on IE, managed to got it working fine, Chrome we still have the problem.
2) On any link, the Portal reloads completely instead of navigating to the link gracefully
Any pointers would be helpful
Thanks
Sandip
Hi Sandip,
For your first issue could try increasing the z-index of the hover menu to say 150.
Could you let me know how you are loading the navigation nodes and the navigation mode used? The second issue you have reported happens when you are using navigation as:URL, instead you can try using: navigationMethod="byEPCMwithURL".
Do let me know if the above resolves your issue...
Best Regards,
Rohit Singhal
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Z index, where exactly should it be changed? Can you point that out?
for navigation - this is what I have
<li class='Level1'><nav:navNodeAnchor navigationMethod="byURL" />
Here is the header.js
--- start --
<%@ taglib uri="NavigationTagLibrary" prefix="nav" %>
<%@ taglib uri="FrameworkTagLibrary" prefix="frm" %>
<%-- an include clause for css file --%>
<%@ include file="header_style.jsp" %>
<% String mimeUrl = componentRequest.getWebResourcePath();%>
<%-- The following browser specific fix is needed because in Internet Explorer the
:hover pseudo class can only be applied to <a> tags. We are adding an event handler
for 'mouse over' and 'mouse out' events for <li> elements
--%>
<script type="text/javascript">
TLNHover = function(navigationDiv) {
if (!document.all) return; // continue only for IE
var liEls = document.getElementById(navigationDiv).getElementsByTagName("LI");
for (var i=0; i<liEls.length; i++) {
liEls[i].onmouseover = function() {
this.className += " hover";
}
liEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
</script>
<%-- this is the main navigation section --%>
<div id="branding">
<div id="navigation">
<%-- start the unordered list --%>
<ul>
<%-- go through all the level 1 navigation nodes --%>
<nav:iterateInitialNavNodes>
<li class='Level1'><nav:navNodeAnchor navigationMethod="byURL" />
<%-- check to see if there are level 2 nodes, if so start another <ul> and assign a CSS class --%>
<nav:ifNavNodeHasChildren>
<ul>
<%-- again go through all the nodes in level 2 --%>
<nav:iterateNavNodeChildren>
<%-- id l1 is written for second level hover and to set its css properties --%>
<li class='Level2' id='l1'><nav:navNodeAnchor navigationMethod="byURL" /></li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateInitialNavNodes>
</ul>
</div>
</div>
<script>TLNHover("navigation");</script>
Thanks
Sandip
Here is style classes
<style>
navigation, #navigation ul {
background-color: #FFFFFF;
color:#8B8F96;
padding: 3px 2px;
margin: 0;
list-style: none;
String image = componentRequest.getWebResourcePath() + "/images/background.gif";
}
#navigation a {
padding-left: 10px;
padding-right: 0px;
text-decoration: none;
background-color: #FFFFFF;
color: #8B8F96;
display: block;
width: 13em;
}
}
#navigation a:hover {
background-color: #FFFFFF;
color: #8B8F96;
display: block;
border-color: #FFFFFF;
font-weight: bold;
}
#navigation li {
bacground-color: #FFFFFF;
color: #8B8F96;
float: left;
}
#navigation li ul {
position: absolute;
width: 18em;
left: -999em;
}
#navigation li:hover ul {
left: auto;
width: 18em;
display: block;
position: relative;
}
#navigation li:hover ul,
#navigation li.hover ul {
left: auto;
display: block;
border: 1px solid #CBDBEA;
}
.Level1 {
font: 0.4em Arial;
font-size: 0.7em;
border: 1px solid #000000;
font-weight: light;
}
.Level2 {
font: 0.5em Arial;
font-size: 1em;
display: block;
width: 18em;
}
<-- Here the second level properties are set for id l1 -->
#l1 a {
width: 19em;
border: 1px solid #000000;
}
</style>
do I have to change it for each li & hover ul?? I have sent you a direct msg, if you can check.
Thanks
User | Count |
---|---|
88 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.