Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Dual Navigation

Discussion in 'Website Design Forum:' started by Timmo, Feb 8, 2010.

  1. Timmo

    Timmo Member

  2. Levi

    Levi Moderator Staff Member

    well your link needs to work first
     
  3. Timmo

    Timmo Member

    Changed.
     
  4. Levi

    Levi Moderator Staff Member

    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.
     
  5. Timmo

    Timmo Member

    Nope still not working properly.
     
  6. Levi

    Levi Moderator Staff Member

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

    glenwheeler Senior Member

    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.
     
  8. Timmo

    Timmo Member

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

Share This Page