Question

我正在创建一个网站（Boys and Bunting），我的顶部有一个横向导航，其中包含彼此相邻的图像。

我希望“商店”按钮显示下拉菜单。理想情况下，下拉菜单将是彼此相邻的2或3个图像，这些图像是指向其他页面的链接。因此，当有人点击SHOP时，3个图像将彼此相邻，并链接到Pattern，Sewn Products，Crochet Products等。

在我脑海里听起来很容易，但我找不到我需要的东西。我不是代码编写者，但我非常擅长阅读和实现它们，甚至调整它们。

Answer 1

为什么不从这个Bootstrap组件“DropDown Button”开始？

这是JSFiddle example（可编辑）。

对于外部文件，这将需要：

JQuery包含（在线托管，link is here）
Bootstrap Include（在线托管，links are here）

<强>实施

包含（在<head>标记内）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

如果这些已经过时，请继续包括最新的这些（希望它们将始终在线提供）。

核心代码（包含3张带链接到网站的照片的下拉列表）：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Shop
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <a href="stackoverflow.com">
            <img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" width="40px" height="40px" />
        </a>
        <a href="stackoverflow.com">
            <img src="http://i.huffpost.com/gen/964776/images/o-CATS-KILL-BILLIONS-facebook.jpg" width="40px" height="40px" />
        </a>
        <a href="stackoverflow.com">
          <img src="http://i.ytimg.com/vi/mSFTRoBY99s/hqdefault.jpg" width="40px" height="40px" />
        </a>
    </ul>
</div>

图像悬停

1 个答案: