圖像懸停時的下拉菜單（由圖像組成）
[英]Drop down menu (consisting of images) on image hover
問題描述
我正在建立一個網站（ Boys and Bunting ），並且我的頂部水平導航是由彼此相鄰的圖像組成。
我希望“商店”按鈕顯示一個下拉菜單。 下拉菜單理想情況下是彼此相鄰的2或3張圖像，它們是指向其他頁面的鏈接。 因此，當有人單擊SHOP時，3個圖像會彼此相鄰排列，例如鏈接到圖案，縫制產品，鈎針產品。
在我的腦海中聽起來很輕松，但是我找不到我需要的東西。 我不是代碼編寫者，但是我非常擅長閱讀和實現它們，甚至調整它們。
1 個解決方案
解決方案1
0 2015-08-07 09:48:19
為什么不從這個Bootstrap組件“ DropDown Button ”開始？
這是一個JSFiddle示例 （可編輯）。
對於外部文件，這將需要：
履行
包括（在<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>
jQuery下拉懸停菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.