Jquery实现仿京东二级导航条

最新推荐文章于 2022-06-17 18:44:13 发布

原创

最新推荐文章于 2022-06-17 18:44:13 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

这篇博客展示了如何利用jQuery来创建一个类似京东商城的二级导航菜单。通过鼠标悬停在一级菜单项上，会显示对应的二级菜单，提供丰富的子分类链接。样式设计简洁，实现了平滑的过渡效果。

<head>
    <title></title>
    <style type="text/css">
        html
        {
            color: #666;
            background: #FFF;
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, i, fieldset, legend, input, textarea, p, blockquote, th, td
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font: 12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;
        }
        h1, h2, h3, h4, h5, h6
        {
            font-size: 100%;
            font-weight: normal;
        }
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
        }
        img
        {
            border: none;
        }
        a
        {
            text-decoration: none;
            color: #666;
        }
        a:hover
        {
            text-decoration: underline;
            color: #FF6600;
        }
        ul, li
        {
            list-style-type: none;
        }
        q:before, q:after
        {
            content: '';
        }
        sup
        {
            vertical-align: text-top;
        }
        sub
        {
            vertical-align: text-bottom;
        }
        /* All reset */
        body
        {
            margin: 100px;
        }
        ul li
        {
            line-height: 30px;
            border: 1px solid #E5D1A1;
            text-align: center;
            margin-top: -1px;
            width: 188px;
            background: #FFFDD2;
            position: relative;
            z-index: 1;
        }
        .tips
        {
            line-height: 20px;
            position: absolute;
            width: 150px;
            height: 200px;
            border: 1px solid #E5D1A1;
            text-align: center;
            margin-top: -1px;
            background: #FFFDD2;
            z-index: 1;
            display: none;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li").each(function (index) {
                $(this).mouseover(function () {