How to Jump the Menu Multiple Frames With Javascript

You can use JavaScript and HTML to create a drop-down menu that enables visitors to navigate your website or jump to external links. Pages with multiple frames, however, can make site navigation more difficult, since entire websites can end up loading in the current frame, rather than in a new window. But you can use JavaScript to specify whether a menu link loads in the current frame or in a new window or tab.

Instructions

    • 1

      Enter "<form action="../">" and "</form>" in between the "<body>" and "</body>" tags in the page HTML. Exclude the quotes surrounding the "<form>" tags.

    • 2

      Insert "<select name="menu">" and "</select>" in between the "<form>" tags:

      <form action="../">
      <select name="menu">
      </select>
      </form>

    • 3

      Add an "<option>" tag for each destination, and then enter the page URL. Insert the "<option>" tags in between the "<select>" tags; for example:

      <option value="http://my page/">Home</option>
      <option value="http://my page/prev">Archive</option>
      <option value="http://my page/me">About Me</option>
      <option value="mailto:a@my address.com">Email</option>

    • 4

      Insert a "Go" button in between the "</select>" and "</form>" tags:

      </select>
      <button type="button">Go</button>
      </form>

    • 5

      Add the "onclick" attribute to the "<button>" tag. Insert the JavaScript into the "onclick" field; for example:

      <button type="button" onclick="window.open(this.form.menu.options[this.form.menu.selectedIndex].value,'_top')">

    • 6

      Use "_top" to jump out of the frames and load the page in a full window. Use "_blank" to load the page in a new window or tab. Use "_self" to load the link in the current frame; for example:

      onclick="window.open(this.form.menu.options[this.form.menu.selectedIndex].value,'_blank')"

Related Searches:

References

Comments

Related Ads

Featured