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

[Ed]

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]

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

[Marc]

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]

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

If I have any problems I'll be back.

Ed

[Marc]

Like the termanator *Ill be back* Arnold Schwaz.......

[karinne]

This is the tutorial

Fast Rollovers Without Preload

[Ed]

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]

You don't do it with images or do you

[Ed]

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

[Stuart]

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]

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]

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]

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]

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

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

[Ed]

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]

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]

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

[Marc]

I dont really understand the way you are doing it. Why dont you try and make an image for each button individually? It might be easier in the long run..

[Ed]

I know, but I can't use the font Myriad Pro, with an inset like I want to.

This may explain it: http://9rules.com/apple/notes/4422/

Because, I only barely understand it, and what I'm doing should be working.

Ed

[Ed]

and this: http://dragan.yourtree.org/blog/en/2...rollover-menu/