带有缩略图图像的 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 库。