Hi, I try to make a smooth page menu with the ajax-toolkit hovermenu.
But the popup-panel does not hide after the click on the submenues ... Any hints would be great.
Thanks, Stoffel
Here is the code:
1) Default.aspx
Imports System.Web.Configuration
Imports AjaxControlToolkit
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub CreateMenues()
Dim appSettings As NameValueCollection
Dim appSettingsEnum As IEnumerator
Dim mnuTag As String
Dim subMnuTag As String
Dim litCtrl As LiteralControl
Dim curHoverMnuExt As AjaxControlToolkit.HoverMenuExtender
Dim curPanel As Panel
Dim curMainMenuLabel As Label
Dim curSubMenuLink As HyperLink
Dim j As Integer
Dim i As Integer
' Get the appSettings key,value pairs collection.
appSettings = WebConfigurationManager.AppSettings
appSettingsEnum = appSettings.GetEnumerator()
For i = 0 To 2
' Load extender
curHoverMnuExt = New HoverMenuExtender
mnuTag = "mnu_" & i
With curHoverMnuExt
.ID = "hme_" & mnuTag
.TargetControlID = "mnu_" & mnuTag
.PopupControlID = "pnl_" & mnuTag
.PopupPosition = HoverMenuPopupPosition.Bottom
.PopDelay = "25"
End With
' Load menu
curHoverMnuExt = New HoverMenuExtender
With curHoverMnuExt
.ID = "hme_" & mnuTag
.TargetControlID = "mnu_" & mnuTag
.PopupControlID = "pnl_" & mnuTag
.PopupPosition = HoverMenuPopupPosition.Bottom
.PopDelay = "25"
End With
curPanel = New Panel
With curPanel
.ID = "pnl_" & mnuTag
.CssClass = "popupPanel"
End With
curMainMenuLabel = New Label
litCtrl = New LiteralControl(mnuTag)
With curMainMenuLabel
.ID = "mnu_" & mnuTag
.Controls.Add(litCtrl)
.CssClass = "menuLabel"
End With
Me.mnuPlaceHolder.Controls.Add(curHoverMnuExt)
Me.mnuPlaceHolder.Controls.Add(curPanel)
Me.mnuPlaceHolder.Controls.Add(curMainMenuLabel)
For j = 0 To 2
subMnuTag = "submenu_" & i & "_" & j
curSubMenuLink = New HyperLink
With curSubMenuLink
.CssClass = "subMenuLabel"
.ID = "SubMenuLbl_" & subMnuTag
.Text = subMnuTag
.ToolTip = subMnuTag
.NavigateUrl = " switchUrl();"
End With
curPanel.Controls.Add(curSubMenuLink)
litCtrl = New LiteralControl("<br />")
curPanel.Controls.Add(litCtrl)
Next j
Next i
End Sub
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
CreateMenues()
End Sub
End Class
2) Default.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Debug="true" %>
<!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 runat="server">
<title>Unbenannte Seite</title>
<style type="text/css">
div#banner /* banner */
{
height: 80px;
width: 100%;
border: 3px solid #000000;
-moz-box-sizing: border-box;
margin: 0;
padding: 0;
}
div#menubar
{
position: absolute;
left: 5px;
top: 54px;
height: 22px;
width: 98%;
padding: 2px;
text-align: left;
z-index: 1;
}
.popupPanel /*panel (placeholder of submenues) */
{
margin-left: -1px;
margin-top: 1px;
position: absolute;
visibility: hidden;
background-color: #fff;
border-width: 1px;
border-color: #69c;
border-style: solid;
padding: 5px;
text-decoration: none;
font-family: Verdana;
font-size: 10px;
opacity: .9;
filter: alpha(opacity=90);
}
.menuLabel /* menubutton (webcontrol-type: Label)*/
{
background-image: url(images/mnu.gif);
text-decoration: none;
border: 1px solid #039;
height: 20px;
padding: 2px;
margin: 1px;
margin-right: 10px;
font-family: verdana, arial, helvetica;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #039;
}
.menuLabelHover
{
background-image: url(images/mnu-act.gif);
text-decoration: none;
border: 1px solid white;
border-bottom: 1px solid #039;
height: 20px;
padding: 2px;
margin: 1px;
margin-right: 10px;
font-family: verdana, arial, helvetica;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #fff;
}
.subMenuLabel /* subMenuButton (webcontrol-type: Label)*/
{
text-decoration: none;
height: 30px;
margin: 4px;
font-family: verdana, arial, helvetica;
font-size: 12px;
font-weight: bold;
text-align: left;
vertical-align: middle;
color: #039;
}
.subMenuLabel:hover
{
background-color: #039;
text-decoration: none;
height: 30px;
margin: 4px;
vertical-align: middle;
font-family: verdana, arial, helvetica;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<script type="text/javascript">
function switchUrl()
{
document.getElementById("viewerFrame").src="http://de.selfhtml.org/navigation/html.htm";
}
function test()
{
window.setTimeout("switchUrl();",3000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="banner">
</div>
<div id="menubar">
<asp:PlaceHolder runat="server" ID="mnuPlaceHolder"></asp:PlaceHolder>
</div>
<input type="button" onclick="switchUrl();" style="position:absolute; top:20px; left:20px;" />
<iframe runat="server" id="viewerFrame" name="viewerFrame" src="http://de.selfhtml.org/navigation/html.htm#hinweis" height="100%" /> <!--frameborder="0"-->
</form>
</body>
</html>