Jump to content
Sign in to follow this  
dbuchhorn

Navbar (New Guy)

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

 

 

navSprite.png

 

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 by Day

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...