[2005] Using pop up hover menus

[MrNorth]

Hi!

On a masterpage I ahve a menu which displays some hyperlinks, and when the user click the hyperlink a dropdown menu appear (a styled div with hyperlinks)

As they have done this before, they added all thess menu divs at them bottom of the masterpage, and everything worked fine. But now I want to do some refactorying and replace them with a usercontrol and ajax hovermenuextender. I have 3 hyperlinks and 3 div menus, and 3 extenders. Everything works fine except when I add the usercontrol to the masterpage. Then there is a LOT of added empty space because of the content panels for the menus.

How can I solve this problem? I want the top left menu as a usercontrol, but I don't want the content divs to create empty space between top menu and content. I set the divs to visibility: hidden but this doesn't mean they disappear....

/Henrik

[MrNorth]

An update, I noticed the panel only occupy space until I make it appear for the first time. After that it works perfectly. I used the IE developer toolbar to find out what happens and it looks like this in the attached picture.

As you can see the div with its menu options is hidden outside what I consider to be the actual content. As soon as I go to the hyperlinkbutton that show the menu, the horizontal scrollbar of the page will disappear and everything is normal.

Can this have something to do with that I fill the div with values dynamically during page load?

/Henrik

[mendhak]

When you fill the DIV up how are you hiding them? Is it the codebehind .Visible or is it a CSS display/visible property?

[MrNorth]

Hi!

The div has the style visible: false;

It should work, but not here

/Henrik

[mendhak]

Try display:none; instead. I believe visible:false; only hides it but doesn't remove it from page layout flow.

[timeshifter]

What I'd suggest doing is a CSS-based popup. You get better control over the styling, and trust me, it's a LOT easier to implement than any of the .NET AJAX controls. Take a quick look at jQuery if you'd like; it makes this kind of stuff much easier, and generally cross-browser compliant as well, but it's not a requirement. CSS tooltips work something as such:

HTML:

<div class="tooltipLink">
    The Finished Product
    <div class="tooltipPopup">
        Demo text inside our wonderful popup. Isn't this cool?<br />
        It even handles <a href="http://www.google.com">links</a>!
    </div>
</div>

CSS:

.tooltipLink {position:relative; float:left; cursor:pointer; color:#335599;}
.tooltipLink .tooltipPopup {position:absolute; display:none; left:20px; top:14px; width:200px; padding:3px; background-color:#ddd; border:solid 1px #a2bEd7; color:#000000;}
.tooltipLink:hover .tooltipPopup {display:block;}

Full explanation is provided here. It's a block-level element positioned absolutely to the parent anchor, and therefore the popup itself isn't even part of the flow layout. It stays out of the way, and works fine in any browser. Throw in a bit of jQuery to add fancy animations to it or what have you... adding an AJAX callback to retrieve data to display in the popup wouldn't be that difficult either. Either way, it's cross-browser functional, doesn't break flow layout, and is extremely customizable.