Toplevel Navigation: Hover Effect

Hello,
in the standard TLN there is the "Hovering" property. It allows users to mouse over a first-level tab and see it's second level entries.
I want to make this work in my custom TLN iview, but I have no idea how to, as I'm pretty new to this!
Best regards,
Marko

hi,
check these out:
<a href="https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2453">https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/2453</a>
<a href="https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3683">https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3683</a>
Best regards,
Avishai Zamir

Similar Messages

Hover Effect in Top level navigation in Portal 7.3

Hi All,
We have achieved hover effect till 3 levels in Portal 7.3
We have tried to implement 4th level,but we are facing issue
Kindly help me to implement 4 level hover effect in portal 7.3 (EHP6).
Please find the attached CSS and JSP file for 3 level hovering and 4 level hovering in which we are facing the above issue.
Regards,
Sarita Agrawal

Hi Sarita,
I have pretty much followed your approach. But in the drop down top level navigation works wiredly & doesn't pick up the value as desired. I have similar need where the TLN has to be extended till 4 level, could you point me right direction where is it going wrong?
For 3-levels:
<ul>
    <nav:iterateInitialNavNodes>
       <li id='l0'>
             <nav:navNodeAnchor navigationMethod="byEPCM" />
                    <nav:ifNavNodeHasChildren>
                      <ul>
                        <nav:iterateNavNodeChildren>
                           <nav:ifNavNodeHasChildren>
                                       <li id='l1'>
                                               <nav:navNodeAnchor navigationMethod="byEPCM" />
                                                      <ul>
                                                    <nav:iterateNavNodeChildren>
                                                           <li id='l2'>
                                                                   <nav:navNodeAnchor navigationMethod="byEPCM"/>
                                                           </li>
                                                    </nav:iterateNavNodeChildren>
                                                </ul>.
                                        </li>
                           </nav:ifNavNodeHasChildren>
                           <nav:ifNotNavNodeHasChildren>
                                        <li id='l3'>
                                                  <nav:navNodeAnchor navigationMethod="byEPCM"/>
                                        </li>
                           </nav:ifNotNavNodeHasChildren>
                  </nav:iterateNavNodeChildren>
         </ul>
       </nav:ifNavNodeHasChildren>
        </li>
   </nav:iterateInitialNavNodes>
</ul>
Thanks and Regards,
Sumanth

Capture the Node clicked / selected in Toplevel navigation

HI
How to capture the node that is clicked by user in the generated toplevel navigation from the taglib.
I need to pass the TAB/MENU name selected by user to another JSP using session or request object.
<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>
Suggestions appreciated.
Thanks in advance.

Hi ,
I got the answer, I am closing this.
Its very simple , the FPN is implemented , the URL of the portal will be appended with "Short Cut" or "Navigation Parameter" with
NavigationTarget
and
NavigationTarget=navurl://abd78e32mkf233nm892
What we need to do is, in the JSP, read this as
request.getParameter("NavigationTarget")
and check whether the user hit the same TAB in the DLN menu with
navurl://
and write the logic as we need.
Thanks for all.

Code Navigator hover properties?

This does not work in DW CS4 on my Mac: "When you hover over
links to CSS rules, the Code Navigator displays tool tips of the
properties in the rule". Found at:
"help.adobe.com/en_US/Dreamweaver/10.0_Using/WS49D443C1-D15C-4e77-AA5B-F25569D0471D.html"
Does anyone know how to get the hover effect to work so that
the properties pop up as advertised?
Thx

Der Kauf,
It should have been on by default, but maybe you disabled it.
Maybe it's
because you're on a page that does not have any CSS styles --
it doesn't
seem to pop up automatically when that's the case.
Anyway, use Alt+Click to force the Code Navigator to pop up.
Once it's
up, there's a checkbox where you can un-disable it.
HTH,
Randy
> This does not work in DW CS4 on my Mac: "When you hover
over links to CSS
> rules, the Code Navigator displays tool tips of the
properties in the rule".
> Found at:
>
"help.adobe.com/en_US/Dreamweaver/10.0_Using/WS49D443C1-D15C-4e77-AA5B-F25569D04
> 71D.html"
>
> Does anyone know how to get the hover effect to work so
that the properties
> pop up as advertised?

