自定义下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布

ACGuan

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量893

点赞数

分类专栏： Web前端文章标签：原生JS 自定义下拉菜单

本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/81186573

版权

本文通过HTML、CSS和JavaScript展示了三种不同的自定义下拉菜单实现方式，包括使用原生JS操作DOM元素来创建下拉菜单，以及两种不同的样式和交互效果。详细代码和解释帮助读者理解如何自定义下拉菜单。

摘要由CSDN通过智能技术生成

1.第一种自定义下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
       *{margin:0;padding:0;list-style: none;}
       .selectOption{width:200px;height:30px;line-height: 30px;border:1px solid #ccc;margin:100px auto;overflow:hidden;}
       .selectOption ul{}
       .selectOption ul li{text-align: center;}
       .selectOption ul li:hover{width:100%;background:yellow;}
       .selectText{border:none;outline: none;text-align: center;width:100%;}
   </style>
</head>
<body>

       selectOption.onclick = function(e){//点击select选项
           e.stopPropagation();
           selectOption.style.overflow = "visible";//显示
       }

       document.onclick = function()
       {
           selectOption.style.overflow = "hidden";//隐藏
       }

       for(var i = 0; i < selectOptionList.length; i++)
       {
           selectOptionList[i].index = i;
           selectOptionList[i].onclick = function(e)//select下拉选项
           {
               selectText.value = selectOptionList[this.index].innerHTML;//获得选中选项
               e.stopPropagation();
               selectOption.style.overflow = "hidden";//隐藏
           }
       }
   </script>
</body>
</html>

2.第二种自定义下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

最低0.47元/天解锁文章

ACGuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义下拉菜单

1.第一种自定义下拉菜单 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt
复制链接

扫一扫

专栏目录