html电商菜单页

Author Avatar ZTFtrue 发表于 • 2017年09月30日 09:36 • 共 • 520 • 次浏览
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!--规定文档的字符编码。-->

    <title> who are you</title>
    <meta name="renderer" content="webkit"><!--默认webkit内核-->

    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp"><!--源于百度禁止转码-->
    <meta name="Keywords" content="搜索引擎关键字">
    <meta name="Description"
          content="搜索引擎的描述">
    <style type="text/css">
        /*清除掉基本样式*/
        * {
            margin: 0;
            padding: 0;
        }

        #header {
            position: relative;
            margin-top: 10px;
            padding: 10px;
            height: 30px;
            width: 100%;
        }

        #logo {
            height: 30px;
            width: 30px;
        }

        #test {
            background: darkgray;
        }

        #header_a {

            float: left;
        }

        #header_text {
            width: 50px;
            padding: 0 10px 0 10px;
            display: block;
            float: left;
            text-align: center;
        }

        .search {
            padding: 0 10px 0 10px;
            height: 30px;
        }

        ul {
            width: 100%;
            padding: 0;
            margin: 0;
            list-style: none; /* 去除无序列表原点*/
            color: salmon;
        }

        li {
            width: 100%;
            padding: 10px 0 10px 0;
            display: block;
            text-align: center;
            cursor: pointer;
        }

        li:hover {
            background-color: dimgray;
        }

        a {
            text-decoration: none; /*去掉下划线*/
            display: block
        }

        .qua {
            display: block;
            padding: 10px 0 10px 0;
            width: 200px;
            top: 50px;
            text-align: center;
            background-color: lawngreen;
        }

        .wrap {
            position: relative;
            width: 200px;
        }

        #main {
            margin-top: 10px;
            display: block;
            width: 90%;
            position: relative;
            left: 50px;
        }

        #sub {
            background-color: white;
            width: 600px;
            position: absolute;
            border: 1px solid #f34;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
            left: 200px;
            top: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 10px;
        }

        #main_big {
            width: 600px;
            position: absolute;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
            left: 200px;
            top: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 10px;
        }

        .sub_content {
            font-size: 20px;
        }

        .none {
            display: none;
        }

        .sub_content dl {
            overflow: hidden;
        }

        .sub_content dt {
            float: left;
            width: 70px;
            clear: left;
            font-weight: bold;
            position: relative;
        }


    </style>
    <script type="text/javascript">
        window.addEventListener("resize", can, false);
        can();
        function can() {

        }

    </script>
    <script type="text/javascript">

    </script>
</head>
<body id="index" style="width: 100%">

<div id="header">
    <a id="header_a" href="http://www.t1bao.com/" target="_self" class="hide-text" title="首页"><img id="logo"
                                                                                                   alt="object"></a>
    <span id="header_text">new object</span>
    <form>
        <input class="search" type="search">
        <button type="button"></button>
    </form>
</div>


<div id="main">
    <div>
        <span class="qua">start menu</span>

    </div>
    <div class="wrap" id="test">
        <ul>
            <li data-id="a"><a class="aIndex" href="#">编程开发</a></li>
            <li data-id="b"><a href="#">办公处理</a></li>
            <li data-id="c"><a href="#">绘图设计</a></li>
            <li data-id="d"><a href="#">生活品质</a></li>
            <li data-id="e"><a class="aIndex" data-id="a" href="#">人生发展</a></li>
            <li data-id="f"><a href="#">职业工作</a></li>
            <li data-id="g"><a href="#">公益活动</a></li>
            <li data-id="h"><a href="#">其 他</a></li>
        </ul>


    </div>

    <div id="main_big">
       呵呵

    </div>
    <div id="sub" class="none">
        <div id="a" class="sub_content none">
            <dl>
                <dt>test a</dt>
            </dl>
        </div>
        <div id="b" class="sub_content none">
            <dl>
                <dt>test b</dt>
            </dl>
        </div>
        <div id="c" class="sub_content none">
            <dl>
                <dt>test</dt>
            </dl>
        </div>
        <div id="d" class="sub_content none">
            <dl>
                <dt>test</dt>
            </dl>
        </div>
        <div id="e" class="sub_content none">
            <dl>
                <dt>test</dt>
            </dl>
        </div>
        <div id="f" class="sub_content none">
            <dl>
                <dt>test</dt>
            </dl>
        </div>
        <div id="g" class="sub_content none">
            <dl>
                <dt>test</dt>
            </dl>
        </div>
        <div id="h" class="sub_content none">
            <dl>
                <dt>test</dt>
            </dl>
        </div>
    </div>
</div>
<div>
    更多推荐
</div>
<script type="text/javascript" src="./t1bao/jquery-3.2.1.js"></script>
<script type="text/javascript">

    var sub = $("#sub");
    var activityRow;
    var activityMenu;
    $(document).ready(function () {

        $("#test").on('mouseenter', function (e) {
            sub.removeClass('none');

        }).on('mouseleave', function (e) {
            var t = setTimeout(reomve, 200);
            sub.on('mouseenter', function (e) {
                clearTimeout(t);
            }).on('mouseleave', function (e) {
                sub.addClass('none');
            });


        }).on('mouseenter', 'li', function (e) {
            if (!activityRow) {
                activityRow = $(e.target);
                console.log(activityRow.data('id'));
                activityMenu = $('#' + activityRow.data('id'));
                activityMenu.removeClass('none');
            } else {
                activityMenu.addClass('none');
                activityRow = $(e.target);
                console.log(activityRow.data('id'));
                activityMenu = $('#' + activityRow.data('id'));
                activityMenu.removeClass('none');
            }
        })
    });

    function reomve() {
        sub.addClass('none');
        if (activityRow) {
            activityRow = null;
        }
        if (activityMenu) {
            activityMenu = null;
        }
    }
</script>
</body>
</html>
最后编辑于 • 2017年09月30日 09:36 •  

你尚未登录,无法进行回复。