1
これは私がHTML5、CSSとJavaScriptを使用して作成しようとしているナビゲーションバーのコードスニペットです。私はCSSを使用して作成しようとするとJavascriptいドロップダウンメニューは、W3Schoolsのウェブサイトに例として与えられたものと類似しています。はなぜCSS Javascriptのドロップダウンメニューには、任意のブラウザでは表示されませんか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="styles/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/></a>
<div class="container">
<ul class="left">
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true"></span>Home</a></li>
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true"></span>Featured</a></li>
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</a></li>
</ul>
<ul class="right">
<li><a href="#"><span class="material-icons icon-design"></span>Events & Offers</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
これは私がこのコードのうち、取得していた結果である：
は、しかし、ドロップダウンメニューは、私がしようと何でも動作するようには思えないこれは私が使用していたコードスニペットです行う。私はここでマテリアライズCSSをGoogleアイコンと共に使用しています。私が間違っているつもりですか私のアプローチに何か問題がある場合
誰も教えてもらえますか？私にとって
あなたの要件を満たすのですか？ @Monzur –
これを参照してください：http://materializecss.com/dropdown.html#！ – Monzur
はい私はこれについて知っていましたが、ドロップダウンメニューをメニューの下に表示したいと思っていました。従来のドロップダウンメニューのように、コード内に設定することもできます。true @ Monzur –