如何使用JavaScript，HTML和CSS来制作一个图像按钮，它可以做到以下几点？

  • Z时代
  • 2024-01-10
  • 分类：问答

当它被点击时，它应该打开一个包含链接的下拉菜单。 请提供完整的代码。 下面是图像/按钮，我有代码：如何使用JavaScript，HTML和CSS来制作一个图像按钮，它可以做到以下几点？

<div class="navBar"> 
<img src="nav_icon.jpg" class="navButton" alt="Navigation Links"> 
<div class="dropdown-content"> 
    <a href="#">Home</a> 
<a href="#">Get Involved</a> 
    <a href="#">About Us</a> 
    <a href="#">Contact Us</a> 
</div> 
</div>

这里是CSS部分（这是不是真的有关:)

.dropdown-content{ 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 
.navButton{ 
    height:20px; 
    width:20px; 
} 
.navBar{ 
    float:right; 
    height: 10px; 
    width:20%; 
    padding-top:4.2%; 
    position: relative; 
    display: inline-block; 
}

我试过下面的例子中，这不是创造我想要的，让所有的链接出现： W3 Schools

回答：

从HTML您提供，如果用W3School's Example比较您的标记，我看到了两个问题：导致你的菜单不能正常工作。我已在下面列出它们：

  1. 下拉菜单中应该有id属性。

    <div id="myDropdown" class="dropdown-content">

    // ^^^----- This id attribute should be added.

  2. 你忘了加上.navButton单击事件处理程序，将切换每个被点击一次下拉菜单。

    <img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">

             // ^^^ Add this inline click handler 

/* 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('.navButton')) {  
    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');  
     }  
    }  
    }  
}

/* Dropdown Button */  
.navButton {  
    height:20px;  
    width:20px;  
}  
/* Dropdown button on hover & focus */  
.dropbtn:hover, .dropbtn:focus {  
    background-color: #3e8e41;  
}  
/* The container <div> - needed to position the dropdown content */  
.dropdown {  
    position: relative;  
    display: inline-block;  
}  
/* Dropdown Content (Hidden by Default) */  
.dropdown-content {  
    display: none;  
    position: absolute;  
    background-color: #f9f9f9;  
    min-width: 160px;  
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
}  
/* Links inside the dropdown */  
.dropdown-content a {  
    color: black;  
    padding: 12px 16px;  
    text-decoration: none;  
    display: block;  
}  
/* Change color of dropdown links on hover */  
.dropdown-content a:hover {background-color: #f1f1f1}  
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */  
.show {display:block;}

<div class="navBar">  
    <img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">  
    <div id="myDropdown" class="dropdown-content">  
    <a href="#">Home</a>  
    <a href="#">Get Involved</a>  
    <a href="#">About Us</a>  
    <a href="#">Contact Us</a>  
    </div>  
</div>

以上是 如何使用JavaScript，HTML和CSS来制作一个图像按钮，它可以做到以下几点？ 的全部内容， 来源链接： utcz.com/qa/260805.html

回到顶部