私はドロップダウンメニューに取り組んでいます。HTML、CSS、jQuery を単純に組み合わせただけです。良い例を見つけましたが、それを自分の Web サイトに実装しようとすると、どうにかして動作させることができません。
したがって、基本的に記事で言われていることをコピーして、メニューを手伝ってくれた小さなダミーにそれを唖然とさせましたが、どういうわけかそれはまだ機能せず、理由がわかりません.
誰かが私がダミーで間違っていたことを説明してもらえますか?それで、意図したメニューを修正しようとしている間、それを例として使用できますか?
ドロップダウン コードを含む記事(基本的なコードと書かれている部分に移動します。空想はまだ理解できません)
HTML ダミー:
<!DOCTYPE html>
<head>
<link rel="stylesheet" title="nzoom" type="text/css" href="opmaak_home.css">
</head>
<body>
<ul class="tabs">
<li><a href="#">Dropdown 1</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a>
<ul class="dropdown">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 1</a></li>
</ul>
</li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
<li><a href="#">Dropdown 3</a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
<li><a href="#">Menu item 6</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="menu.js"></script>
</body>
.css ダミー:
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}
ul.tabs a
{
position: relative;
display: block;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 250px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 95%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
jQuery ダミー:
$(function () {
$('.dropdown').each(function () {
$(this).parent().eq(0).hover(function () {
$('.dropdown:eq(0)', this).show();
}, function () {
$('.dropdown:eq(0)', this).hide();
});
});
});