[SOLVED] Apple.com : How to do similar navigation?

Ed · #1 Oct 27th, 2007, 17:29

Hi Guys, have had a look at the source and CSS and could not figure out how I could make myself a navigation bar similar to that of http://www.apple.com

This could be the wrong forum, but could someone show me how?

Ed

Marc · #2 Oct 27th, 2007, 17:41

Its probubly because they are using images with a CSS rollover instead of Javascript... Ill try and find you a tutorial.

Marc · #3 Oct 27th, 2007, 17:42

I remember Karinne had a good tutorial but i cant fins it

.... I have found one but it isnt as good. http://www.tutorio.com/tutorial/pure...mage-rollovers.

Ed · #4 Oct 27th, 2007, 17:49

I'm sure this will do me...thanks!

If I have any problems I'll be back.

Ed

Marc · #5 Oct 27th, 2007, 17:49

Like the termanator *Ill be back*

Arnold Schwaz.......

karinne · #6 Oct 27th, 2007, 20:11

This is the tutorial

Fast Rollovers Without Preload

Ed · #7 Oct 27th, 2007, 23:00

Thanks Guys!

A slight Problem tho.. I created this image:

I think it's rather nice, don't you?

Very Applish..lol

Anyway, I used the CSS from the first tutorial (and edited so it should work):

HTML: Select all

.rollover a {
display:block;
width: 181px;
padding:0px 0px 0px 0px;
font: bold 13px sans-serif;;
color:#;
background: url("http://simplifiedimpact.com/images57/rollover.png") 25 25 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 36px;
color: ;
}
.rollover a:active {
background-position: 0 72px;
color: ;
}

and then placed this in my document:

HTML: Select all

<div class="rollover">

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 6</a>
</div>

and I get: http://simplifiedimpact.com/index.html

Why isn't it working?

Ed

(PS: please don't complain about my html, I will be cleaning it up...unless it affects the rollovers)

Daniel · #8 Oct 27th, 2007, 23:16

You don't do it with images

or do you

Ed · #9 Oct 27th, 2007, 23:30

Yes You do! Have a look at the Apple one:

Stuart · #10 Oct 28th, 2007, 01:53

Quote:

Originally Posted by Vivara

Why isn't it working?

The reason is that you are using quotes in the css. Use the image like this:

HTML: Select all

background: url(http://simplifiedimpact.com/images57/rollover.png) 25 25 no-repeat;

That should work...

karinne · #11 Oct 28th, 2007, 01:45

I would rather have 1 image with all 3 states for each menu item as oppose to 1 images for the whole menu.... much less complicated. IMHO

Marc · #12 Oct 28th, 2007, 07:35

Daniel, yes you do it with images!!

I agree with Karinne - 1 image with 3 states. This will help you in the long run if you want to add another button and it is alot less complicated.

Ed · #13 Oct 28th, 2007, 09:45

I've changed it to that:

Here's my CSS:
Note: I am using the rollover class and not the menu one.

http://simplifiedimpact.com/images57/style.css

Just view it, as I'll have to be editing code here and there.

P.S: It's not at the slightest bit long!

P.S.S: Yeah, I know it's much more complicated with one whole image, but that's the only way I could get Myriad Pro, Semibold text with inset!

Thanks,
Ed

Marc · #14 Oct 28th, 2007, 09:53

What do you want us to do? Look at it?

Have you got an example of what you have done so far?

Ed · #15 Oct 28th, 2007, 10:09

No..sorry!

I have come up with my own thing here, it should be working, but it isn't!

My html:

HTML: Select all

<div id="main-nav">
    <ul>
        <li><a href="#" class="logo"><span>logo</span></a></li>
        <li><a href="#" class="home"><span>home</span></a></li>
        <li><a href="#" class="about"><span>about</span></a></li>
        <li><a href="#" class="ourprojects"><span>Our Projects</span></a></li>
    </ul>
</div>

My CSS:

HTML: Select all

#main-nav{
    
    width:905px;
    height:36px;
    margin:0 auto;
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) no-repeat;   


#main-nav ul{
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    clear: left;
}

#main-nav ul li{
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

#main-nav ul li a span{
    display:none;
}


#main-nav ul li a{
    width:100px;
    height:50px;
    margin:0px;
    padding:0px;
    display: block;
        
}

/* -- Hovers -- */


#main-nav ul li a.logo:hover{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) 0px 0px;
}

#main-nav ul li a.home:hover{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) -72px -362px;
}

#main-nav ul li a.about:hover{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) -72px -543px;
}
#main-nav ul li a.ourprojects:hover{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) -200px -724px;
}            

/* -- Actives -- */

#main-nav ul li a.logo:active{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) 0px -50px;
}

#main-nav ul li a.home:active{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) 0px -50px;
}

#main-nav ul li a.about:active{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) -100px -50px;
}
#main-nav ul li a.ourprojects:active{
    background-image: url(http://simplifiedimpact.com/images57/rollover.png) -200px -50px;
}

My image:

My page:
http://simplifiedimpact.com/testmenu.html

Does anyone know why the image: (above) isn't displaying?

Thanks,
Ed

dab42pat · #16 Oct 28th, 2007, 10:30

HTML: Select all

#main-nav{
    width:400px;
    height:50px;
    margin:0 auto;
    background:#acacac url(http://simplifiedimpact.com/images57/rollover.png) no-repeat;                 
}

shouldn't it be

HTML: Select all

background-image: url(http://simplifiedimpact.com/images57/rollover.png) no-repeat;

Ed · #17 Oct 28th, 2007, 11:00

I have changed it, but to no avail!
Redirected index.html to a sorry page so use this when you want to view:

http://simplifiedimpact.com/testmenu.html

Ed

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Apple.com : How to do similar navigation?