Forum Moderators: open

Message Too Old, No Replies

Sliding Menus

         

calmseas

6:32 pm on Dec 29, 2010 (gmt 0)

10+ Year Member



Hi - I'm a newbie trying to learn sliding menus and css.
As a test, I've pasted script01.html, script01.css and script01.js from Chap 14 of JavaScript & Ajax 6th Ed into my webpage rendered with IE. A snippet from script01.html is as follows:

<title>Shakespeare's Plays</title>
<link rel="stylesheet" rev="stylesheet" href="script01.css" />
<script type="text/javascript" language="Javascript" src="script01.js">
</script>
</head>
<body>
<h1>Shakespeare's Plays</h1>
<div>
<a href="menu1.html" class="menuLink">Comedies</a>
<ul class="menu" id="menu1">
<li><a href="free_safety_check.html">VSC_1</a></li>
<li><a href="free_safety_check.html">VSC_2</a></li>
</ul>
</div>

When I click on 'Comedies' on the author's book site, the drop down menu appears. When I click on 'Comedies' on my website, the drop down menu can't be found because I have no menu1.html file in the directory. I must have overlooked something obvious, but I don't see it. Could anyone please enlighten me?

daveVk

12:49 am on Dec 30, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've pasted script01.html, script01.css and script01.js from Chap 14 of JavaScript & Ajax 6th Ed into my webpage


These are intended to be separate files on your server, Start with them that way, then try combining script01.html with your web page.

calmseas

5:18 am on Dec 30, 2010 (gmt 0)

10+ Year Member



What puzzles me is that script01.html, script01.css and script01.js are separate files on the server; but when I click the Comedies link I still get menu1.html not found. The problem can be demo'd by navigating to [calmseas.org...] The referenced scripts are in the 'test' folder.

daveVk

12:36 pm on Dec 30, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




function initAll() {
var allLinks = document.getElementsByTagName("a") ;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
if (allLinks[ i ].className.indexOf("menuLink") > -1) {
allLinks[ i ].onclick = toggleMenu;
}
}
}


The two lines in red should be deleted

calmseas

5:07 pm on Dec 30, 2010 (gmt 0)

10+ Year Member



Well..........that was slightly embarassing (red in the face). Thank you so much for pointing out the obvious.