dropdown menu

**dancing-mathilde** · Apr 17, 2008 11:13

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.

**JimmyP** · Apr 17, 2008 12:01

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>

**dancing-mathilde** · Apr 17, 2008 23:31

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

**JimmyP** · Apr 18, 2008 00:19

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.

**dancing-mathilde** · Apr 18, 2008 02:13

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

User Tag List

Thread: dropdown menu

Thread Tools

Display

dropdown menu

Bookmarks

Bookmarks

Posting Permissions