`

手机端仿美团下拉菜单带遮罩层html+css+jquery

阅读更多

今天分享个特效,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style type="text/css">
        /*CSS源代码*/
        /* Common style */
        body,h1,h2,h3,h4,h5,h6,p,form{ margin:0;}
        ul{ margin:0; padding:0; list-style:none;}
        a img,input,button,textarea{ border:none;}
        a,input,button,textarea,select{ outline:none;}
        table{ border-collapse:collapse; border-spacing:0; width:100%;}
        h1{ text-indent:-9999px;}

        /* Link Style */
        a{ text-decoration:none;}
        a:link{ color:#333;}
        a:visited{ color:#333;}
        a:hover{ color:#be0000;}
        a:active{ color:#be0000;}

        /* Font Style */
        body{ font:0.36rem '微软雅黑',tahoma,Srial,helvetica,sans-serif; color:#333;}
        h1,h2,h3,h4,h5,h6{ font-size:100%;}
        .normal{ font-weight:normal;}
        body .color6{ color:#666;}
        .t_cen{ text-align:center;}
        .red,body a.red{ color:#be0000;}

        /* Body Style */
        .con{ width:10.6rem; padding:0 0.1rem; margin:0 auto;}
        .con_2{ width:10.8rem; margin:0 auto;}
        .hide{ overflow:hidden;}
        .fl{ float:left;}
        .fr{ float:right;}

        /* content */
        .menu{ width:100%; height:1.08rem; position:fixed; z-index:2; border-bottom:1px solid #bbb; background:#eaeaea; top:0;}
        .menu_nav{ line-height:1.08rem; color:#d3d3d3;}
        .menu_nav span{ display:inline-block; width:32.6%; text-align:center; color:#333;}
        .menu_nav span{ background:url(../images/arow_1.png) 82% center no-repeat; background-size:0.18rem 0.1rem;}
        .menu_nav .menu_this{ color:#be0000; background:url(../images/arow_2.png) 82% center no-repeat; background-size:0.18rem 0.1rem;}
        .menu_down_bg{ width:100%; background:#fff;}
        .menu_down{ display:none; background:#fff;}
        .menu_sort{ width:100%; position:relative; height:4.8rem; overflow-y:scroll; background:#f5f5f5;}
        .menu_sort h2{ width:50%; height:0.8rem; line-height:0.8rem; vertical-align:middle; font-weight:normal; clear:both; background:#fff;}
        .menu_sort li h2:active,.menu_sort li .sort_this{ background:#f5f5f5;}
        .menu_sort h2 span,.menu_sort h2 a{ display:block;}
        .menu_sort h2 span{ padding-left:0.8rem;}
        .menu_sort h2 font{ color:#999;}
        .sort_1{ background:url(../images/menu_1.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_2{ background:url(../images/menu_2.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_3{ background:url(../images/menu_3.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_4{ background:url(../images/menu_4.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_5{ background:url(../images/menu_5.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_6{ background:url(../images/menu_6.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_this .sort_1{ background:url(../images/menu_11.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_this .sort_2{ background:url(../images/menu_22.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_this .sort_3{ background:url(../images/menu_33.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_this .sort_4{ background:url(../images/menu_44.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_this .sort_5{ background:url(../images/menu_55.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .sort_this .sort_6{ background:url(../images/menu_66.png) 0.2rem center no-repeat; background-size:0.38rem 0.39rem;}
        .menu_open{ display:none; width:50%; height:4.8rem; overflow-y:scroll; position:absolute; top:0; right:0; background:#f5f5f5;}
        .menu_open a{ display:block; height:0.8rem; line-height:0.8rem; text-indent:0.6rem;}
        .menu_open a:active{ background:#ddd;}
        .menu_open a font{ color:#999; float:right; margin-right:0.3rem;}
        .menu_far{ width:100%; background:#fff;}
        .menu_far a{ display:block; height:0.8rem; line-height:0.8rem; clear:both; text-indent:0.8rem;}
        .menu_far a:active,.menu_far .far_this{ background:#f5f5f5;}
        .menu_bg{ display:none; width:100%; height:100%; position:fixed; z-index:1; background:rgba(0,0,0,0.5);}
        .list{ width:100%; font-size:0.32rem; margin:1.08rem 0 0;}
        .list li{ width:100%; border-bottom:1px solid #dedede; padding:0.3rem 0; background:#fff;}
        .list .list_box{ display:block; color:#333;}
        .list_img{ float:left; width:4.06rem; height:2.54rem; padding:0.09rem; border:0.03rem solid #b3b3b3; margin-right:0.3rem; overflow:hidden;}
        .list_img img{ width:100%; height:100%;}
        .list_box span{ display:block; float:left; width:6rem;}
        .list_box h3{ font-size:0.42rem; height:0.6rem; line-height:0.6rem; overflow:hidden;}
        .list_box p{ height:0.9rem; margin:0.2rem 0 0.45rem; line-height:0.45rem; overflow:hidden;}
        .list_box font{ font-size:0.36rem;}
        .list_box em{ font-style:normal; margin-top:0.05rem; display:inline-block; padding-left:0.26rem; background:url(../images/list_far.png) left center no-repeat; background-size:0.2rem 0.26rem;}

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="menu">
    <div class="con_2 menu_nav">
        <span>全部分类</span>|<span>商圈</span>|<span>离我最近</span>
    </div>
    <div class="menu_down_bg">
        <div class="con_2 menu_down">
            <ul class="menu_sort">
                <li>
                    <h2 class="sort_this"><a href=""><span class="sort_1">全部分类<font>(124)</font></span></a></h2>
                </li>
                <li>
                    <h2><span class="sort_2">餐饮<font>(124)</font></span></h2>
                    <div class="menu_open">
                        <a href="">全部</a>
                        <a href="">火锅<font>1512</font></a>
                        <a href="">蛋糕<font>15</font></a>
                        <a href="">甜品<font>151</font></a>
                        <a href="">自助餐<font>512</font></a>
                        <a href="">小吃快餐<font>10</font></a>
                        <a href="">火锅<font>1512</font></a>
                        <a href="">蛋糕<font>15</font></a>
                        <a href="">甜品<font>151</font></a>
                        <a href="">自助餐<font>512</font></a>
                        <a href="">小吃快餐<font>10</font></a>
                    </div>
                </li>
                <li>
                    <h2><span class="sort_3">电影<font>(78)</font></span></h2>
                    <div class="menu_open">
                        <a href="">电影<font>1512</font></a>
                    </div>
                </li>
                <li>
                    <h2><span class="sort_4">KTV<font>(24)</font></span></h2>
                    <div class="menu_open">
                        <a href="">KTV<font>1512</font></a>
                    </div>
                </li>
                <li>
                    <h2><span class="sort_5">美容美发<font>(10)</font></span></h2>
                    <div class="menu_open">
                        <a href="">美容美发<font>1512</font></a>
                    </div>
                </li>
                <li>
                    <h2><span class="sort_6">健身保健<font>(22)</font></span></h2>
                    <div class="menu_open">
                        <a href="">健身保健<font>1512</font></a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="con_2 menu_down">
            <ul class="menu_sort">
                <li>
                    <h2 class="sort_this"><span>附近<font>(124)</font></span></h2>
                    <div class="menu_open">
                        <a href="">1千米</a>
                        <a href="">3千米</a>
                        <a href="">全程</a>
                    </div>
                </li>
                <li>
                    <h2><span>桓台县<font>(124)</font></span></h2>
                    <div class="menu_open">
                        <a href="">全部</a>
                        <a href="">信誉楼<font>1512</font></a>
                        <a href="">喜乐佳<font>15</font></a>
                    </div>
                </li>
                <li>
                    <h2><span>沂源县<font>(78)</font></span></h2>
                    <div class="menu_open">
                        <a href="">沿东路<font>1512</font></a>
                    </div>
                </li>
                <li>
                    <h2><span>张店区<font>(24)</font></span></h2>
                    <div class="menu_open">
                        <a href="">美食街<font>1512</font></a>
                    </div>
                </li>
                <li>
                    <h2><span>淄川区<font>(10)</font></span></h2>
                    <div class="menu_open">
                        <a href="">全部<font>1512</font></a>
                    </div>
                </li>
                <li>
                    <h2><span>博山区<font>(22)</font></span></h2>
                    <div class="menu_open">
                        <a href="">中心路<font>1512</font></a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="con_2 menu_down">
            <div class="menu_far">
                <a href="" class="far_this">智能排序</a>
                <a href="">好评优先</a>
                <a href="">离我最近</a>
                <a href="">人均最低</a>
                <a href="">人均最高</a>
            </div>
        </div>
    </div>
</div>
<div class="menu_bg"></div>
<ul class="list">
    <li>
        <a href="" class="con hide list_box">
            <div class="list_img"><img src="images/img_1.jpg"></div>
            <span class="hide">
            	<h3 class="normal">【地王大厦】金钱豹 自助餐</h3>
                <p class="color6">全场5折、6折、7折限量订购,邀您一起共享美味。</p>
                <strong class="normal red">今天剩余 <font>3</font> 份</strong>
                <em class="fr color6"><50m</em>
            </span>
        </a>
    </li>
    <li>
        <a href="" class="con hide list_box">
            <div class="list_img"><img src="images/img_1.jpg"></div>
            <span class="hide">
            	<h3 class="normal">【地王大厦】金钱豹 自助餐</h3>
                <p class="color6">全场5折、6折、7折限量订购,邀您一起共享美味。</p>
                <strong class="normal red">今天剩余 <font>3</font> 份</strong>
                <em class="fr color6"><50m</em>
            </span>
        </a>
    </li>
    <li>
        <a href="" class="con hide list_box">
            <div class="list_img"><img src="images/img_1.jpg"></div>
            <span class="hide">
            	<h3 class="normal">【地王大厦】金钱豹 自助餐</h3>
                <p class="color6">全场5折、6折、7折限量订购,邀您一起共享美味。</p>
                <strong class="normal red">今天剩余 <font>3</font> 份</strong>
                <em class="fr color6"><50m</em>
            </span>
        </a>
    </li>
    <li>
        <a href="" class="con hide list_box">
            <div class="list_img"><img src="images/img_1.jpg"></div>
            <span class="hide">
            	<h3 class="normal">【地王大厦】金钱豹 自助餐</h3>
                <p class="color6">全场5折、6折、7折限量订购,邀您一起共享美味。</p>
                <strong class="normal red">今天剩余 <font>3</font> 份</strong>
                <em class="fr color6"><50m</em>
            </span>
        </a>
    </li>
    <li>
        <a href="" class="con hide list_box">
            <div class="list_img"><img src="images/img_1.jpg"></div>
            <span class="hide">
            	<h3 class="normal">【地王大厦】金钱豹 自助餐</h3>
                <p class="color6">全场5折、6折、7折限量订购,邀您一起共享美味。</p>
                <strong class="normal red">今天剩余 <font>3</font> 份</strong>
                <em class="fr color6"><50m</em>
            </span>
        </a>
    </li>
</ul>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    /*Javascript代码片段*/
    $(document).ready(function(){
        var deviceWidth=$(window).outerWidth();
        if(deviceWidth>1080){
            $("html").css("font-size","100px");
        }else{
            $("html").css("font-size",deviceWidth/1080*100+'px');
        }
        var menu_t=$(".menu_nav span");
        var menu_c=$(".menu_down");
        var menu_bg=$(".menu_bg");

        menu_t.each(function(index){
            $(this).click(function(){
                $(this).siblings("span").removeClass("menu_this");
                $(this).addClass("menu_this");
                var m_this=menu_c.eq(index);
                m_this.siblings("div").hide();
                m_this.toggle();

                if(m_this.is(':visible')){
                    $(this).addClass("menu_this");
                }
                else{
                    $(this).removeClass("menu_this");
                }

                if(menu_c.is(':visible')){
                    menu_bg.show();
                    $("html,body").css({"height":"100%","overflow":"hidden"});

                }
                else{
                    menu_bg.hide();
                    $("html,body").css({"height":"auto","overflow":"auto"});
                }
            });
        });

//二级
        var down_t=$(".menu_sort h2");
        var down_c=$(".menu_open");

        down_t.each(function(){
            $(this).click(function(){
                down_t.removeClass("sort_this");
                $(this).addClass("sort_this");
                down_c.hide();
                $(this).next("div").show();
            });
        });

//点击背景隐藏
        menu_bg.click(function(){
            $(this).hide();
            menu_t.removeClass("menu_this");
            menu_c.hide();
            down_t.removeClass("sort_this");
            down_c.hide();
            $("html,body").css({"height":"auto","overflow":"auto"});
        });

    });
</script>
</body>
</html>

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    HTML+CSS+JS实现的下拉菜单源码

    HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...

    仿美团下拉菜单pop

    6. **自定义视图(Custom View)**:为了达到美团菜单的样式和功能,可能需要创建自定义视图,包括自定义Adapter以适应特定的数据结构,以及自定义布局文件来定义菜单项的外观。 7. **数据绑定(Data Binding)**:为了...

    仿美团下拉菜单

    在IT行业中,构建一个高效的用户界面是至关重要的...通过以上步骤,开发者可以构建出一款功能齐全、用户体验良好的仿美团下拉菜单。在实际项目中,应不断优化和迭代,以适应用户的需求和反馈,从而提升整体应用的质量。

    HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

    本文将深入探讨这些技术,并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目,分析它们在实际应用中的作用。 首先,HTML(HyperText Markup Language)...

    仿美团下拉筛选菜单——PopupDownMenu

    在Android应用开发中,创建一个类似美团或淘宝的下拉筛选菜单是一项常见的需求。这个功能可以为用户提供方便快捷的筛选选项,提升用户体验。本篇将详细介绍如何使用PopupWindow结合ListView来实现这样的`...

    仿美团下拉刷新

    在移动应用开发中,"仿美团下拉刷新"是一个常见的功能设计,主要目的是提供一个用户友好的界面,让用户能够轻松地获取更新的数据。这个功能在美团、大众点评等生活服务类应用中广泛应用,增强了用户的交互体验。下面...

    仿美团菜单下拉

    "仿美团菜单下拉"是一个常见的UI设计元素,通常用于提供用户友好的导航选项。美团作为知名的在线服务平台,其菜单下拉功能已经成为了一种典范,被许多开发者借鉴和模仿。 下拉菜单是一种交互设计,它允许用户通过...

    html+jquery+CSS实现最简单的右侧导航栏效果

    本教程将详细讲解如何使用HTML、CSS和jQuery来实现一个最简单的右侧导航栏效果。这个导航栏将具有响应式设计,能在不同设备上良好展示,并能通过点击事件动态显示和隐藏。 首先,我们从HTML结构开始。一个基础的...

    jQuery+CSS3+HTML5折叠卡片式下拉菜单特效

    **jQuery+CSS3+HTML5折叠卡片式下拉菜单特效详解** 在网页设计中,下拉菜单是一种常见的交互元素,用于展示多级导航结构。本特效利用jQuery的事件处理、DOM操作,结合CSS3的动画效果和HTML5的新特性,构建出一种...

    jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip

    "jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip" 提供的资源正是这样一个结合了jQuery和CSS3技术的动态效果下拉菜单。这个压缩包中的代码可以帮助开发者实现一个既美观又有动态反馈的菜单,提升用户...

    jQuery手机端无限级导航下拉菜单代码

    总结来说,"jQuery手机端无限级导航下拉菜单代码"利用jQuery库,通过JavaScript和CSS实现了一个可无限扩展的移动端导航菜单。这个菜单不仅节省了屏幕空间,还提供了流畅的用户交互体验,是移动应用和网站导航设计的...

    Android仿美团下拉筛选框

    在Android应用开发中,"Android仿美团下拉筛选框"是一个常见的组件,它允许用户通过下拉菜单选择或筛选特定的选项。这个组件通常用于提高用户体验,使用户能够快速访问和调整设置,如搜索过滤条件或者展示不同类别的...

    仿美团下拉列表,代码封装的很好,值得一看

    本项目标题提到的“仿美团下拉列表”,就是针对这种交互效果的一种实现,它旨在为开发者提供一种代码封装,以便在自己的应用中复用类似的功能。 首先,我们来看“仿美团下拉列表”这个概念。在美团应用中,下拉列表...

    Android仿美团下拉菜单(商品选购)实例代码

    在Android开发中,创建仿美团下拉菜单(商品选购)的实例代码主要涉及到以下几个关键知识点: 1. **数据结构与初始化**: - 首先,为了展示下拉菜单的内容,我们需要创建一个数据结构来存储菜单项。在这个例子中,...

    Jquery + Css 实现横纵菜单下拉效果

    本篇文章将深入探讨如何使用JavaScript库jQuery和CSS技术来实现横纵菜单的下拉效果。以下是对这个主题的详细解释: 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和...

    Jquery+div+css鼠标经过下拉菜单

    本示例“Jquery+div+css鼠标经过下拉菜单”结合了JavaScript库jQuery、HTML的div元素以及CSS样式来实现这一功能。下面我们将详细探讨这些知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的...

    非常酷炫的jQuery+css超滑二级下拉菜单

    本资源"非常酷炫的jQuery+css超滑二级下拉菜单"正是针对这一需求,提供了一种既美观又流畅的解决方案。 首先,jQuery是一种轻量级、高性能的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作以及...

    Android仿大众点评、美团下拉菜单

    总之,实现"Android仿大众点评、美团下拉菜单"需要理解Android的UI组件,熟悉数据绑定和适配器模式,掌握动画和事件处理,以及具备一定的UI设计能力。通过这样的实践,开发者不仅可以创建出符合用户习惯的交互体验,...

Global site tag (gtag.js) - Google Analytics