Ein supereinfaches Dropdown-Menü, das mit jquery implementiert wurde.
Rendering
Anfänglicher Effekt
Maus-Hover-Effekt
Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>
nav a {
text-decoration: none;
}
nav > ul > li {
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu {
display: none;
padding-left: 0 !important;
}
.sub-menu li {
color: white;
}
.sub-menu li:hover {
background-color: black;
}
.sub-menu li:hover a {
color: white;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Programming
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Japanese
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('nav li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');
}, function() {
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
</html>Weitere verwandte Artikel über ein supereinfaches Dropdown-Menü, das mit jquery implementiert wurde, finden Sie auf der chinesischen PHP-Website!
So erhalten Sie ein Token
Verwendung der Get-Funktion in C-Sprache
Was ist LAN?
Der Excel-Eingabewert ist unzulässig
So lösen Sie das Problem, dass kein Internetzugang möglich ist, wenn der Computer mit dem WLAN verbunden ist
So richten Sie unter XP ein lokales Netzwerk ein
Wird die Bitcoin-Inschrift verschwinden?
So erstellen Sie einen Bitmap-Index in MySQL
