Installed "Responsive Side Toggle Menu " Browser Screen Completely Blank
1) Script Title: Responsive Side Toggle Menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...togglemenu.htm
3) Describe problem: When I open my test.html file with IE 9 Browser or Opera, the screen is completely blank. Initially, I added the side toggle menu to the home page I am working on and it did not work so I then set up simple index.html file to see how the DD side menu would work alone. I have both sidetogglemenu.css and sidetogglemenu.js in the root directory. I also ran a quick test in another .html file and javascript is running. I am a newbie and don't know what else to look for. Any help would be greatly appreciated. I really want to simply run the a toggle menu with one layer, not two.
This is the .html file:
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="sidetogglemenu.css">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="sidetogglemenu.js"></script>
<script>
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10,
})
menu2 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu2',
position: 'right',
revealamt: -5
})
})
</script>
<script>
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
pushcontent: true // <- No comma after last option!
})
})
< /script>
</head>
<body>
<button onClick="menu1.toggle();" class="sideviewtoggle">Toggle Menu 1</button>
<div id="togglemenu1" class="sidetogglemenu">
<ul class="mainnav">
<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a>
</ul></div>
<p style="padding:10px">
This menu's markup is defined inline on the page. With the setting <code>pushcontent: true</code>, the menu shifts the rest of the page's content to make room for itself when revealed.
</p>
</body>
</html>
