如何將其中一個鏈接轉換爲下拉菜單？

我目前正在製作一個使用Tumblr主題的網站。我想讓我的其中一個鏈接（商品）打開不同選項的下拉菜單。有沒有辦法做到這一點，而無需將整個導航切換到li元素？我可以一直這樣做，我不知道如何在不破壞整個主題的情況下做到這一點。在此先感謝。如何將其中一個鏈接轉換爲下拉菜單？

#pages { 
 
    float: right; 
 
} 
 
#pages a { 
 
    float: right; 
 
    color: black; 
 
    margin: 22px; 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    font-size: 10px; 
 
} 
 
#pages a:hover { 
 
    color: #d95e40; 
 
}

<div id="pages" class="desktop"> 
 
    <a href="/contact" title="Contact"><h2 class="page">Contact</h2></a> 
 
    <a href="http://ryanblack.net" target="_blank"><h2 class="page">Merchandise</h2></a> 
 
    <a href="/videos" title="Videos"><h2 class="page">Videos</h2></a> 
 
    <a href="/lyrics" title="Lyrics"><h2 class="page">Lyrics</h2></a> 
 
    <a href="/releases" title="Releases"><h2 class="page">Releases</h2></a> 
 
    <a href="/shows" title="Shows"><h2 class="page">Shows</h2></a> 
 
</div>

來源

2016-08-11 swornxin

有一個非常有用的網站，取得了一個插件只有在這種情況 http://labs.abeautifulsite.net/jquery-dropdown/

在那裏你會看到選項的下拉列表添加到<a>標籤。

<a href="#" data-jq-dropdown="#jq-dropdown-1">Merchandise</a>

然後，您的實際下拉列表將駐留在jq-dropdown-1 div中。或者任何你想要命名的東西。

<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip"> 
<ul class="jq-dropdown-menu"> 
    <li><a href="#1">Item 1</a></li> 
    <li><a href="#2">Item 2</a></li> 
    <li><a href="#3">Item 3</a></li> 
    <li class="jq-dropdown-divider"></li> 
    <li><a href="#4">Item 4</a></li> 
    <li><a href="#5">Item 5</a></li> 
    <li><a href="#5">Item 6</a></li> 
</ul>

插件沒有休息，給你一個簡單的解決方案，以<a>標籤的下拉列表中後只需連接到所需的腳本

<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" /> 
<script type="text/javascript" src="jquery.dropdown.js"></script>

可在GitHub的頁面在這裏找到> >https://github.com/claviska/jquery-dropdown

來源

2016-08-11 14:30:49 itzJustKranker

如何將其中一個鏈接轉換爲下拉菜單？

回答

相關問題