Myspace Compilation - Resources for customizing your myspace page!

2.0 "Hidden Text" Hover Menu
- Go to MSC Home | Go to MSC Profile 2.0 Codes -

Rate This Page!

First thing I would stress you to do is copy the code as it is below to your page (or a test page if you have one would be better!) to see how it works. You can also Click Here to Preview how it's supposed to work. This code is fully customizable. Because of that it gets a little bit complicated, but again, just try it out.

Add this to your CSS { } Box in 2.0

.msc {adjust red menu container area and style it below}
div.mscMenu {height:120px; width:525px; border:1px solid black; background-color:red; padding:4px;}

.msc {adjust color:white to your own font text color}
div.mscText1 a span {display:none;}
div.mscText1 a:hover {position:relative; cursor:default;}
div.mscText1 a:hover span {display:block; position:absolute; float:left; white-space:nowrap; top:0px; left:150px; font-weight:bolder; color:white;}

.msc {adjust color:white to your own font text color}
div.mscText2 a span {display:none;}
div.mscText2 a:hover {position:relative; cursor:default;}
div.mscText2 a:hover span {display:block; position:absolute; float:left; white-space:nowrap;top:-15px; left:150px; font-weight:bolder; color:white;}

.msc {adjust color:white to your own font text color}
div.mscText3 a span {display:none;}
div.mscText3 a:hover {position:relative; cursor:default;}
div.mscText3 a:hover span {display:block; position:absolute; float:left; white-space:nowrap;top:-30px; left:150px; font-weight:bolder; color:white;}

Add this to your About/Meet sections (or wherever you want it to appear)

<div class="mscMenu">
<span style="border:1px solid black; background-color:yellow;"><strong>Hover over the words below to learn more about me!</strong></span>
<div class="mscText1"><a href="#">About Me<span>I am a very down to earth type person.<br />I play nice with others but don't take my kindness<br /> for weakness.<br />I love living life and try to make the best of it!<br />If you want to know more about me just ask!</span></a><div class="mscText2"><a href="#">I'd Like To Meet<span>There are many people I guess I would like to meet.<br />The list goes on and on.<br />But there isn't just one person on this planet<br /> that I am dying to meet.<br />So that's it.</span></a><div class="mscText3"><a href="#">My Hobbies<span>Web Design<br />Working out<br />Being Outdoors<br />And of course spending time with my Family!</span></a></div></div></div>
</div>

Some Notes on the Above:
- Double check the preview to see what colors match what. You can style the "learn more about me" header.
- It gets tricky with the line breaks. If you have a long sentence you will want to put a new line break.
- It's important all the code is bunched together like this or it won't work if you start putting extra spaces in it.
- Make sure you keep all the span and div tags intact.
- Where it has "a href=#" make sure to leave the pound # sign alone.

If you have any questions/comments PLEASE ASK HERE and I can help you out.
I just first ask that you try it out and then ask questions after. Thanks!