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>
CSS Codes
Reply With Quote
Bookmarks