CSS Tutorial 5 – Navigation Bar using only CSS
In this tutorial I show a great method of making a navigation bar with rollover effects using only css. A good navigation bar is one that requires no javascr…
Video Tutorial Rating: 4 / 5
Don’t forget to check out our other video tutorials or share this video with a friend.
0 votes
Loading...20 responses to “CSS Tutorial 5 – Navigation Bar using only CSS”
Leave a Reply
Video Tutorials
Bringing you the best video tutorials for Photoshop, Illustrator, Fireworks, WordPress, CSS and others.
Video tutorial posted 17/06/13
Category: CSS Tutorials
Tags: Navigation, only, Tutorial, Using
Pages
Random Videos
Video Categories
- 3DS Max Tutorials (150)
- After Effects Tutorials (160)
- C# Tutorials (121)
- Colour (6)
- Crazy Effects (1)
- CSS Tutorials (120)
- Dreamweaver Tutorials (139)
- Excel Tutorials (127)
- Featured (10)
- Fireworks Tutorials (131)
- General Effects (9)
- HTML Tutorials (143)
- Illustration and Vector (1)
- Illustrator Tutorials (174)
- IMove Tutorials (119)
- Lightroom Tutorials (145)
- People and Faces (3)
- Photoshop Tutorials (169)
- Text Effects (7)
- Uncategorized (32)
- WordPress Tutorials (140)
Tags
VideoTutorials.co.uk
-
Videotutorials.co.uk offers the web's best Photoshop tutorials, Illustrator video guides, CSS and HTML tutorials and much more all in one place. With new videos being added every day, you can learn how to master software and code to give your images and website some great effects.
Our site has beginner, intermediate and advanced video tutorials of varying lengths so you can learn a new skill at your own speed and level. So whether you're a web designer, print designer or just wanting to edit some family photos, you can get to it quickly and easily using these free video guides. (more)
Thank you, clear and very helpful.
Are you guys really that unwilling to learn this that you have to ask for someone else’s work instead of doing it yourself? Go learn CSS, it’ll be much better for you than just taking bits of other people’s work
google it better tutorial are there with full source code
thanks
This is great, thanks!
crap tutorial my ass…. this is great thanks man
Great tutorial!
Ok, so i’ve finally managed to make it work like this:
background-image:url(navbarcolor.jpg);
Seems to be working just fine, also for the hover-over 😛
Just tried 1000×25 image, doesn’t show up in the navbar either … :S
Was just trying to do this tutorial, but for some reason the pic i made (1x25px) is not showing up in the navbar:
background: url (navbarcolor.jpg) repeat-x;
Dunno if i missed something there … great tutorial though 😀
Hey man, great tutorial, but I have a couple of questions. First, if you wanted the navigation bar to remain in contact with the top, left and right edges of the browser, regardless of zoom level, what in the code you wrote in this video would you change/add? I have managed to do it but I had to use negative margins, which I feel isn’t actually necessary. Secondly, why not use em or % for the font-size,line height, width, height etc.? Thanks in advance.
could you upload your files so we can download them?
what about joining the links?!
awesome tutorial.. watched another one using ul/li and I just cant seem to implement it on my project.. this one is much easier to do with the same effect..
btw how do i center all the buttons so that they wont be all in the left side but in the center of the website? anyone?
thanks man! very helpful! how do i link the banner pictures to my local files instead of a url? i would rather use my home files vs. hosting them.
Yeah, now now nothing is working.
Everything worked up until the .button a{
part in the css doc. When I save and refresh like you did, nothing changes. Grrrrr.
… anyways, kudos for pulling this off without using any Javascript (and thanks again for showing us how to do it) 😀
2:35 I’m using 1280×1024 on a CRT here, and i have a laptop that has a 1024×768 screen. My parents have an iMac that has a screen of something like 1400×960 pixels.
How do i make a web page with a nav.bar look good on all of these?
What does “float:left” do? I’m doing a piece of ICT AS Coursework and I am supposed to have a column on the left side of the page 200 pixels wide (reserved for a vertically orientated text-based navigation bar). It’s working fine atm, but I assumed that since it wants it on the left side of the page that I should use float:left. But it seems that it should not have any float.