Creating a drop-down box with links

Discussion in 'Web Design and Development' started by SamJ, Jan 21, 2009.

Most Liked Posts
  1. SamJ, Jan 21, 2009

    SamJ macrumors member

    Joined:
    Mar 10, 2006
    #1
    Hi,

    I'm quite new to creating websites, having learnt only xhtml and css.

    I'm currently building an online design portfolio in my spare time. I'm using a standard html drop-down box to navigate between the pages. I've successfully managed to code the drop-down box using the <select> tag and some JavaScript. Unfortunately, I cannot get it to display the name of the selected page when clicked. For example, If I am on the homepage and click the 'about me' link in the drop-down box, when the 'about me' page loads, the home page drop-down link is shown, not the 'about me' link. I assume this is due to Home page being the first <option> object in the list.

    Is there any way to show the current page title in the drop down box rather than the first <option> object?

    Also, how would I go about adding a scroll bar so that when the drop-down box is clicked, a scrollable window would appear allowing me to look at various options? I can produce a drop-down box of all options, but without the vertical scroll.

    Thanks :)
     
    share
    + Quote Reply
  2. angelwatt, Jan 21, 2009

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    To have it scroll, set the size of the drop menu to something smaller than the amount of items. Below you can see an example, plus some JavaScript after it to set the value to something. I'll mention that using a drop box as your navigation is a crappy way of doing it. Why? Because people who generally leave JavaScript disabled (like me) won't be able to navigate your web site. Also, search engines won't be able to navigate your pages either, meaning your site won't be indexed and people won't find your web site very easily. You can use CSS to create a drop menu effect without using the select tag, and it would make it completely accessible.

    HTML:
    <select id="menudrop" size="3">
  <option value="item-1">Item 1</option>
  <option value="item-2">Item 2</option>
  <option value="item-3">Item 3</option>
  <option value="item-4">Item 4</option>
  <option value="item-5">Item 5</option>
  <option value="item-6">Item 6</option>
</select>
    PHP:
    // JavaScript for setting the value in a drop box
    function SetDropMenu(idx)
    {
          document.getElementById('menudrop').value = idx;
    }
    SetDropMenu('item-3');
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page