How to delete the design bar in toplevel navigation

Hello,
I tried to delete (or make invisible) the design bar of the toplevel navigation. In the theme editor I could only make it transparent and I tried also some changes in the jsp- and js-file, but nothing worked.
What I want is, that the toplevelnavigation starts there, where at the moment start the design bar. At the moment I have a white hole at this position
I hope somebody can help me with this problem.
Thank you in advance!
Kind regards,
Ulrike

Hello Achim,
thank you for your fast answer.
The only thing I can change in the theme editor for the design bar is the background color. So, I suppose, it's not a graphic.
Or is there another possibility to change the design bar?
regards,
Ulrike

Hover effect not shown in design view

Is there a setting that will allow me to see the hover effect I created in CSS? The cursor doesn't even turn to a hand so I imagine that cursor effects probably don't work either.
Is there a setting or something so I can see them? Right now I open Homesite and view it there.
I also noticed that Ctrl+B doesn't make selected text bold/strong nor Ctrl+I italic. Is that another setting?
I love Dreamweaver because it hjas enhanced some Homesite stuff but the things it dropped are frustrating.
Thanks for your help!

To see rollovers, hover effects, etc.. you need to save your page (Ctrl+S) and Preview in Browser.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Is it possible to have a hover effect easing out on multiple images when hovering on others?

Im trying to use four small images to create a large image by using a hover effect. However when i hover over an image for instance 3 of 4, after hovering over 1 and 2, number 1's ease-out effects snaps back to the background image, rather than continuing to ease-out. Which i do not want. Is it possible to have numerous ease-out effects working at the same time? Using CSS.

Could you show us a bit more of what you've done so far?
I'm not sure I understand the desired result.
Can you put your files online somwhere?
Thanks

Trying to do this cool hover effect with CSS only...

I've got 'img' thumbnails that are sometimes positioned
absolutely,
sometimes relatively, but aren't individually contained in
anything, like so
<a href="#">
<img src="image1.png" width="100" height="150" border="0"
class="tn" />
</a>
<a href="#">
<img src="image2.png" width="100" height="150" border="0"
class="tn" />
</a>
Now, I've already brought up the limitations of PNG on IE
(namely, even if
you "fix" PNG support on IE, IE will flatten your alpha
channels and strip
the individual pixels' transparency levels before overriding
them with a
single common attribute). This limitation makes it impossible
for me to do a
simple 90%-to-100% hover effect to "highlight" the thumbnail
on mouseover.
Micha recommended placing normal a highlighted versions of
the same
thumbnail inside and outside the viewport, and swapping them
on mouseover.
However, that would double the amount of image data being
sent to the user.
So what I thought to do, instead, is superpose a standalone
PNG of a small
spotlight, OVER the original thumbnail, on hover. Because it
would be the
same PNG being superposed over each thumb being hovered over,
the amount of
image data being sent to the user wouldn't be all that
different.
Would I need javascript for this, or can it be done with CSS
only?
Again, it would be the same spotlight.png file being
superposed on images on
mouseover, and it wouldn't be a big deal if the image bled
over surrounding
images (it would actually make it look more real).
Thanks.

