Currently, I am working on implementing a menu bar control. Below is the CSS and design code that I have used:
CSS :
.Menu
{
background:transparent url(../images/blueslate_background.gif) repeat-x;
text-align:center;
font-family : "lucida grande", tahoma, verdana, arial, sans-serif;
font-size:12px;
font-weight:bold;
border: None 0px #fff !important;
}
.menuhover
{
color:#fff;
background:transparent url(../images/blueslate_backgroundOVER.gif) repeat-x left center;
cursor:pointer;
}
Design :
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl" %>
<link rel="stylesheet" href="css/Menu3.css" type="text/css" />
<div id="header" align="center" >
<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
<tr>
<td align="center">
<asp:Menu ID="Menu1" runat="server" Orientation ="Horizontal" CssClass="Menu"
ForeColor ="Black" Width="100%" ScrollDownText="">
<StaticMenuItemStyle Height ="40px"/>
<DynamicMenuItemStyle CssClass ="Menu" Height="30px" HorizontalPadding="10px"/>
<dynamichoverstyle CssClass ="menuhover"/>
<StaticHoverStyle CssClass ="menuhover"/>
</asp:Menu>
</td>
</tr>
</table>
</div>
I would like to make the entire area of each menu bar list item clickable. Is there a way to achieve this using jQuery or JavaScript?
------------------------------------Updated-----------------------------------------------------
Here is an example of how you can make a whole div clickable using jQuery:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".thumb").click(function(){
window.location=$(this).find("a").attr("href");return false;
});
});
</script>
------------------------------------Updated-----------------------------------------------------
Solution :
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".Menu").click(function(e) {
window.location = $(e.target).find("a").attr("href");
return false;
});
});
</script>
An error occurs when I click on the original Menu Text, Error:
Server Error in '/EasyWeb' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /EasyWeb/undefined
Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053