时间戳

首页 > 解决方案 > 有没有办法只使用 html 和 css 而不是 javascript 创建网站弹出菜单？

html - 有没有办法只使用 html 和 css 而不是 javascript 创建网站弹出菜单？

问题描述

是否可以仅使用 html/css 创建包含复选框和其他小部件的弹出菜单？

这可以通过使用引导程序来完成吗？

标签： htmlcssbootstrap-4

解决方案

.popupmenu{list-style:none; margin:0; padding:0;}
.popupmenu li{width:100%; text-align:center; font-size:26px; padding:10px;}
.popupmenu li:hover{background:blue; color:#fff;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Menu
</button>
<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        
        <div class="modal-body">
          <ul class="popupmenu">
            <li><a href="https://www.kunshtech.com/">Logo</a></li>
            <li>Home</li>
            <li>Profile</li>
            <li>About Us</li>
            <li>Contact Us</li>
          </ul>
        </div>
        
       
        
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

推荐阅读