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 sintax在第二级ul标签上有一个错误。（应该是评论）。

您也可以使用此插件自动执行此操作：Hover Flow Plugin

它非常易于使用。您只需要在main ul标记中添加一些类来触发插件。阅读文档。

带有缩略图Image的Jquery下拉菜单

2 个答案: