Hacking MySpace

After showing you how to make your own div layout and remove the Myspace navigation bar I thought I should probably show you how to create your very own navigation which you can customize to suit your layout and place wherever you wish.

I am going to show you how to create a "horizontal floating list menu", which is basically the same type of menu that Myspace already use, just without the drop down menus. It is fairly simple and if you have any experience in coding HTML/CSS on websites then you will probably already know how to do this.

Of course you don’t have to use the same type of menu, this is just the most commonly used type I could think of. I will also show you how to make a vertical list menu (it’s exactly the same process, you just miss out one of the steps). If you are looking for any of the Myspace URL’s then I have a page which I keep updated as much as I can with the current Myspace links.

Lets get started

Step 1 - The Structure

First we need to set the structure of our menu in HTML, so lets say we make something like this:

<ul class="listmenu">
<li><a href="http://home.myspace.com/index.cfm?fuseaction=user">Home</a></li>
<li><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=xxxxxx">Message Me</a></li>
<li><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=xxxxxx">Add Me</a></li>
<li><a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=xxxxxx">Block Me</a></li>
<li><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=xxxxxx">Add Comment</a></li>
</ul>

So we now have 5 links in a list with a classname of "listmenu" which we are now going to customize so they look like a menu instead of a list.

Step 2 - Strip Down

Now we need to apply some CSS to the list so it doesn’t look like a list anymore (i.e. to get the bullet points to disappear). To do this all we need to do is add this style sheet:

<style>
ul.listmenu li {
    list-style:none;
}
</style>

Step 3 - Customization

In this step we can add any style we like to the menu (so that it fits in with our page design).
To style mine I am going to make the link appear as a block, make the link bold and apply a background color to it. Then for the link hover style I am going to change the link color, background color and add an underline. The code to do so would be like this:

<style>
ul.listmenu li a, ul.listmenu li a:link, ul.listmenu li a:active, ul.listmenu li a:visited {
    display:block;
    font-weight:bold;
    text-decoration:none;
    width:120px;
    background-color:#597899;
    color:#FFFFFF;
}

ul.listmenu li a:hover {
    color:#000000;
    text-decoration:underline;
    background-color:#FFFFFF;
}
</style>

Of course you don’t have to use the same style as me, this is just an example.

Step 4 - Floating

So far your menu should be a vertical list menu, if you want to make it a horizontal list menu then follow this step, otherwise that is you finished.

All we need to do to make it horizontal is "float" the list items, this is done by applying some CSS like so:

<style>
ul.listmenu li {
    float:left;
}
</style>

After all of this you should end up with something like what is shown in the image at the start of this post. It takes a new line if there is no space for it (which is why the one in the image is on two lines).

The Full Code

<style>
ul.listmenu li {
    list-style:none;
   float:left;
}

ul.listmenu li a, ul.listmenu li a:link, ul.listmenu li a:active, ul.listmenu li a:visited {
    display:block;
    font-weight:bold;
    text-decoration:none;
    width:100px;
    background-color:597899;
    color:FFFFFF;
}

ul.listmenu li a:hover {
    color:000000;
    text-decoration:underline;
    background-color:FFFFFF;
}
</style>

<ul class="listmenu">
<li><a href="http://home.myspace.com/index.cfm?fuseaction=user">Home</a></li>
<li><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=xxxxxx">Message Me</a></li>
<li><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=xxxxxx">Add Me</a></li>
<li><a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=xxxxxx">Block Me</a></li>
<li><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=xxxxxx">Add Comment</a></li>
</ul>

Related: