css+js实现下拉框带效果图

最新推荐文章于 2024-03-19 17:34:38 发布

原创最新推荐文章于 2024-03-19 17:34:38 发布 · 501 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主同意不得转载

前端js,css 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的下拉菜单，菜单项点击后可实现页面跳转功能。通过test.html中的代码示例，展示了如何利用<select>元素结合JavaScript函数MM_jumpMenu实现动态页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test.html

<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
                <option value ="https://www.baidu.com/">我们的课程记录</option>
                <option value ="跳转地址">Saab</option>
                <option value="跳转地址">Opel</option>
                <option value="跳转地址">Audi</option>
        </select>

test.js

 <!-- 顶部下拉菜单的动作函数 -->
    <script type="text/javascript">
        function MM_jumpMenu(targ, selObj, restore) {
            eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'");
            if (restore) selObj.selectedIndex = 0;
        }
    </script>

test.css

/*下拉框 */

#jumpMenu {
    background: #e6e5e5;
    font-size: 16px;
    border: solid 0px #000;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}

效果图
在这里插入图片描述