• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Dual Navigation


Levi

Moderator
Staff member
#4
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="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]"><span>Renaissance</span></a>    <ul>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Brunelleschi</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Alberti</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Palladio</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Michelangelo</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Bramante</a></li>    </ul></li>    <li id="liArtNouveau" class="off"><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]"><span>Art Nouveau</span></a>    <ul>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Mackintosh</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Guimard</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Horta</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">van de Velde</a></li>    </ul></li>    <li id="liModern" class="on"><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]"><span>Modern</span></a>    <ul>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Sullivan</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Le Corbusier</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Mies</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Gropius</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Yamasaki</a></li>    </ul></li>    <li id="liPostModern" class="off"><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]"><span>Postmodern</span></a>    <ul>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Venturi</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Eisenman</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Stern</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Graves</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Gehry</a></li>    </ul></li>    <li id="liDigital" class="off"><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]"><span>Digital</span></a>    <ul>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Xenakis</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Lynn</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Diller+Scofidio</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">Zellner</a></li>        <li><a href="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/hybrid-4.html#"]#[/URL]">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="[URL="http://www.designforums.co.uk/view-source:http://www.alistapart.com/d/hybrid/ieHover.js"]ieHover.js[/URL]"></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.
 

glenwheeler

Senior Member
#7
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.