Hi,
I have a site which is an ASP.Net MVC3 Web Application. Since I needed sub-menus, I decided to use the SuperFish plugin.
I downloaded the code, and added to my menu the sub-menues using, of course, the ul class="sf-menu".
When I get to me home page (Which is the Index.cshtml), everything is ok (probably since it's my home page and the JavaScripts was loaded once). When I try to load a different page I get an error (Object Expected) on the JQuery function.
If I delete this function, I don't get an error but it's as if the SuperFish CSS file is not loaded and the menu appears as a TreeView.
I tried to google the issue and found some answers in which putting the JQuery function after a PlaceHolder should resolve the problem. I tried and it didn't. Now I get the Object Expected error also when loading my home page.
The code as it is now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
@*<title>@ViewBag.Title</title>*@
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="<%=Url.Content("~/js/jquery-1.2.6.min.js")%>"></script>
@*<%=ResolveClientUrl("~/js/superfish.js")%>*@
<asp:ContentPlaceHolder ID="head" runat="server"/>
<script type="text/javascript" src="<%=Url.Content("~/js/hoverIntent.js")%>"></script>
<script type="text/javascript" src="<%=Url.Content("~/js/superfish.js")%>"></script>
<script type="text/javascript">
jQuery(function () {
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul class="sf-menu">
<li class="current">
<a href="#a">1st menu item</a>
<ul>
<li>
<a href="#aa">menu item 1</a>
</li>
<li class="current">
<a href="#ab">menu item 2</a>
<ul>
<li class="current">
<a href="#">menu item 21</a>
</li>
</ul>
</li>
</ul>
</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Notes:
1. "js" is a folder which is part of the solution, it is directly under the solution's folder. The css folder is the same.
2. Before the PlaceHolder fix, I also didn't use the "Url.Content". After adding that The error appeared also when loading the home page.
The Code:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery('ul.sf-menu').superfish();
});
</script>