任何想法如何複製這個內聯下拉菜單使用css/jquery

我想知道是否有人知道插件，存在複製一個這樣的內聯下拉菜單/菜單。要注意的關鍵是，所選元素的間距應保持不變。任何想法如何複製這個內聯下拉菜單使用css/jquery

enter image description here

點擊鏈接時，它應該作爲一個下拉菜單.. enter image description here

我不想從頭開始，如果有什麼在那裏類似寫這個。

注意：選擇下拉值並將href鏈接文本替換爲所選值。

2011-11-19 Kevin Jensen

簡單的小彈出上點擊指定元素文本。我假設你想存儲選定的排序類型，所以我包含一個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; 
}

來源

2011-11-19 07:05:21 Jesse

正是我所需要的......我會把它包裹到一個插件中。謝謝@ jesse –

SimpleTip提供您正在尋找的東西。查看他們的演示，特別是可以在onclick上使用的演示。你可以很容易地使你的視覺工作與這個插件。

來源

2011-11-19 05:38:17 Purag

不完全是我在找什麼。我不需要懸停功能。用戶需要能夠點擊href。然後將顯示下拉菜單並允許他們選擇一條記錄。然後href值將切換到所選的記錄。 –

@KevinJensen：你說你想要一個簡單的插件......我的意思是，你可以很容易地添加鏈接，改變列表的順序或任何類型到這個工具提示，不是嗎？懸停功能只是一個附加的事情，但除此之外，這個插件的伎倆。或者你可以自己寫 - 找到鼠標位置並放置一個div並不難，或者更具體地說，在你想要做的'a'標籤的下面或旁邊。 – Purag

是的，我可以破解這個插件，並讓它起到我需要的下拉菜單的作用，但我期待着看看有人在這樣做之前是否已經解決了我的使用案例。 –

你可以使用這個插件，實現你想要什麼有一些CSS與更換鏈接一起改變

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

而且這個http://pop.seaofclouds.com/

來源

2011-11-19 05:54:25 Kishore