h5学习笔记：下拉菜单(2)

最新推荐文章于 2024-07-12 08:49:54 发布

hero82748274

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量4k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/52302768

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

有时候会觉得css 变得毫无章法地使用。在下拉菜单中，还有一种浮动的二级菜单。
展示一些商品。好像小米商城那个导航下拉菜单。如下图

这里写图片描述

下面模拟一下，做的过程也遇到一些小问题。例如不用position去定位的时候，触发二级的菜单的时候，总是有异常导致不能使用。对二级菜单展示到时候，加上position上去则神奇问题解决了
只是模拟了两个菜单选项。其他基本上一致，不过是这个菜单有很多细节的地方还是缺失。如阴影部分，如间距线的有一些要和一些不要。这个还是看这个是不是同列的产品了。所以要归类还得要思考如何去处理好。

原本想练习flex布局的，发现flex用起来还不熟悉。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>小米下拉菜单2</title>
    </head>

    <style type="text/css">
        ul,li,p {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .menu {
            width:-webkit-fit-content;
            width:-moz-fit-content;
            margin: 0 auto;

        }

        .menu>ul>li {
            float: left;
            margin-right: 20px;
            font-size: 13px;
            padding: 20px 0;            
        }

        .menu>ul>li:hover {
            color: orangered;
        }

        .sub_menu {
            position: absolute;
            margin-top: 20px;
            left: 0px;
            width: 100%;
            height: 208px;
            background-color: white;
            display: none;
            border-top: 1px solid #E0E0E0;
            box-shadow: 2px 1px 1px #E0E0E0;
        }

        .sub_menu .menu_item {
            border-right: 1px solid #E0E0E0;
            height: 208px;
            display: inline-block;
            cursor: pointer;
        }

        .sub_menu .menu_item img {
            margin-top: 40px;
        }

        .menu_item p {
            text-align: center;
            margin-top: 5px;
            color: #333333;
        }

        .menu_item .price {
            color: #ff6700;
            font-size: 14px;
        }
    </style>

    <body>

        <div class="main">
            <div class="menu">
                <ul>
                    <li>小米手机
                        <div class="sub_menu">
                            <ul>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/15/goods/nav/maxdingbu!160x110.jpg" />
                                    <p>小米max</p>
                                    <p class="price">1499起</p>
                                </li>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/16/goods/nav/mi5!160x110.jpg" />
                                    <p>小米手机5</p>
                                    <p class="price">1799起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>红米
                        <div class="sub_menu">
                            <ul>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/g/2015/cn-index/hongmipro-320!160x110.jpg" />
                                    <p>红米pro</p>
                                    <p class="price">1499起</p>
                                </li>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/15/goods/nav/note3!160x110.jpg" />
                                    <p>红米note3</p>
                                    <p class="price">899起</p>
                                </li>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/g/2015/video/hongmi3s!160x110.jpg" />
                                    <p>红米手机3S</p>
                                    <p class="price">699起</p>
                                </li>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/15/goods/nav/hongmi3!160x110.jpg" />
                                    <p>红米手机3</p>
                                    <p class="price">699起</p>
                                </li>
                                <li class="menu_item">
                                    <img src="http://c1.mifile.cn/f/i/g/doodle/320-220!160x110.jpg" />
                                    <p>红米手机3x</p>
                                    <p class="price">799起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>平板·笔记本</li>
                    <li>电视</li>
                    <li>盒子·影音</li>
                    <li>路由器</li>
                    <li>智能硬件</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
            </div>

        </div>

        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                $(".menu >ul >li").hover(function() {
                    $(this).children().show();

                }, function() {

                    $(this).children().hide();
                });

            });
        </script>

    </body>

</html>

hero82748274

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记：下拉菜单(2)

有时候会觉得css 变得毫无章法地使用。在下拉菜单中，还有一种浮动的二级菜单。展示一些商品。好像小米商城那个导航下拉菜单。如下图下面模拟一下，做的过程也遇到一些小问题。例如不用position去定位的时候，触发二级的菜单的时候，总是有异常导致不能使用。对二级菜单展示到时候，加上position上去则神奇问题解决了只是模拟了两个菜单选项。其他基本上一致，不过是这个菜单有很多细节的地方还是缺失
复制链接

扫一扫