Question

我目前正在使用Tumblr主题制作网站。我想要一个我的链接（商品）打开一个下拉菜单，用于不同的选项。有没有办法在不将整个导航切换到li元素的情况下执行此操作？我之后可以把它打造成风格，我根本不知道如何在不破坏整个主题的情况下做到这一点。提前谢谢。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是一个有用的网站，它已经为这种情况制作了一个插件 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页面上找到＆gt;＆gt; https://github.com/claviska/jquery-dropdown

如何将其中一个链接转换为下拉菜单？

1 个答案: