Fancy Navigation, I cannot, for the love of God, figure out how to make nav like this. Options

[Amanda-x]

Hello! I have been battling my head going in circles trying to figure out how to make a navigation bar like this one:

http://www.createblog.com/layouts/code.php?id=15259

Who can help me out? :)


Thanks!

Amanda

[manny-the-dino]

The navigation bar is simply text.

Moved to Myspace Support

[Amanda-x]

Well, not COMPLETELY only text. Haha. If you hover over it, the bars show up and stuff.

...I don't mean to sound stupid. Hahahaha.

[manny-the-dino]

Ohhhhhhh. I didn't hover over them lol.

They're probably rollovers. There are some tuts here:
http://www.createblog.com/tutorials/index.php?tag=rollovers

I'm not so sure about it so sorry if I'm wrong.

[Smarmosaur]

as Nat(hope you don't mind me calling you that. please PM a bitchy message if you do mind. ) said, it's rollovers. you can either use images (which might be a little difficult if you're a beginner), or you can do it the normal way with CSS.

all you have to do is assign your links to a class (i'll use nav as an example), and go crazy with the CSS. here's the basics:

CODE

<a href="linkage" class="nav">Text</a>

<style type="text/css">
a.nav:link{
font-family:whatever;
font-size:number;
text-align:center;
color:000000;
text-decoration:none;}
</style>

that's your basic link and CSS. to add the awesome rollovers, just add in the hover and set a background color and left border, like this:

CODE

<style type="text/css">
a.nav:hover{
color:whatever;
background-color:whatever;
border-left-width:#px;
border-left-color:whatever;
border-left-style:solid;}
</style>

[manny-the-dino]

^ No, it's totally fine if you call me Nat.

Thanks for helping out, Becka.

[Mickey]

That kind of rollover requires a bit of experimentation, because you have to play around with padding and border size/color. Try this for the hover code:

CODE

<style type="text/css">
a.nav:hover{
color:000000;
background-color:999999;
border-left-width:12px;
border-left-color:CC0000;
border-left-style:solid;
padding-left:10px;
padding-right:10px;
padding-top:2px;
padding-bottom:2px;}
</style>

I also tried a few colors, so see if that works out for you.