Help with css navbar.

[thala]

Can any one guide me to create a navbar like this??

http://i.imgur.com/rqhr9.png

Thanks much.

[amoss]

Got this far. (anyone can jump in to help please)
http://jsfiddle.net/PCCZ8/

[Vermaas]

Might wanna modify my code: http://jsfiddle.net/savver/wXKbc/

[thala]

Thank you guys, can this be achieved with images instead of css?

Like i have all the images for the navbar from the psd!

[paintba11er89]

I’m sure you could apply that look to the image within photoshop, but that would make your image sizes larger, make your page load slower, and lock you into a certain design. There is no positive side to doing it that way. I’d stick with the CSS. Copying and pasting the CSS will literally work after you change it to suit your file names.

[Vermaas]

@paintba11er89: That’s not completely true. Just make sure the image isn’t that big. And when you use images, you’re for sure it will work in every browser. Also IE7-8.

@thala: So if you don’t care about those browsers, take the CSS3 approach I posted, otherwise use the image and make sure the file is really small.

[Paulie_D]

If you use images it probably won’t scale very well though. I’m not saying it couldn’t be done but it might take a lot of work.

I suppose the best option would be to take the image that is ‘behind’ the white box and apply that as a background image of the menu div.

The rest is just styling the ul…no? I’m assuming it’s a single line menu with no dropdowns?

Without access to the PSD it’s hard to help further.

[thala]

Edited!!

[thala]

I appreciate all your help guys.

Here is the psd of the navbar, if any one wished to help further..

https://www.dropbox.com/s/hq756r34oyq4bem/template.psd

Thanks a lot!

[thala]

Still looking for some one to assist me with, thanks.

[Paulie_D]

That link is not to the psd.

[thala]

How? i have removed the header green background from the psd.

https://dl.dropbox.com/s/hq756r34oyq4bem/template.psd?dl=1

It is just the same (Also the green background is also not necessary sir)

[Paulie_D]

The issue is that I can’t download the psd file for some reason.

Frankly, it doesn’t matter. You have received some suggestions about how to achieve what you are after but we’re not going to do the work for you.

Try coding something in Codepen yourself and if you run into issues that you can’t resolve then we can jump in and help.

[thala]

Thanks for the heads up paul.

[thala]

Update: I am done with the navbar!!

http://jsfiddle.net/spiritfly/r97Aa/6/

I am having problem with showing the selected navbar, any help would be great.

Cheers.

[Author]

Posts