Skip to content

Instantly share code, notes, and snippets.

@marco-s

marco-s/gist:2151833

Forked from jdevalk/gist:1918689
Created March 21, 2012 19:37
Show Gist options
  • Save marco-s/2151833 to your computer and use it in GitHub Desktop.
Save marco-s/2151833 to your computer and use it in GitHub Desktop.
Download ZIP
Turn a spiderable list of links into a dropdown + a go button with jQuery
Raw
gistfile1.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment