Correlation between bottom links and top nav bar

Posted on 2005-04-29
Last Modified: 2010-04-09
Is there anyway to have the top navigation bar correlate with the bottom navigation links.  (for example:)  If i click "home" on the bottom links "home" on the top navigation bar will appear selected.

You can see my site at
Question by:bjv211
    1 Comment
    LVL 15

    Accepted Solution

    Hi you could try this for your bottom frame source

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head><title>Untitled Document</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="bottomnav_data/trapped.css" rel="stylesheet" type="text/css"></head>

    <p align="center">
          <a class="smallink" href="" onclick="top.topFrame.MM_nbGroup('down','group1','Home','images/homedown.png',1)" target="mainFrame">Home</a> &nbsp;|&nbsp;
          <a class="smallink" href="" onclick="top.topFrame.MM_nbGroup('down','group1','nycfun','images/nycdown.png',1)" target="mainFrame">NYC Fun</a> &nbsp;|&nbsp;
          <a class="smallink" href="" onclick="top.topFrame.MM_nbGroup('down','group1','Pics','images/picsdown.png',1)" target="mainFrame">Pics</a> &nbsp;|&nbsp;
          <a class="smallink" href="" onclick="top.topFrame.MM_nbGroup('down','group1','Xbox','images/xboxdown.png',1)" target="mainFrame">Xbox</a> &nbsp;|&nbsp;
          <a class="smallink" href="" target="mainFrame">Contact Me</a>

    basically it is the same except that the same onclick events used in your top frame have been added to the bottom one... the difference being that each onclick in the bottom frame now has top.topFrame at the beginning which tells the javascript to look for the MM_nbGroup function in the top frames javascript



    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now