Any ideas how to replicate this inline dropdown menu using css/jquery


Tags: jquery,css,menu,drop-down-menu

Problem :

I'm wondering if anyone knows of a plugin that exists to replicate an in-line dropdown/menu like this. The key to note is that the spacing of the selected element should remain in sentance format.

enter image description here

when clicking the link, it should act as a drop-down menu.. enter image description here

I'd rather not write this from scratch if there is something out there similar.

NOTE: The dropdown value is selected and the href link text is replaced with the selected value.



Solution :

Simple little pop up on click for the specified element along with replacing the link text. I'm assuming you would want to store the selected sort type so I included a little sortKey variable as an example that you could use. Fiddle for reference: http://jsfiddle.net/GKwn3/2/

<div id="somecontent">Sort leads by <span id="sort" href="#">date created</span> displaying first name....</div>
<div id="pop">
    <div class="link" data-sort="first" >First Name</div>
    <div class="link" data-sort="last">Last Name</div>
    <div class="link" data-sort="company">Company</div>
    <div class="link" data-sort="rating">Rating</div>
    <div class="link" data-sort="created">Date Created</div>
    <div class="link" data-sort="updated">Date Updated</div>
</div>

var $menu = $('#pop');

$('#sort').click(function(e) {
    $menu.css({
        "left": e.offsetX + "px",
        "top": e.offSetY + "px"
    }).show();
});

$('#pop .link').click(function(e) {
    var ele = $(this);
    var sortKey = ele.attr('data-sort'); // save it somewhere
    $('#sort').html(ele.html().toLowerCase());

    $menu.hide();
});

#sort{
 color: blue;
 border-bottom: 1px dotted blue;  
}

#pop{
 color: #444;   
 width: 95px;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
}

.link:hover {
 color: red;
 cursor: pointer;
}

    CSS Howto..

    The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

    How do I make everything on this page centered and fully responsive for all browsers?

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    How to inherit from ancestor and not parent in CSS?

    How to use CSS in ASP.NET application

    How do you tell which css class to modify?[Example inside]

    How to load CSS on SSL pages?

    How dynamically aligning text on website

    How to properly use CSS in GWTP?

    How does one change the colour of a div based on current time?

    How to set a different main content background for each page in weebly?

    How to use a variable in my href path in html

    How to tell the code to choose between two variables and make them equal?

    How do I mask a region of the page in a responsive design using CSS?

    Bootstrap shows black rectangles when printing focused input elements

    how to diplay two html elements seemlessly

    How to make a File Sharing website [closed]

    How to do like this list using
  • and CSS?
  • Angular show / hide with animation

    How to style html element directly (inline)?

    How to Decrease Image Brightness in CSS

    CSS: How to set procentual width using display:flex?

    How to link to a “tab” on my website

    How to customize CSS depending on (tinier) window size?

    How to get CSS background images to show up in HTML files opened by Word?

    Jquery - 100% width slideshow whilst keeping the height propotional

    BackboneJS + HandlebarsJS - how to add image based on css

    How do I use Parent page to get attributes for wp_nav_menu buttons?

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    jQuery + CSS: How to scroll smooth, regarding a fixed header?