Skip to content

Instantly share code, notes, and snippets.

@jdevalk
Created February 26, 2012 19:58
Show Gist options
  • Save jdevalk/1918689 to your computer and use it in GitHub Desktop.
Save jdevalk/1918689 to your computer and use it in GitHub Desktop.
Turn a spiderable list of links into a dropdown + a go button with jQuery
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// Inspiration partly from: http://stackoverflow.com/questions/1897129
jQuery(document).ready(function($) {
$('ul.dropdown').each(function(){
var list = $(this);
var select = $(document.createElement('select'))
.attr('id',$(this).attr('id'))
.insertBefore($(this).hide());
$('>li a', this).each( function(){
option = $( document.createElement('option') )
.appendTo(select)
.val(this.href)
.html( $(this).html() );
});
list.remove();
$(document.createElement('button'))
.attr('onclick','window.location.href=jQuery(\'#'+$(this).attr('id')+'\').val();')
.html('Go')
.insertAfter(select);
});
});
</script>
</head>
<body>
<!-- This is the list of links we want to show in the source and we'd love for search engine to spider. -->
<ul class="dropdown" id="dropdown1">
<li><a href="http://yoast.com">Yoast in English</a></li>
<li><a href="http://yoast.com/wordpress/">WordPress plugins</a></li>
</ul>
<br/>
<br/>
<ul class="dropdown" id="dropdown2">
<li><a href="http://yoast.nl">Yoast in Dutch</a></li>
<li><a href="http://yoast.nl/wordpress/">WordPress plugins</a></li>
</ul>
</body>
</html>
@jdevalk
Copy link
Author

jdevalk commented Feb 26, 2012

Creates a dropdown from each ul with class dropdown, while preserving the ID, adding a "Go" button after it that makes the user actually go there. Great for cases where you need a dropdown in the design but would like the links followed by search engines.

Created with some help from this article: http://stackoverflow.com/questions/1897129

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment