SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: dropdown menu

  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown menu

    Hi,
    Some question about a dropdown box (but SEO friendly as can be).

    I styled my dropdown box and get stuck. I just want to make it work in a way that even se spiders can follow the links. Otherwhise how to make it work without a go button. Click on the selected item and page will load in the same browser window.
    Code:
    <td class="MainsubText" style="padding-left: 8px;" height="15"><select name="select2"
     style="width: 150px;" class="ListBoxText" onchange="">
    <option value="#" selected="selected">kies uw inspiratie</option>
     <option value="" class="StyleMainText">&nbsp;&nbsp;item 1 </option>
     <option value="" class="StyleMainText">&nbsp;&nbsp;item 2</option>
     <option value="" class="StyleMainText">&nbsp;&nbsp;item 3</option>
     <option value="" class="StyleMainText">&nbsp;&nbsp;item 4</option>
    </td>
    Hope you can help me out.

    Dancing Mathilde.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want a dropdown which spiders can follow then you'll have to use actual links.

    The best and most light-weight method available is probably "Son of Suckerfish Dropdown"...

    If you are looking to do it with the current markup (<select>&<option>)then spiders will not follow any of the 'links' because ther are not actualy links (<a>).

    If you want to do it with the current markup (which you posted) then you'd have to do it with JS. I would add a Go button so that if the user does not have JS enabled they will be able to use that (you'd have to setup a backend thingy to process that).

    Anyway:

    HTML:

    Code HTML4Strict:
    <select name="select2" style="width: 150px;" class="ListBoxText">
    <option value="http://www.google.com/" selected="selected">kies uw inspiratie</option>
    <option value="http://www.google.com/" class="StyleMainText1">&nbsp;&nbsp;item 1 </option>
    <option value="http://www.google.com/" class="StyleMainText2">&nbsp;&nbsp;item 2</option>
    <option value="http://www.google.com/" class="StyleMainText3">&nbsp;&nbsp;item 3</option>
    <option value="http://www.google.com/" class="StyleMainText4">&nbsp;&nbsp;item 4</option>
    </select>
    <input type="submit" value="Go" id="GoButton" />

    JS (to go above </body>)

    Code JavaScript:
    <script type="text/javascript">
    document.getElementById("GoButton").style.display = 'none';
    var SelectElements = document.getElementsByTagName("SELECT"); 
    for( var i=0; i < SelectElements.length ; i++ ) {
    if(SelectElements[i].className == 'ListBoxText') {
    SelectElements[i].onchange = function() {
    window.location = this.getElementsByTagName("OPTION")[this.selectedIndex].value;
    }
    }
    }
    </script>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi JimmyP,

    Thank you for your reply.

    this one seems not to work with me. I c/p all and included the right url's.

    Can you give one without the go button as well?

    Thanks
    Mathilde

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without the go button: (Although you should really have it for those without JS)::

    Code HTML4Strict:
    <select name="select2" style="width: 150px;" class="ListBoxText">
    <option value="http://www.google.com/" selected="selected">kies uw inspiratie</option>
    <option value="http://www.google.com/" class="StyleMainText1">&nbsp;&nbsp;item 1 </option>
    <option value="http://www.google.com/" class="StyleMainText2">&nbsp;&nbsp;item 2</option>
    <option value="http://www.google.com/" class="StyleMainText3">&nbsp;&nbsp;item 3</option>
    <option value="http://www.google.com/" class="StyleMainText4">&nbsp;&nbsp;item 4</option>
    </select>

    JS:

    Code JavaScript:
    <script type="text/javascript">
    var SelectElements = document.getElementsByTagName("SELECT"); 
    for( var i=0; i < SelectElements.length ; i++ ) {
    if(SelectElements[i].className == 'ListBoxText') {
    SelectElements[i].onchange = function() {
    window.location = this.getElementsByTagName("OPTION")[this.selectedIndex].value;
    }
    }
    }
    </script>

    Make sure you put the script above the </body> tag (END BODY TAG)!! NOT in the <HEAD> section.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JimmyP,

    Thank you for the help + your last remark about the location of the script. I first thought you mistyped /body instead of /head. It is working now.

    Later I will include the button, but for that I have to style it and resize rest and not have time at the moment.

    Thanks again.
    Mathilde


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •