web自定义导航栏demo

来源：互联网发布：数据库 offset 编辑：程序博客网时间：2024/05/16 10:32
效果图：：如下
详细代码
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script src="js/jquery-3.2.1.min.js"></script>    <title></title></head><body><style>    /* 下拉按钮样式 */    .dropbtn {        background-color: #4CAF50;        width: 200px;        color: white;        padding: 16px;        font-size: 16px;        border: none;        cursor: pointer;    }    /* 容器 <div> - 需要定位下拉内容 */    .dropdown {        position: relative;        display: inline-block;    }    /* 下拉内容 (默认隐藏) */    .dropdown-content {        display: none;        position: absolute;        background-color: #f9f9f9;        min-width: 200px;        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);    }    /* 下拉菜单的链接 */    .dropdown-content a {        color: black;        padding: 12px 16px;        text-decoration: none;        display: block;    }    /* 鼠标移上去后修改下拉菜单链接颜色 */    .dropdown-content a:hover {        background-color: #f1f1f1    }    /* 在鼠标移上去后显示下拉菜单 */    .dropdown:hover .dropdown-content {        display: block;    }    /* 当下拉内容显示后修改下拉按钮的背景颜色 */    .dropdown:hover .dropbtn {        background-color: #3e8e41;    }</style><div class="dropdown">    <button class="dropbtn">下拉菜单</button>    <div class="dropdown-content">    </div></div></body><script>    $(document).ready(function () {       //设置下拉数组        var items = [{name: "教程1", click: ""},            {name: "教程2", click: ""},            {name: "教程3", click: ""},            {name: "教程4", click: ""}];        //动态生成下拉项        var menuStr = getMenu(items);        //将生成的下拉项填充到指定div里        $('.dropdown-content').html(menuStr);        //下拉项的点击事件        $('div.dropdown-content a').on('click', function (e) {            e.preventDefault();//取消标签自带事件            e.stopPropagation();//防止点击冒泡            var textSelect = $(this).text();            $(".dropbtn").text(textSelect);            $('.dropdown-content').toggle();        });        //确保点击事件之后，再此移动鼠标可显示下拉项        $('.dropbtn').on("mouseenter", function () {            $('.dropdown-content').toggle();        });        function getMenu(item) {            var menuStr = '';            $(items).each(function () {                menuStr += '<a href="#">' + this.name + '</a>'            });            return menuStr;        }    })</script></html>
如果有帮助，别忘了点赞，谢谢！
阅读全文
0 0