Looking for a good navigation bar for a website

Hey guys,
First let me say that my luck is amazing, its not enough that im not good at all with programs like photoshop and such, even guides hate me!
I’ve been surfing through a list of about 150 navigation bar examples, i choosen one, and what i found out, the guide doesnt work!
when i checked all the rest everything worked, but excactly what i wanted doesnt…

So now i want to ask here, if anyone knows where i can find a guide to do such a thing or can kindly do it for me, i’d be thankful
image added.

I probably need only 1 of the buttons without the text.

Thanks,
Ulthane

another navbar which i liked but guide didnt work, amazing…

I’m still locked on that green one though… someone help :stuck_out_tongue:

Sadly, your images are still pending approval so we can’t offer as much analysis as we’d like.

If, by ‘guide’ you mean a tutorial? then we can tell you how to do it or just give you the code. I’m all for telling you how to do it with annotated code snippets (a tutorial) as it’ll be easier for you to learn.

Once your images show up, we’ll be able to help you better.

Good luck.
~TehYoyo

hey tehyoyo, thanks for the note ill wait for them to be approved :slight_smile:
and yes when i said guide i made tutorial, when you will be able to see the image i would like some help achieving one of the buttons from the green menu

The images have been approved.
What were the guides/tutorials you were following?
Where did you get stuck?
In what way didn’t they ‘work’?

i just searched on google on a list of more than 200 navbars and buttons, didnt find anything similar, and without a guide i cannot do it on my own

By not working i mean that the guide did not exist
for example from here:

Go to the 5th navbar which i what i wanted, link doesnt work.

Alright. I can see it.

Those are quite beautiful navigation bars.

The way to achieve such an effect is through a background-image. You may be able to achieve such an effect via pure CSS3, but that’d be very difficult and isn’t something that I think you want.

Tutorial:

This effect has been achieved with a background-image. It was most likely done in a program like Photoshop or GIMP. I won’t go through exactly how to achieve this, as it’s equally if not more complicated than this tutorial. If you want help, post a new thread or ask in here.

Step 1 - Basic HTML layout

The basics of the HTML layout will be an unordered list. This is how most navigation bars are done, so you should become acquainted with them.

You’ll want something like this (assuming you’ve finished all of the <head> stuff, etc):


<ul>
<li>TehYoyo</li>
<li>Ulthane</li>
<li>SitePoint</li>
<li>Forums</li>
</ul>

That’s all! Now for the CSS:


li
{
 display:inline-block;
 font-size:16px;
 margin-left:0;
 text-align:center;
 color:#FFFFFF;
 border:1px solid #00FF00;
 padding-top:10px;
 padding-bottom:10px;
 font-family:Arial, sans-serif;
 height:36px;
 width:80px;
 background-image:url('yourbackground.jpg');
}

And that’s it. Substitute the values that you want. Substitute yourbackground.jpg with the background image of your choice.

I don’t know how much of a tutorial that was so much as an explanation of what to do. Post if you have questions about certain things I did.

There is one problem that I, myself, would like the answer to. I can’t figure out a way to stop there being space between the different list items. How do I fix that?

Thanks.
~TehYoyo

Ah I see what you mean about broken links. Unfortunately that’s often a problem with collection posts like “50 top this” or “20 top that” - the page is still alive but sometimes the link they refer to aren’t.

I was able to retrieve some of the tutorial you were looking for from the wayback web machine - take a look here: Green Navigation
However, some of the images are missing, but the words are still there. See how you go. If you get stuck at all, post in here at where you’re stuck and we can try to help you out.
Later tonight I will try this for myself at home and see if I can instruct you further.

Tehyoyo i know how to do the html+css i need the image itself :slight_smile:

bo5ton your link doesnt work for me

nvm it loaded now, thanks, going to try it :slight_smile:

Going to need some help with the inner glow at step 4 where the image is missing…

Sure. I’ll do this using Photoshop CS5, as that’s what I have.

Select the layer that you want to add an inner glow to (if you don’t know how to do that, it should be in the bottom right of the screen. Look for rectangles or a single rectangle stacked on top of each other or just Google ‘layers panel Photoshop’.)

After that, you’ll want to double click the gray area to the right of it (Not the name or the thumbnail). You’ll get the blending options screen. Alternatively, you can right-click the layer (control+click on the mac) and select blending options.

Look on the left side where all the checkboxes are. There should be an inner glow there. You’ll need to check the box and click ‘inner glow’ text.

If you want the image, I can make it for you if you want.
~TehYoyo

hey tehyoyo i appreciate your help but i know all the basics :slight_smile: I dont know which properties he used inside the inner glow option to achieve that glow effect on the button because the image is missing.

I’m not sure if it’s the same designer or not, there is a cc license attached with this but if I’m not mistaken it’s remarkably similiar! I’ve just had a look at the PSD and it has your glow affect & image that you’re after too, hope this helps you out! :slight_smile:

wow amazing! thanks! :slight_smile:

The only thing that differs is the font.

Both are sans-serif but the original is more upright/straight.

My guess is the deviant art guy just used the tutorial?

~TehYoyo

@Yoyo - I’ve no idea, maybe it’s his own work or the same person? The only way to find out for sure is to contact him, but it seems perhaps ultane is sorted now? :scratch:

Yes im fine now, i dont need the font thought so its not a problem, i only needed the button which is excactly the same as in the guide i was looking for.

Although be very careful of plagiarism…I don’t know if either author claims any rights to the images, but I’d check and make sure.

~TehYoyo