I am attempting to add the jQuery drilldown menu to my web app. I have followed the instructions here and copied the source code from here. When I add everything to my project and the code to my _layout.cshtml site the drill down menu does not work the page looks like a regular tree structure for nested unordered lists.
jQuery this is in the head tag:
<script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.min.js")"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#drilldown').dcDrilldown({
speed: 'slow',
saveState: true,
showCount: false,
linkType: 'breadcrumb'
});
});
</script>
Html:
<ul class="pull-left span1" id="drilldown">
<li><a href="#">Record Check</a></li>
<li><a href="#">Reports/Statistics</a></li>
<ul>
<li><a href="#">USN</a></li>
<ul>
<li><a href="#">Aclohol Incidents and Status Reports</a></li>
<ul>
<li><a href="#">Alcohol Incidents(By FY)</a></li>
<ul>
<li><a href="#">Fiscal Year</a></li>
<li><a href="#">Category</a></li>
</ul>
<li><a href="#">Alcohol Status Reports</a></li>
</ul>
<li><a href="#">Urinalysis Reports</a></li>
<li><a href="#">DAAR Listing</a></li>
<li><a href="#">Laboratory Positive Status Report</a></li>
<li><a href="#">Screening Listing</a></li>
<li><a href="#">Group Profile</a></li>
<ul>
<li><a href="#">With Details</a></li>
<li><a href="#">Without Details</a></li>
</ul>
<li><a href="#">Unit Profile</a></li>
<li><a href="#">ADMITS User and UIC Listings</a></li>
<ul>
<li><a href="#">ADMITS User Listing</a></li>
<li><a href="#">UIC Listing</a></li>
</ul>
</ul>
<li><a href="#">USMC</a></li>
<li><a href="#">STAFF</a></li>
<li><a href="#">DAPA/UPC</a></li>
</ul>
<li><a href="#">DAAR Data</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Edit Unit</a></li>
<li><a href="#">Screening</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Treatment</a></li>
<li><a href="#">Waiver Data</a></li>
<li><a href="#">New Report - Test</a></li>
<li><a href="#">UIC Search</a></li>
<li><a href="#">Spice</a></li>
<li><a href="#">Breathalyzer</a></li>
</ul>
Any ideas on why my drill down menu is not appearing?
Update
I should have mentioned this is an MVC4 app so the two sets of double quotes are required.
Update 2
as requested my page source looks like:
<head>
<title>Home Page</title>
<link href="/Content/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/base-admin.css" rel="stylesheet" type="text/css" />
<link href="/Content/base-admin-responsive.css" rel="stylesheet" type="text/css" />
<link href="/Content/fontAwesome/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/excanvas.min.js"></script>
<script src="/Scripts/jquery.cookie.js"></script>
<script runat="server" src="/Scripts/jquery.dcdrilldown.1.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#drilldown').dcDrilldown({
speed: 'slow',
saveState: true,
showCount: false,
linkType: 'breadcrumb'
});
});
</script>
</head>
<div class="pull-left span1">
<ul id="drilldown">
<li><a href="#">Record Check</a></li>
<li><a href="#">Reports/Statistics</a></li>
<ul>
<li><a href="#">USN</a></li>
<ul>
<li><a href="#">Aclohol Incidents and Status Reports</a></li>
<ul>
<li><a href="#">Alcohol Incidents(By FY)</a></li>
<ul>
<li><a href="#">Fiscal Year</a></li>
<li><a href="#">Category</a></li>
</ul>
<li><a href="#">Alcohol Status Reports</a></li>
</ul>
<li><a href="#">Urinalysis Reports</a></li>
<li><a href="#">DAAR Listing</a></li>
<li><a href="#">Laboratory Positive Status Report</a></li>
<li><a href="#">Screening Listing</a></li>
<li><a href="#">Group Profile</a></li>
<ul>
<li><a href="#">With Details</a></li>
<li><a href="#">Without Details</a></li>
</ul>
<li><a href="#">Unit Profile</a></li>
<li><a href="#">ADMITS User and UIC Listings</a></li>
<ul>
<li><a href="#">ADMITS User Listing</a></li>
<li><a href="#">UIC Listing</a></li>
</ul>
</ul>
<li><a href="#">USMC</a></li>
<li><a href="#">STAFF</a></li>
<li><a href="#">DAPA/UPC</a></li>
</ul>
<li><a href="#">DAAR Data</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Edit Unit</a></li>
<li><a href="#">Screening</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Treatment</a></li>
<li><a href="#">Waiver Data</a></li>
<li><a href="#">New Report - Test</a></li>
<li><a href="#">UIC Search</a></li>
<li><a href="#">Spice</a></li>
<li><a href="#">Breathalyzer</a></li>
</ul>
</div>
Change
<script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.min.js")"></script>
To
<script src="@Url.Content('~/Scripts/jquery.cookie.js')"></script>
<script src="@Url.Content('~/Scripts/jquery.dcdrilldown.1.2.min.js')"></script>
The extra double quotes around the URL are breaking out of the src
attribute quoted string.
UPDATE:
OK, I think I see the problem. Your HTML is invalid. The only direct children of a <ul>
element must be <li>
elements. Your nested <ul>
elements need to be inside the <li>
tags. Take a look:
<!-- wrong -->
<ul>
<li></li>
<li></li>
<ul>
...
</ul>
</ul>
<!-- correct -->
<ul>
<li></li>
<li>
<ul>
...
</ul>
</li>
</ul>
Try this:
<ul id="drilldown">
<li><a href="#">Record Check</a></li>
<li><a href="#">Reports/Statistics</a>
<ul>
<li><a href="#">USN</a>
<ul>
<li><a href="#">Aclohol Incidents and Status Reports</a>
<ul>
<li><a href="#">Alcohol Incidents(By FY)</a>
<ul>
<li><a href="#">Fiscal Year</a></li>
<li><a href="#">Category</a></li>
</ul>
</li>
<li><a href="#">Alcohol Status Reports</a></li>
</ul>
</li>
<li><a href="#">Urinalysis Reports</a></li>
<li><a href="#">DAAR Listing</a></li>
<li><a href="#">Laboratory Positive Status Report</a></li>
<li><a href="#">Screening Listing</a></li>
<li><a href="#">Group Profile</a>
<ul>
<li><a href="#">With Details</a></li>
<li><a href="#">Without Details</a></li>
</ul>
</li>
<li><a href="#">Unit Profile</a></li>
<li><a href="#">ADMITS User and UIC Listings</a>
<ul>
<li><a href="#">ADMITS User Listing</a></li>
<li><a href="#">UIC Listing</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">USMC</a></li>
<li><a href="#">STAFF</a></li>
<li><a href="#">DAPA/UPC</a></li>
</ul>
</li>
<li><a href="#">DAAR Data</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Edit Unit</a></li>
<li><a href="#">Screening</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Treatment</a></li>
<li><a href="#">Waiver Data</a></li>
<li><a href="#">New Report - Test</a></li>
<li><a href="#">UIC Search</a></li>
<li><a href="#">Spice</a></li>
<li><a href="#">Breathalyzer</a></li>
</ul>