jquery - 带有缩略图的 Jquery 下拉菜单

Question

如何制作或任何可用的插件，如此类下拉菜单http://www.vivantabytaj.com（下拉菜单内的小图像）

Answer 1

它实际上只是 CSS，如果你愿意，你可以使用 jQuery，但你的大部分请求都可以由 CSS 处理。您可能想要使用 jQuery 的唯一一件事是动画效果。

所以我会做这样的事情：

HTML：

<div class="nav">
   <ul>
      <li><a href="#">some link</a>
          <ul>
              <li>
                 <img arc="someimage.jpg" />
                 <p>some text you want to display</p>
              </ul>
          </ul>
      </li>
   </ul>
</div>

CSS：

.nav ul ul { display: none; }
.nav img { float: left; }
.nav p { float: right; }

jQuery

$(".nav li").on("click", function(){
   $( this ).children("ul").slideToggle(500);
});

您可能还想通过定义图像宽度或高度或两者来限制图像大小，但这将是一个很好的起点。还要确保包含 jQuery 库。

Answer 2

@Tom Bird第二级ul标签的sintax有错误。（应该是评论）。

你也可以使用这个插件来自动化这个：Hover Flow Plugin

它非常易于使用。您只需向主 ul 标记添加一些类即可触发插件。阅读文档。