50737

making movable menu items in html

Question:

Making movable menu items in html, I have four menu items arranged in right corner of my site vertically one below the other like

Home Services Contact About

Now i need On click of second element(services) the second element has come to top and first element(home) has to push down, similarly click on third element has to come to top and first has to push down . Any help and any reference links Thanks ?

Answer1:

Here is how you could have the options jump straight to the top when you click them:

<pre class="snippet-code-js lang-js prettyprint-override">$(function() { $('#menu').on('click', 'li', function(event) { $(event.target).prependTo('#menu'); }); }); <pre class="snippet-code-css lang-css prettyprint-override">ul { padding: 0; } li { display: block; list-style-type: none; height: 30px; line-height: 30px; color: darkblue; font-family: sans-serif; background-color: #ddd; padding-left: 10px; margin: 5px 10px; cursor: pointer; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu"> <li>Home</li> <li>Services</li> <li>Contact</li> <li>About</li> </ul>

<a href="http://jsfiddle.net/a8fm184n/" rel="nofollow">jsFiddle link</a>

Recommend

  • moving an object without actually touching the object
  • Does using package generics require the package to be in Depends or Imports?
  • Obtain access token for both Microsoft Graph and individual service API endpoints (Outlook REST APIs
  • Constant embedded for loop condition optimization in C++ with gcc
  • How to make a div appear under button
  • Singular Value Decomposition Implementation
  • Implementing “Add to Home Screen”, ala Safari
  • Why was the Profile provider not built into Web Apps?
  • QObject::findChild() returns None without obvious reason
  • Enterprise Architect - Cancel Connectors Bridges
  • Microsoft Chart Controls for Microsoft .NET Framework 4.0
  • Is mp4 stream able with ffserver?
  • Python/Javascript: WYSIWYG html editor - Handle large documents fast and/or design theory
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • IE10 strips out hashtag from the URL
  • C++ friend class std::vector
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • SyntaxError: (irb):26: both block arg and actual block given
  • Why the SequenceFile is truncated?
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • d3 v4 drag and drop with TypeScript
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • JQuery Internet Explorer and ajaxstop
  • Atlas images wrong size on iPad iOS 9
  • Using jQuery closest() method with class selector
  • Deleting and Updating values from a cusrsor adapter
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • Modifying destination and filename of gulp-svg-sprite
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Jquery - Jquery Wysiwyg return html as a string
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Linking SubReports Without LinkChild/LinkMaster
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?