Design Forums - Graphic Design & Web Design Forums

Timmo · 04:30 PM

I've decided to redesign one of my websites, as it looks dated now and I am trying to implement a dual navigation bar and I am struggling quite a bit with it. I would like it to look similar to this:http://www.alistapart.com/d/hybrid/hybrid-4.html (http://www.alistapart.com/articles/hybrid/)

Would anyone be able to help me install it onto my site please?

Cheers
Timmo

Levi · Post 2 Posted 08-02-10

well your link needs to work first

Timmo · Post 3 Posted 08-02-10

Changed.

Levi · 04:47 PM

This should work although I haven't tested it...
stick this in your css file

Code:

    #divNav {
        background: transparent url(bk-nav.jpg) no-repeat top left;
        margin: 0;
        padding: 0;
        height: 80px;
        width: 800px;
    }

    #nav {
        position: relative;
        top: 55px;
        height: 80px;
        width: 800px;
    }

    #nav li ul, #nav li ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: left;
        display: block;
        padding-right: 15px;
    }

    #nav li ul {
        display: none;
    }

    #nav li.off ul, #nav li.on ul  { /*put the subnav below*/
        position: absolute;
        top: 25px;
        left: 0;
        padding-top: 15px;
        background: #224d6f;
        height: 28px;
        width: 740px;
        padding-left: 60px;
    }

    #nav li.on ul {
        background: #f90;
    }

    #nav li.on:hover ul, #nav li.over ul { /*for ie*/
        background: #224d6f;
    }

    #nav li a {
        color: #224d6f;
        font-weight: bold;
        display: block;
        width: 93px;
        padding: 0;
    }

    #nav li.on a {
        color: #f90;
    }

    #nav li.on ul a, #nav li.off ul a {
        border: 0;
        float: left; /*ie doesn't inherit the float*/
        color: #f90;
        width: auto;
        margin-right: 15px;
    }

    #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
        background: #224d6f;
    }

    #nav li.on ul {
        display: block;
    }

    #nav li.off:hover ul, #nav li.over ul {
        display: block;
        z-index: 6000;
    }

    #nav li.off a:hover, #nav li.on a:hover { 
        color: #f90;
    }

    /*do the image replacement*/

    #nav li span {
        position: absolute;
        left: -9384px;
    }

    #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
        display: block;
        position: relative;
        height: 26px;
        background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
    }

/*first, put the initial states in place*/

#liRenaissance a {
    background-position: 0 0;
}

#liArtNouveau a {
    background-position: -102px 0;
}

#liModern a {
    background-position: -204px 0;
}

#liPostModern a {
    background-position: -306px 0;
}

#liDigital a {
    background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liModern.on a {
     background-position: -204px -37px;
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
    background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
    background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
    background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
    background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
    background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
    display: block;
    background: #224d6f;
    color: #fff;
    font-family: arial, verdana, sans-serif;
    font-size: small;
}        

#nav li.on ul a {
    background: #f90;
}

and then stick the below in the <body> part of the html

Code:

<div id="divNav">
    <ul id="nav">
    <li id="liRenaissance" class="off"><a href="#"><span>Renaissance</span></a>
    <ul>
        <li><a href="#">Brunelleschi</a></li>
        <li><a href="#">Alberti</a></li>
        <li><a href="#">Palladio</a></li>
        <li><a href="#">Michelangelo</a></li>
        <li><a href="#">Bramante</a></li>
    </ul></li>
    <li id="liArtNouveau" class="off"><a href="#"><span>Art Nouveau</span></a>
    <ul>
        <li><a href="#">Mackintosh</a></li>
        <li><a href="#">Guimard</a></li>
        <li><a href="#">Horta</a></li>
        <li><a href="#">van de Velde</a></li>
    </ul></li>
    <li id="liModern" class="on"><a href="#"><span>Modern</span></a>
    <ul>
        <li><a href="#">Sullivan</a></li>
        <li><a href="#">Le Corbusier</a></li>
        <li><a href="#">Mies</a></li>
        <li><a href="#">Gropius</a></li>
        <li><a href="#">Yamasaki</a></li>
    </ul></li>
    <li id="liPostModern" class="off"><a href="#"><span>Postmodern</span></a>
    <ul>
        <li><a href="#">Venturi</a></li>
        <li><a href="#">Eisenman</a></li>
        <li><a href="#">Stern</a></li>
        <li><a href="#">Graves</a></li>
        <li><a href="#">Gehry</a></li>
    </ul></li>
    <li id="liDigital" class="off"><a href="#"><span>Digital</span></a>
    <ul>
        <li><a href="#">Xenakis</a></li>
        <li><a href="#">Lynn</a></li>
        <li><a href="#">Diller+Scofidio</a></li>
        <li><a href="#">Zellner</a></li>
        <li><a href="#">Hadid</a></li>
    </ul></li>
</ul></div>

changing any hrefs, image files and css positions etc to suit your requirements

You may also need to add the following into the <head> section of the html

Code:

<script language="JavaScript" src="ieHover.js"></script>

but I can't find the script anywhere

I'm a bit surprised you couldn't understand the html file as that was all taken from it and is relatively clear to understand especially considering you offer web design services.

Timmo · Post 5 Posted 08-02-10

Nope still not working properly.

Levi · Post 6 Posted 08-02-10

it does with me, all I've done is added in image files like I said.

glenwheeler · Post 7 Posted 08-02-10

Timmo, i've just looked at Levi's stuff and seems pretty much perfecto..show us what you have at the moment with the info Levi has given you.

Timmo · Post 8 Posted 09-02-10

Cheers for the help guys I was just being thick. Got it all sorted now, wasn't looking at the obvious.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Levi Isn't that lovely? 2,332 Posts Norfolk	well your link needs to work first Image Resolutions - It's in need of an update which is currently in progress >>>>
	Post 2 Posted 08-02-10

Timmo Senior Member 154 Posts Forest of Dean	Changed. FOD Design - Web and Graphic Design Web: www.foddesign.co.uk Email: enquiries@foddesign.co.uk
	Post 3 Posted 08-02-10

Timmo Senior Member 154 Posts Forest of Dean	Nope still not working properly. FOD Design - Web and Graphic Design Web: www.foddesign.co.uk Email: enquiries@foddesign.co.uk
	Post 5 Posted 08-02-10

Levi Isn't that lovely? 2,332 Posts Norfolk	it does with me, all I've done is added in image files like I said. Image Resolutions - It's in need of an update which is currently in progress >>>>
	Post 6 Posted 08-02-10

glenwheeler Mclaren Mercedes 2,310 Posts North East, UK	Timmo, i've just looked at Levi's stuff and seems pretty much perfecto..show us what you have at the moment with the info Levi has given you. Mr Glen A Wheeler http://www.glenwheeler.co.uk
	Post 7 Posted 08-02-10

Timmo Senior Member 154 Posts Forest of Dean	Cheers for the help guys I was just being thick. Got it all sorted now, wasn't looking at the obvious. FOD Design - Web and Graphic Design Web: www.foddesign.co.uk Email: enquiries@foddesign.co.uk
	Post 8 Posted 09-02-10

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Design Forums - Graphic Design & Web Design Forums

Dual Navigation