Working Example Of A Jquery Jump Menu

This is a working example of a jquery jump menu, the Jquery works by detecting if the option was changed, if it was changed then we add an action to the form, we create a var with the value from the option selected, the action we created is given the value of the var url and the form is submited on change.

Hope this helps you, please leave comments below on how to improve this or just to say Hi

Result

  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <title>Jquery Jump Menu</title>
  </head>
  <body>
  <form id="jump" method="get" target="_blank" >
  <select id="url">
  <option value = "">--Please Choose--</option>
  <option value = "http://www.bettawebdesigners.co.uk">Betta</option>
  <option value = "http://www.html5imageeditor.co.uk">HTML5 Image Editor</option>
  <option value = "http://www.html5imageeditor.co.uk/texteditor2">Ajax Text Editor</option>
  </select>
  </form>
  <script type="text/javascript">
  $('#url').change(function() {
  var url = $("#url").val();
  if(url !="") 
  { 
  $("#jump").attr("action", url);
  $("#jump").submit();
  }
  });
  </script>
  </body>
  </html>

Available For Freelance:

I Am Available To Work For You Freelance, See My Skills To See If I Can Help Your Project, If I Can Help You Then Please Contact Me.

My Rates Start From £180 A Day, Discount Prices For Regular Clients And Work Over 3 Days.

I Started To Learn Web Development In 2008, I Did A Few Open University Courses While Working Full Time In The Building Trade, I Managed To Get A Diploma With Distinction

Request A Tutorial

If You Are Having Difficulty With The Development Of Your Website Or If You Are Just Starting Out Leaning Web Development And You Think I Can Help You Then Request A Tutorial, I Will Do My Best To Help You

I Dont Charge For My Services If I Can Help You With Something That Can Be Be Fixed In A Few Minutes.

Advertise

If You Would Like To Advertise On This Site Then Please Contact Me, You Will Be Given Login Details To See What Day And Where Clicks Have Come From.

Prices Start From £10 A Month With Discounts Available For 3 Months Or More.

You Can Either Send Me The Banner Advert That You Have Designed Or From £10 I Can Have Designer Design A Banner For You.

Please Leave A Comment And A Rating





image

Chris Gave This Code Rating

This is a simple jquery jump menu i wrote in just a few moment it works by using Jquery to detect when the select option value changes and then adding the URL Value to the form action and then submit

image

prashant Gave This Code Rating

can i make some link to open in parent window and some links in new window from same jump menu

image

Chris Gave This Code Rating

Hi prashant yes you can remove the target from the form tag then you can give each option a attribute of data-target of _blank or self then on change add that target to the form i will email it you

image

Ross Gave This Code Rating

Hi I was wondering if there was an easy way to have multiple jump menus in one page, i have tried but only one menu from 5 works the others lie dormant

image

Ross Gave This Code Rating

Hi Chris, is there anyway to get this to work with multiple jump menus on one page?

image

Ross Gave This Code Rating

Is there a way of habing multiple jump menus on one page?

image

Ross Gave This Code Rating

Is there any reason why this shouldn't work on Iphone or mobile browsers?

image

haroon Gave This Code Rating

dfs

www.codecaven.co.uk image 5.00 out of 5 based on 8 ratings. 8 user reviews.

My Skills:

  • PHP 5
  • JavaScript
  • Jquery
  • XHTML Validation
  • KineticJS
  • HTML5
  • CSS - CSS3
  • SEO

My Social Networks:

  • facebook youtube