Adding a Custom Top Menu to myspace

2007-01-21T16:39:00.000-08:00

I have a few different solutions here. The one which best meets your needs depends on your page, and what you have hidden.

All of these solutions display the following:
Our Sample will contain the following menu items. You can remove those you do not want, and add additional items you do want.

- block me (a required element)
- message me
- add me
- view all blogs
- view all friends
- view/add comments

I used Tom's friend id in all of these solutions. You want to replace this with your own friend id.

Solution 1, Table only, No Div, Places menu where you place the code i.e. If you place this code as the first item, after creating an outer Div, it will place itself at the top of the Div.
This works well if you have created a custom Div, as in a div overlay.
I use this code on This Page:Click Here to View Page

Place this code as the first item, inside the Div you want it displayed in:

<center>
<table class="myMenuClass" width="800" height="22" border="0" cellspacing="0" cellpadding="0">
<tr valign="middle">
<td align="center" style="align:center; visibility:visible; "><a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=6221" class="mynav">My Blogs</a>
 | 
<a class="mynav" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=6221">Add Me</a>
 | 
<a class="mynav"  href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=6221">Send Me A Message</a>
|
<a class="mynav"  href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">View/Add Comments</a>
|
<a class="mynav"  href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View Friends</a>
 |
<a class="mynav" href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=6221">Block Me</a>
</tr></td></table>
</center>

Solution 2: Compress the top area of the page, to make room for a custom menu; place custom menu where the default menu is now.
Keep in mind that positioning does vary based on the browser, resolution, and dpi (and other things). So this may look great on one computer, and show overlap on another. I did test this in multiple dpi's (which is where the greater variance seems to be). I have also added code to allow the default menu to widen, rather than overlap, if there is room on the viewer's screen.

First we will compress (move up slightly) the space taken up by the existing top menu/search box so there is room for our custom menu:

<style>
{! move existing menu up to make room, adjust font to smaller size (change if desired !}
form {position:relative; top:-8px; }
.navigationBar {position:relative; top:-20px; font-size:9px; width:auto !important }
.navigationBar td, .navigationBar table {width:auto !important}

{! below line is in case you have rendered the div level hidden or display:none in another customization; you may need different code for this depending on where you place this code, and modifications you may have made to table structure !}
table table table table div.mynavbar  {visibility:visible !important; display:inline !important;}
</style>

Next we add in our own menu, where the old menu used to be.

<div class="mynavbar" style="background-color:C6CEF4;  position: absolute; visibility:visible; left:50%; top:140px; margin-left: -400px; width: 800px; height: 22px">
<table width="800" height="22" border="0" cellspacing="0" cellpadding="0">
<tr valign="middle">
<td align="center" style="visibility:visible;">
<a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=6221" class="mynav">My Blogs</a>
 | 
<a class="mynav" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=6221">Add Me</a>
 | 
<a class="mynav"  href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=6221">Send Me A Message</a>
|
<a class="mynav"  href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">View/Add Comments</a>
|
<a class="mynav"  href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">View Friends</a>
 |
<a class="mynav" href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=6221">Block Me</a>
</tr></td></table></div>

Please change Tom's friend id (6221) with your own. You might want to paste the code into notepad, and do a replace-all (replace 6221 with your own friend-id, in a mass replace all).
Of course you can change the background color and font color and even adjust the sizes (px values) if they do not look right on your page.

On the band page, Getting the distance from the top is more difficult. The two browsers I normally use to view pages, each start the top block in different locations. One has a small area above the ad banner, the other doesn't.
Therefore the code has to use different top px values for each browser.

Use the bio section on the band page. Use Safe Mode (or no style, which I highly recommend over safe mode due to what myspace edits out in each mode).
On the standard page, the code can go in almost any of the data entry boxes. I used to put it in about me.

Madeline's Myspace Spiffs

Adding a Custom Top Menu to myspace