• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

JavaScript 来源:Yousuf Farhan 6次浏览

当它被点击时,它应该打开一个包含链接的下拉菜单。 请提供完整的代码。 下面是图像/按钮,我有代码:如何使用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 
    


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)