Static Menu Script

**vegeman** · 09-06-2013, 10:49 AM

1) Script Title: Static Menu Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...taticmenu3.htm

3) Describe problem:

I'm using a line of java script that links to a position in my music player playlist half way down the page: <a href="javascript:;" id="playlist-setPlaylist-funkmusic">

Is it possible to include this line of code in your "Static Menu Script" instead of a typical url?

Thanks.

**molendijk** · 09-06-2013, 04:03 PM

Hello vegeman,
That script is terribly outdated. You'd better use something like this:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Static Menu</title>

<style>
.menu_item {border: 1px solid gray}
.menu_item:hover{background: yellow; cursor: pointer}
</style>

<script>
var my_menu=
'<div style="position: fixed; text-align: center; width: 130px; left: 15px; top: 50px; font-family: arial; font-size: 15px">'+
'<div style="background: lightblue; border: 1px solid gray">Menu</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'">Dynamic Drive</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</div>'+
'<div class="menu_item" onclick="alert(\'hello\')">Alert</div>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

</head>

<body style="padding-left: 200px">
Body content here
</body>

</html>

It'll give you more freedom. You can use whatever type of link you want (see last item: alert).
This alternative is not very sophisticated, but easy to understand.

**vegeman** · 09-06-2013, 04:47 PM

Hi Molendijk,

Thanks, but I can't seem to format the link correctly for it to work.
Can you take a look and let me know what I'm doing wrong?

Test Site: http://drumlesssplitsongs.com/test.htm

I'm trying to take the code from line 2006 and place it at line 2113.

NOTE: Look all the way to the left of the page at the top and you can see the static link working there.

Thanks.

Originally Posted by molendijk

Hello vegeman,
That script is terribly outdated. You'd better use something like this:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Static Menu</title>

<style>
.menu_item {border: 1px solid gray}
.menu_item:hover{background: yellow; cursor: pointer}
</style>

<script>
var my_menu=
'<div style="position: fixed; text-align: center; width: 130px; left: 15px; top: 50px; font-family: arial; font-size: 15px">'+
'<div style="background: lightblue; border: 1px solid gray">Menu</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'">Dynamic Drive</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</div>'+
'<div class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</div>'+
'<div class="menu_item" onclick="alert(\'hello\')">Alert</div>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

</head>

<body style="padding-left: 200px">
Body content here
</body>

</html>

It'll give you more freedom. You can use whatever type of link you want (see last item: alert).
This alternative is not very sophisticated, but easy to understand.

**molendijk** · 09-06-2013, 05:31 PM

Well, this:

Code:

'<div class="menu_item" onclick="<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</div>'

is invalid code'. That should be:

Code:

'<div class="menu_item" onclick="location.href" id="playlist-setPlaylist-heavy">Heavy Metal</div>'

or maybe

Code:

'<div class="menu_item" onclick="location.href=javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</div>'

But I wonder if that will work, since it's not clear to me what your original:

Code:

<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal<br></a>

exactly does. Btw, it should be </a><br>, not <br></a>.

**vegeman** · 09-06-2013, 05:44 PM

Oh well, your suggested solutions didn't work for that link and I tried both of them. Thanks anyway for trying though. Hopefully someone else on the forum will have a fix.

Thanks again for the initial fix on the menu itself !

**molendijk** · 09-06-2013, 11:06 PM

Hello vegeman,
I found out how your script works.
Replace the styles I gave you with this:

Code:

<style>
.menu_item {position: relative; font-family: arial; font-size: 14px; color: blue}
.menu_item:hover{background: yellow; cursor: pointer}
</style>

Replace the script I gave you with this:

Code:

<script>
var my_menu=
'<div style="position: fixed; text-align: center; right: 275px; top: 175px; height:0px">'+
'<a style="background: lightblue; border: 1px solid gray">Menu</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'">Dynamic Drive</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</a><br>'+
'<a class="menu_item" href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

Remove the original line for Heavy Metal. That is, remove the following (whole!) line. Don't forget to also remove the closing a-tag (</a>):

Code:

<a href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>

That should do it.

**vegeman** · 09-07-2013, 12:49 AM

Wow, that worked! Thanks. Is there a way to add back in the border lines as before?

Also, can each link have a colored background and not be transparent?

One last thing: I need to refresh the page to allow the main list to appear once you've already chosen a genre heading such as heavy metal.
Can I make this refresh code a link in the scrolling box: <a href="javascript:history.go(0)">Main List</a> (it's currently on line 2004)

Can I throw you a few bucks for your trouble? Have a PayPal acc't?

Thanks!

**molendijk** · 09-07-2013, 10:12 AM

Styles:

Code:

<style>
.menu_item {position: relative; font-family: arial; font-size: 14px; color: white; width: 170px; border: 1px solid gray; display: inline-block; background: darkred}
.menu_item:hover{background: yellow; color: black; cursor: pointer}
</style>

Script:

Code:

<script>
var my_menu=
'<div style="position: fixed; text-align: center; right: 275px; top: 175px; height:0px">'+
'<a style="background: lightblue; border: 1px solid gray">Menu</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com\'" style="background: green">Dynamic Drive</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/new.htm\'">What\'s New?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/hot.htm\'">What\'s Hot?</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.codingforums.com/\'">Message Forum</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/faqs.htm\'">FAQs</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/link.htm\'">Link to us</a><br>'+
'<a class="menu_item" onclick="location.href=\'http://www.dynamicdrive.com/contact.htm\'">Email us</a><br>'+
'<a class="menu_item" href="javascript:;" id="playlist-setPlaylist-heavy">Heavy Metal</a><br>'+
'</div>'
document.write(my_menu) //document.write is outdated, but will do in this case.
</script>

The default background is darkred (see styles). You can change that of course. You can change the background for each individual item by doing something similar to what I've done for the DynamicDrive link (style=...)..

Refresh code:
Just above this:

Code:

<div class="jp-current-time">00:00</div>

add this:

Code:

<div style="text-align: center; font-size: 11px; font-weight: bold">Click <a style="color: gray" href="javascript: void(0)" onclick="window.location.reload()">here</a> to start all over</div>

I'm glad to help you. To thank me, just login then click on the thanks-button at the bottom (left). No bucks.

**vegeman** · 09-07-2013, 02:41 PM

Hi Arie,

Thanks a bunch. I changed the refresh link and now everything works great. Thanks again for ALL your help. You're the man :-)

Check out the site now: http://drumlesssplitsongs.com/