Любые идеи, как скопировать это встроенное выпадающее меню с помощью CSS / JQuery

Question

Мне интересно, знает ли кто-нибудь плагин, который существует для репликации встроенного выпадающего меню / меню, подобного этому. Ключевым моментом является то, что интервал выбранного элемента должен оставаться в формате отправления.

при нажатии на ссылку она должна выступать в качестве выпадающего меню.

Я бы не стал писать это с нуля, если есть что-то похожее.

ПРИМЕЧАНИЕ. Выпадающее значение выбрано, а текст ссылки href заменяется выбранным значением.

Answer 1

Простое маленькое всплывающее окно при нажатии на указанный элемент вместе с заменой текста ссылки. Я предполагаю, что вы захотите сохранить выбранный тип сортировки, поэтому я включил небольшую переменную sortKey в качестве примера, который вы можете использовать. Скрипка для справки: 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;
}

Answer 2

вы можете использовать этот плагин и достичь желаемого с некоторыми изменениями CSS

http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html

, а также это http://pop.seaofclouds.com/

Answer 3

SimpleTip предлагает то, что вы ищете. Посмотрите их демонстрации, особенно ту, которая работает на клике Вы можете легко заставить ваше зрение работать с этим плагином.