dbuchhorn Posted December 3, 2013 Share Posted December 3, 2013 Hello everyone, Im currently in the process of learning html/CSS and starting to work on a webpage for my business. with my knowledge I have only been able to create a very basic navigation bar that looks like this. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Dbuchhorn</title><style> .nav { list-style-type: none; margin: 0 auto; padding: 2px 0; overflow: hidden; width: 1000px; border-top: 3px solid black; border-bottom: 3px solid black; } .nav li { float: left; width: 20%; } .nav li a { display: block; text-align: center; text-decoration: none; color: black; border-right: 3px solid black; font-family: sans-serif; font-weight: bold; } .nav li:last-child a { border-right: none; } .nav li a:hover { background-color: blue; color: white; }</style></head><body><ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Media</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li></ul></body></html> I would like to have a far more visually appealing navigation bar similar to the one apple has. http://www.apple.com/ How did they do it? I am able to create the design in photoshop. Just need some info on how to implement it into my webpage. Do I make the hover effect display another image? Obviously I will not make my navbar identical. Any advice would be greatly appreciated. Link to comment Share on other sites More sharing options...
MarkT Posted December 10, 2013 Share Posted December 10, 2013 Can you upload a picture of what your current code looks like, then I'll be able to tell you what code you need to add. Link to comment Share on other sites More sharing options...
Day Posted December 21, 2013 Share Posted December 21, 2013 (edited) I haven't bothered to look at apple's nav bar code, but there are multiples options when it comes to making aesthetic nav. Assuming your customer's demographic isn't using old browsers, you could get creative with CSS3 gradient, border-radius, shadow, and other properties. Or if you already have a design in Photoshop, an easier solution would be image sprites. what you'll want to do is make one image that contains your static and hover/focus states. As well as an active state if you plan on having one, which apple does. Here is an example made in photoshop: In this example, each section is 40px high, so you would set your links to 40px high. I liked to do this using the line-height property. Then you set the sprite as the background for your links. It would only show the top 40px as your link is only 40px high. Then you just use the background-position property to change which part of the background is showing on :hover and :active. Here is an example using your code with some changes: http://www.ryangoree.com/menuHelp/ and here is the code: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Dbuchhorn</title><style> .nav { list-style-type: none; margin: 0 auto; overflow: hidden; width: 750px; /* added */ border-radius: 5px; padding: 0; /**/ } .nav li { float: left; } .nav li a { display: block; text-align: center; text-decoration: none; color: white; font-family: sans-serif; /* added */ background: url('media/navSprite.png'); font-size: 14px; text-shadow: 1px 1px #000; line-height: 40px; width: 150px; /**/ } .nav li a:hover, .nav li a:focus { /* added focus psuedo so the affect occurs when using a keyboard only has well */ background-color: blue; color: white; /* added */ background-position: 0 -40px; } .nav li a:active { background-position: 0 -80px; }</style></head><body><ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Media</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li></ul></body></html> I hope this helps... Your more than welcome to use this code if you'd like. Just replace the image with your own. Ryan Edited August 3, 2014 by Day Link to comment Share on other sites More sharing options...
Day Posted December 21, 2013 Share Posted December 21, 2013 Meant to also explain that whenever using images for backgrounds, I would use sprites. Which is just one image with all states included. Using separate images will sometimes result in a split second where your element has no background when you hover over it for the first time because it has to load the separate image at the time that you hover over it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now