say wha???
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> Nobody can disagree with that analysis, but a LOADING
page would do
nothing
> to help with this, doncha know?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Nancy O" <[email protected]> wrote in
message
> news:[email protected]...
> > Sprite images are a tad smaller in filesize than
the sum of their
> > individual
> > parts. As you say, Murray, it's marginal. But the
real *efficiency*
> > comes
> > from fewer server requests to load multiple images.
Once the sprite has
> > loaded, there is no perceivable delay on hover - as
there often is with
> > conventional image swapping. Finally, since the
substitution effect is
> > pure
> > CSS, there's no need for JavaScripts which can add
weight to a page.
> >
> >
> > --Nancy O.
> > Alt-Web Design & Publishing
> > www.alt-web.com
> >
> >
> > "Murray *ACE*"
<[email protected]> wrote in message
> > news:[email protected]...
> >> By their nature, sprites are larger
dimensionally than the individual
> >> images, so the savings would be marginal, I
think. What I mean by that
> >> is
> > a
> >> simple rollover sprite would be the same size
as the combined up and
over
> >> images, placed adjacent to each other, no?
> >>
> >> --
> >> Murray --- ICQ 71997575
> >> Adobe Community Expert
> >> (If you *MUST* email me, don't LAUGH when you
do so!)
> >> ==================
> >>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
> >>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> >> ==================
> >>
> >>
> >> "Nancy O" <[email protected]>
wrote in message
> >> news:[email protected]...
> >> >< Micha recommended placing normal &
highlighted versions of the same
> >> > thumbnail inside and outside the viewport,
and swapping them on
> > mouseover.
> >> > However, that would double the amount of
image data being sent to the
> >> > user.>
> >> >
> >> > Not if you use a sprite. Have a look at
this CSS Sprite Demo.
> >> >
http://alt-web.com/CSS-Sprite-Demo.html
> >> >
> >> >
> >> > --Nancy O.
> >> > Alt-Web Design & Publishing
> >> > www.alt-web.com
> >> >
> >> >
> >> >
> >> > "Mike" <[email protected]> wrote in
message
> >> > news:[email protected]...
> >> >> I've got 'img' thumbnails that are
sometimes positioned absolutely,
> >> >> sometimes relatively, but aren't
individually contained in anything,
> > like
> >> > so
> >> >> :
> >> >>
> >> >> <a href="#">
> >> >> <img src="image1.png" width="100"
height="150" border="0"
class="tn"
> > />
> >> >> </a>
> >> >> <a href="#">
> >> >> <img src="image2.png" width="100"
height="150" border="0"
class="tn"
> > />
> >> >> </a>
> >> >>
> >> >> Now, I've already brought up the
limitations of PNG on IE (namely,
> >> >> even
> >> >> if
> >> >> you "fix" PNG support on IE, IE will
flatten your alpha channels and
> >> >> strip
> >> >> the individual pixels' transparency
levels before overriding them
with
> > a
> >> >> single common attribute). This
limitation makes it impossible for me
> >> >> to
> >> >> do
> >> > a
> >> >> simple 90%-to-100% hover effect to
"highlight" the thumbnail on
> >> >> mouseover.
> >> >>
> >> >> Micha recommended placing normal a
highlighted versions of the same
> >> >> thumbnail inside and outside the
viewport, and swapping them on
> >> >> mouseover.
> >> >> However, that would double the amount
of image data being sent to
the
> >> > user.
> >> >>
> >> >> So what I thought to do, instead, is
superpose a standalone PNG of a
> >> >> small
> >> >> spotlight, OVER the original
thumbnail, on hover. Because it would
be
> > the
> >> >> same PNG being superposed over each
thumb being hovered over, the
> > amount
> >> > of
> >> >> image data being sent to the user
wouldn't be all that different.
> >> >>
> >> >> Would I need javascript for this, or
can it be done with CSS only?
> >> >>
> >> >> Again, it would be the same
spotlight.png file being superposed on
> > images
> >> > on
> >> >> mouseover, and it wouldn't be a big
deal if the image bled over
> >> > surrounding
> >> >> images (it would actually make it look
more real).
> >> >>
> >> >> Thanks.
> >> >>
> >> >>
> >> >
> >> >
> >>
> >
> >
>

Hover effect... made larger

Hi... not the biggest web genius but know a little. I've set up a hover effect on some links to show a blue background when you roll over. The 'blue' surrounds the type pretty tight... the highlight colour surrounds the text above and below but not the sides. This may not make much sense but if i direct you to this site:
http://www.maaku87.co.uk/
... and tell you that when you hover over a link the surrounding grey box is a lot larger than the text. My hover effect doesn't produce a box as large as this. There is no colour bleed to the sides of the type just above and below.
Can anyone tell me how i can produce the same result as this site?
thanks

