cancel
Showing results for 
Search instead for 
Did you mean: 

Issues with TLN Hover Menu in 7.4 SP10

SandipAgarwalla
Active Contributor
0 Kudos

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        

Accepted Solutions (0)

Answers (1)

Answers (1)

rohit_singhal
Active Contributor
0 Kudos

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

SandipAgarwalla
Active Contributor
0 Kudos

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

rohit_singhal
Active Contributor
0 Kudos

Hi Sandip,

You would need to add styling to the hover menu. An example would be:

.hoverMenuClass {

z-index: 150;

}

For the second issue, please replace: <nav:navNodeAnchor navigationMethod="byURL" /> with <nav:navNodeAnchor navigationMethod="byEPCMwithURL" />

Best Regards,

Rohit Singhal

SandipAgarwalla
Active Contributor
0 Kudos

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