jQuery-Megadropdown.js
Megadropdown.jsは、ドロップダウンメニューを簡単かつ迅速に実装するためのjQueryプラグインです。
以下に示すドロップダウンメニューの例-
<!doctype html>
<html lang = "en" class = "no-js">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body>
<header>
<div class = "cd-dropdown-wrapper">
<a class = "cd-dropdown-trigger" href = "#0">Dropdown</a>
<nav class = "cd-dropdown">
<h2>Title</h2>
<a href = "#0" class = "cd-close">Close</a>
<ul class = "cd-dropdown-content">
<li>
<form class = "cd-search">
<input type = "search" placeholder = "Search...">
</form>
</li>
<li class = "has-children">
<a href = "">images</a>
<ul class = "cd-dropdown-gallery is-hidden">
<li class = "go-back"><a href = "#0">Menu<
/a></li>
<li class = "see-all"><a href = "">
Browse Gallery</a></li>
<li>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #1</h3>
</a>
</li>
<li>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #2</h3>
</a>
</li>
<li>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #3</h3>
</a>
</li>
<li>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #4</h3>
</a>
</li>
</ul>
</li>
<li class = "has-children">
<a href = "">Services</a>
<ul class = "cd-dropdown-icons is-hidden">
<li class = "go-back"><a href = "#0">Menu<
/a></li>
<li class = "see-all"><a href = "">
Browse Services</a></li>
<li>
<a class = "cd-dropdown-item item-1" href = "">
<h3>Service #1</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-2" href = "">
<h3>Service #2</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-3" href = "">
<h3>Service #3</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-4" href = "">
<h3>Service #4</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-5" href = "">
<h3>Service #5</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-6" href = "">
<h3>Service #6</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-7" href = "">
<h3>Service #7</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-8" href = "">
<h3>Service #8</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-9" href = "">
<h3>Service #9</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-10" href = "">
<h3>Service #10</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-11" href = "">
<h3>Service #11</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class = "cd-dropdown-item item-12" href = "">
<h3>Service #12</h3>
<p>This is the item description</p>
</a>
</li>
</ul>
</li>
<li class = "cd-divider">Divider</li>
<li><a href = "">Page 1</a></li>
<li><a href = "">Page 2</a></li>
<li><a href = "">Page 3</a></li>
</ul>
</nav>
</div>
</header>
<main class = "cd-main-content"></main>
<script src = "js/jquery-2.1.1.js"></script>
<script src = "js/jquery.menu-aim.js"></script>
<script src = "js/main.js"></script>
</body>
</html>これにより、次の結果が得られます-
ここをクリック