Add some padding, line-height, width in ems and display:block to your menu code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vertical List Menu</title>
<style type="text/css">
#vertical li {
list-style: none;
font-size: 14px;
text-align:center; /* adjust as desired */
#vertical li a {
display: block;
text-decoration: none;
font-weight:500;
width: 8em; /* adjust as needed */
line-height: 3em; /* adjust as needed */
padding: 5px; /* adjust or omit */
/* optional borders & colors */
border: 1px solid #AAA;
background: #DDD;
color:#333;
/**menu style on mouse-over/focus**/
#vertical li a:hover,
#vertical li a:focus,
#vertical li a:active {
background: #666;
color: #FFF;
</style>
</head>
<body>
<h3>Vertical List Menu</h3>

<ul id="vertical">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three </a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a><li>
<li><a href="#">Item Six </a></li>
</ul> 
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Hover effect without it actually being a link?

I have some text that displays more text when you click on
it, and FAQ script. To help users know that it will do something I
wanted to make it act like the other links on my page that bold
when you mouse over them. I achieved this by putting a # for a link
location. Worked great but then I realized that its now refreshing
the page bumping you up to the top and loosing your spot.
Is their away to to get the hover effect without it actually
being a link?
http://www.ewdcorp.com/services_environment.html

"c-fqgy" <[email protected]> wrote in
message
news:fqrsg8$t82$[email protected]..
> Hi Tierry,
> Well that?s disappointing to hear! I actually tried
working with your
> script
> when I first went looking for an FAQ style toggling menu
but at the time I
> couldn't get it to work. I think at the time it was just
intimidating to
> me
> because I didn't fully get it. Since working with this
other script,
> through
> trial and error I think I have a better grasp of how it
works and reading
> your
> article seems far more straight forward (not that it
wasn't before).
> Anyways I
> will take your suggestion and hopefully be able to fix
my error.
>
> Just to be clear though, do you mean I should reconsider
my sites
> construction
> because I have surrounded it with extra formatting crap
or is it actually
> the
> way the actual Javascript that I have in my head tags
that isn?t correct?
To be honnest with you I don't know about your site
construction, I only
peeked at your DT, that's why I pasted the following in my
previous post:
<dt class="text_body" style="cursor: pointer;">
<span style="font-family: monospace;"></span>
<img width="11" height="8" alt=""
src="images/Bullet.jpg"/>
<u>
<a href="#">Contaminated Site Remediation Design and
Management</a>
</u>
</dt>
The inline styles and the empty span are not "elegant", but
that's ok. The
problem is that a DT cannot contain a UL and a UL cannot be
LI-free.
Also, you have BR elements between your DTs/DDs if I recall
and that's not
kosher either.
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
Keep your markup *clean* with these DW extensions and
scripts:
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php

How to setpage/workset in a role on toplevel-navigation instead of role

Hi all,
Guess the are one page and one workset in our role, as follow:
role1 (Role)
page1 (Page)
other iviews
workset1 (Workset)
other iviews
By default, the role1 is shown in the toplevel navigation, how to set the page1 and workset1 in the topleavel navigation instead of the role1?
Thank you very much!
Best Regards,
Xiaoming Yang

Sorry, the correct version is:
role1 (Role)
page1 (Page)
other iviews
workset1 (Workset)
other iviews
Thanks and Regards,

How is highlighted item in the toplevel navigation bar chosen?

Hi,
I have an Iview (containing a BSP froma CRM backend system) in the Portal (EP6) which contains a hyperlink, which contains this:
http://xxx.com:80/SAPPortal?NavigationTarget=%2Fglobal%2Fservices%2Finstalled%2Fcom.sap.pct.crm.UrlDispatcher.default%3F.... etc.
When I click the hyperlink, a new Portal window opens with another backend iView. Here is the strange thing: for some people the highlighted toplevel navigation item is correct (matches what the new iView is actually showing), but for other people the very first (leftmost) item in the toplevel navigation is highlighted instead. In this case it seems that some selection of the highlighted item has failed and the Portal simply picks the very first one to be the highlighted item. The difference is in the persons Roles. The hyperlink is identical, but the resulting screen is different (and the URL visible in the new window is identical as well!).
When I bring this problem to the Portal developers at my company, they tell me it is probably a backend application error. However, the BSP always creates the same hyperlink, and once clicked the backend CRM system is not utilized in any way I can think of.
So, can anyone out there a) think of some possible ways in which the different EP Roles can affect this, so I can suggest things that the Portal developers can look for, and b) what kinds of traces can I run so that I can then show a difference to the Portal developers.
Or could it REALLY be a backend application problem? I am not a Portal person so I just need some ammunition to get the Portal guys working on the problem.

OK - here's the official answer from SAP... the users for which it was not working had manager profiles. There are two sets of profiles, one in EP, one in CRM. The CRM database table that links them is CRMC_PRT_ROLE_MO. This table looks at the CRM Roles, picks the one with highest priority, and assigns a string to the hyperlink. The string is passed to the Portal where it is interpreted according to the EP Role.
Our solution (from SAP): create a manager role in CRM, assign a special string to that Role, and give it a higher priority than the regular role.

Mouse hover effect issue

I real like the picture hover effect on the template site.
http://www.templatemonster.com/flash-templates/28092.html
But I don't ability to create a same one.
Please give some advance.

Can we give hover effect to image in html file? actually i want to add 2 buttons with different background image that should act like a hover effect, i took help from many sites
http://www.wordpresstemplates.net/
Thanks in adv.
Syed

Hover Effect Follows My Mouse Everywhere After it's Loaded

Hi,
I've created the hover effect in a movie clip (called
characters_mc) and placed it on another movie clip (main_mc) and
this main_mc is placed on my main timeline. I would like the hover
effect to display only on the characters_mc but the hover effect
applies to everything else on the scene (when the characters_mc is
loaded). The hover effect follows my mouse after the characters_mc
is loaded.
Here is the AS I have placed on the main_mc:
b1.onRollOver = function() {
_root.captionFN(true, "pick me!", this); //display the
function (true) or to hide the function (false)
this.onRollOut = function() {
captionFN(false);
b2.onRollOver = function() {
_root.captionFN(true, "Hi!", this);
this.onRollOut = function() {
captionFN(false);
b3.onRollOver = function() {
_root.captionFN(true, "Get Jac'd Up!", this);
this.onRollOut = function() {
captionFN(false);
b4.onRollOver = function() {
_root.captionFN(true, "Boo!", this);
this.onRollOut = function() {
captionFN(false);
b5.onRollOver = function() {
_root.captionFN(true, "I'll be your guide", this);
this.onRollOut = function() {
captionFN(false);
b6.onRollOver = function() {
_root.captionFN(true, "Welcome!", this);
this.onRollOut = function() {
captionFN(false);
_root.captionFN = function (showCaption, captionText, bName)
if (showCaption) {
createEmptyMovieClip("hoverCaption",
this.getNextHighestDepth());
cap.desc.text = captionText;
cap._width = 7*cap.desc.text.length;
cap._alpha = 75;
if ((bName._width+bName._x+cap._width)>Stage.width) {
xo = -2-cap._width;
yo = -17;
} else {
xo = 2;
yo = -17;
hoverCaption.onEnterFrame = function() {
cap._x = _xmouse+xo;
cap._y = _ymouse+yo;
cap._visible = true;
} else {
delete hoverCaption.onEnterFrame;
cap._visible = false;
Any help would be greatly appreciated. I know other related
topics have been posted and I have read them, but nothing seems to
help my problem. Sorry if this seems redundant but I would really
appreciate any help or advice.
Thanks

Have you tried resetting the PMU?
The PMU (Power Management Unit) controls trackpad function, so resetting it often helps when the trackpad isn't working (or isn't working right).

Tutorial: Custom CSS and hover-effects in Adobe Muse CC

Hi everyone,
Today I figured out how to work with custom CSS in Muse, being able to apply styles to elements on the page according to their class names. In case it would help others, I've done a write up of how I did this with hover effects using the hover.css library. You can read the tutorial over on my Medium blog:
Tutorial: Hover effects in Adobe Muse
Hope someone finds it useful!

It's so cool

Toplevel Navigation: Hover Effect

Similar Messages

Maybe you are looking for