美团头部导航栏实现

最新推荐文章于 2021-01-12 11:13:17 发布
最新推荐文章于 2021-01-12 11:13:17 发布
阅读量1.8k 收藏 14
点赞数 4
文章标签： 美团头部导航栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EIERICA/article/details/102453888
版权

#纯CSS完成美团官网头部导航栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>西安美团网-西安美食_酒店_旅游_团购_电影_吃喝玩乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body{
            width: 100%;
            min-width: 1280px;
        }
        
        .header-bar {
            background-color: #f7f7f7;
            height: 40px;
            line-height: 40px;
        }

        .user-entry,
        .header-bar-position {
            display: inline;
            font-size: 12px;

        }

        a {
            text-decoration: none;
            color: rgba(22, 21, 21, 0.432);
            /* font-weight:600; */
        }

        .header-bar-position {
            margin: 0 25px;
        }

        .user-entry .login {
            color: coral
        }

        .header-bar-nav {
            display: inline;
        }

        .change-position {
            border: 1px solid rgba(179, 176, 176, 0.555);
            color: rgba(0, 0, 0, 0.61)
        }

        .position-name {
            color: rgba(0, 0, 0, 0.61)
        }

        .location {
            width: 9px;
            height: auto;
        }

        .neighborhood {
            color: rgba(22, 21, 21, 0.432);

        }

        .header-nav-first {
            display: block;
            float: right;
            text-align: center;
            margin-right: 50px;
            font-size: 12px;
        }

        .has-child {
            position: relative;
            list-style-type: none;
            display: inline-block;
            padding: 0 10px;
        }

        .header-nav-my_header-nav-second {
            position: absolute;
            display: none;
            list-style-type: none;
            right: 0;
            padding: 0 10px;
        }

        .header-nav-merchant_header-nav-second {
            position: absolute;
            display: none;
            list-style-type: none;
            right: 0;
            padding: 0 10px;
            width: 100px;

        }

        .header-nav-rules_header-nav-second {
            position: absolute;
            display: none;
            list-style-type: none;
            right: 0;
            padding: 0 10px;

        }

        .header-nav-site_header-nav-second {
            position: absolute;
            display: none;
            list-style-type: none;
            right: 0;
            padding: 0 40px;
            width: 1100px;
            height: 300px;

        }

        .has-child:nth-child(1):hover .header-nav-my_header-nav-second {
            display: block;
        }

        .has-child:nth-child(3):hover .header-nav-merchant_header-nav-second {
            display: block;

        }

        .has-child:nth-child(4):hover .header-nav-rules_header-nav-second {
            display: block;

        }

        .has-child:nth-child(5):hover .header-nav-site_header-nav-second {
            display: block;
        }

        .has-child:not(:nth-child(2)):hover,
        .has-child:not(:nth-child(2)):hover ul,
        .has-child:not(:nth-child(2)):hover div {
            background-color: white;
            box-shadow: 0 0 2px rgba(22, 21, 21, 0.432);
        }

        a:hover {
            color: coral;
            cursor: pointer;
        }

        .header-nav-jiulv_header-nav-third,
        .header-nav-food-nav-third,
        .header-nav-movie-nav-third,
        .header-nav-mobile_app-nav-third {
            float: left;
            text-align: center;
            margin: 20px;
        }

        .header-nav-jiulv_header-nav-third {
            width: 250px;
        }

        .header-nav-jiulv_header-nav-third dd{
            width: 60px;
        }

        .header-nav-food-nav-third {
            width: 140px;
        }
       
        .header-nav-food-nav-third dd{
            width: 48px;
        }

        .header-nav-movie-nav-third {
            width: 110px;
        }
        
        .header-nav-movie-nav-third dd{
            width: 84px;
        }

        .header-nav-mobile_app-nav-third dt,
        .header-nav-jiulv_header-nav-third dt,
        .header-nav-food-nav-third dt,
        .header-nav-movie-nav-third dt
        {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .header-nav-mobile_app-nav-third {
            width: 400px;
        }

        .app-icon{
            width:60px;
        }

        dd {
            float: left;
            margin: 5px 10px;
            text-align: center;
            line-height: 15px;
        }

    </style>
</head>

<body>
    <div class="header-bar">

        <div class="header-bar-position">
            <span class="position-name">
                <image class="location" src="location_map_navigation1.png"></image>
                西安
                <a class="change-position" href="https://www.meituan.com/changecity/">切换城市</a>
            </span>
            <span class="neighborhood">[&nbsp;<a href="https://xianyang.meituan.com/">咸阳</a>&nbsp;&nbsp;<a
                    href="https://gaoling.meituan.com/">高陵</a>&nbsp;&nbsp;<a
                    href="https://jingyangxian.meituan.com/">泾阳县</a>&nbsp;]</span>
        </div>

        <div class="user-entry"><a class="login"
                href="https://passport.meituan.com/account/unitivelogin?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttps%253A%252F%252Fjingyangxian.meituan.com%252F"
                target="_blank">立即登录</a>&nbsp;&nbsp;
            <a href="https://passport.meituan.com/account/unitivesignup?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttps%253A%252F%252Fjingyangxian.meituan.com%252F"
                target="_blank">注册</a>
        </div>

        <nav class="header-bar-nav">
            <ul class="header-nav-first">
                <li class="has-child">
                    <a href="https://passport.meituan.com/account/unitivelogin?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Faccount%252Fuserinfo%252F"
                        target="_blank">
                        我的美团
                        <ul class="header-nav-my_header-nav-second">
                            <li><a href="https://passport.meituan.com/account/unitivelogin?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Forders%252F"
                                    target="_blank">
                                    我的订单</a></li>
                            <li><a href="https://passport.meituan.com/account/unitivelogin?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Fcollections%252F"
                                    target="_blank">
                                    我的收藏</a></li>
                            <li><a href="https://passport.meituan.com/account/unitivelogin?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Fvouchers%252F"
                                    target="_blank">
                                    抵用券</a></li>
                            <li><a href="https://passport.meituan.com/account/unitivelogin?service=www&continue=https%3A%2F%2Fwww.meituan.com%2Faccount%2Fsettoken%3Fcontinue%3Dhttp%253A%252F%252Fwww.meituan.com%252Faccount%252Fsettings"
                                    target="_blank">
                                    账户设置</a></li>
                        </ul>
                    </a>
                </li>

                <li class="has-child"><a href="https://i.meituan.com/mobile/down/meituan" target="_blank">手机APP
                    </a>
                </li>

                <li class="has-child"><a>商家中心
                        <ul class="header-nav-merchant_header-nav-second">
                            <li><a href="https://e.meituan.com/meishi/epassport/login?service=com.sankuai.meishi.fe.ecom&continue=https%3A%2F%2Fe.meituan.com%2Fmeishi%2Fepassport%2Ftoken%3Ftarget%3Dhttps%253A%252F%252Fe.meituan.com%252Fmeishi%252F"
                                    target="_blank">登录商家中心</a></li>
                            <li><a href="https://rms.meituan.com/?utm_source=inner&utm_medium=mtpcsjzx"
                                    target="_blank">美团智能收银</a></li>
                            <li><a href="https://bizvisualmeishi.meituan.com/bizsettle/settle/merchantsSettle?utm_source=mt_C_my"
                                    target="_blank">我想合作</a></li>
                            <li><a href="https://e.meituan.com/mobile/" target="_blank">手机免费开店</a></li>
                            <li><a href="https://daili.meituan.com/?comeFrom=mtwebMenu" target="_blank">餐饮代理商招募</a></li>
                            <li><a href="https://pc.meituan.com/?activity_code=mtpcdh" target="_blank">商家申请开票</a></li>
                            <li><a href="https://paidui.meituan.com/?activity_code=168_00038141"
                                    target="_blank">免费合作美团排队</a></li>
                        </ul>
                    </a>
                </li>

                <li class="has-child"><a>美团规则
                        <ul class="header-nav-rules_header-nav-second">
                            <li><a href="https://rules-center.meituan.com" target="_blank">规则中心</a></li>
                            <li><a href="https://rules-center.meituan.com/rules" target="_blank">规则目录</a></li>
                            <li><a href="https://rules-center.meituan.com/advices" target="_blank">规则评议院</a></li>
                        </ul>
                    </a>
                </li>
                
                <li class="has-child"><a>网站导航</a>
                    <div class="header-nav-site_header-nav-second">
                        <dl class="header-nav-jiulv_header-nav-third">
                            <dt>酒店旅游</dt>
                            <dd><a href="" target="_blank">国际机票</a></dd>
                            <dd><a href="" target="_blank">火车票</a></dd>
                            <dd><a href="" target="_blank">榛果民俗</a></dd>
                            <dd><a href="" target="_blank">经济型酒店</a></dd>
                            <dd><a href="" target="_blank">主题酒店</a></dd>
                            <dd><a href="" target="_blank">商务酒店</a></dd>
                            <dd><a href="" target="_blank">公寓</a></dd>
                            <dd><a href="" target="_blank">豪华酒店</a></dd>
                            <dd><a href="" target="_blank">客栈</a></dd>
                            <dd><a href="" target="_blank">青年旅舍</a></dd>
                            <dd><a href="" target="_blank">度假酒店</a></dd>
                            <dd><a href="" target="_blank">别墅</a></dd>
                            <dd><a href="" target="_blank">农家院</a></dd>
                        </dl>
                        <dl class="header-nav-food-nav-third">
                            <dt>吃美食</dt>
                            <dd><a href="" target="_blank">烤鱼</a></dd>
                            <dd><a href="" target="_blank">特色小吃</a></dd>
                            <dd><a href="" target="_blank">烧烤</a></dd>
                            <dd><a href="" target="_blank">自助餐</a></dd>
                            <dd><a href="" target="_blank">火锅</a></dd>
                            <dd><a href="" target="_blank">代金券</a></dd>
                        </dl>
                        <dl class="header-nav-movie-nav-third">
                            <dt>看电影</dt>
                            <dd><a href="" target="_blank">热映电影</a></dd>
                            <dd><a href="" target="_blank">热门影院</a></dd>
                            <dd><a href="" target="_blank">热映电影口碑榜</a></dd>
                            <dd><a href="" target="_blank">最受期待电影</a></dd>
                            <dd><a href="" target="_blank">国内票房榜</a></dd>
                            <dd><a href="" target="_blank">北美票房榜</a></dd>
                            <dd><a href="" target="_blank">电影排行榜</a></dd>
                        </dl>
                        <dl class="header-nav-mobile_app-nav-third">
                            <dt >手机应用</dt>
                            <dd><a href="https://i.meituan.com/mobile/down/meituan" target="_blank"><image class="app-icon" src="mtAPP.png"></image></a></dd>
                            <dd><a href="https://waimai.meituan.com/mobile/download/default" target="_blank"><image class="app-icon" src="mtwmAPP.png"></image></a></dd>
                            <dd><a href="https://phoenix.meituan.com/app/" target="_blank"><image class="app-icon" src="zgAPP.png"></image></a></dd>
                            <dd><a href="https://www.dianping.com/app/download" target="_blank"><image class="app-icon" src="dzdpAPP.png"></image></a></dd>
                            <dd><a href="https://maoyan.com/app" target="_blank"><image class="app-icon" src="myAPP.png"></image></a></dd>
                        </dl>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</body>

</html>

部分链接就不一一插入了，和美团官网的导航栏相似度接近98%。
实现图：
官方网站
实现图
后续要是有完善，会持续更新的呦！

EIERICA
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序---美团顶部搜索框&菜单
03-29
1.美团顶部搜索框 (此图片来源于网络，如有侵权，请联系删除! ) // 定位 toNearby: function () { var that = this // 1.查看接口是否可用 wx.getSetting({ success(res) { if (!res['userLocation']) { // 2....
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
11-21
本示例将介绍如何利用HTML、CSS和jQuery来实现一个左侧滑动拉伸的导航菜单栏。 首先，HTML结构是基础。在提供的代码中，可以看到`<body>`内有两个主要的`<div>`元素：一个用于头部（`#header`），另一个用于左侧...
【2021-01-11】JS逆向之美团模拟登入
骑毛驴的猴的博客
01-12 5564
声明：本文只作学习研究，禁止用于非法用途，否则后果自负，如有侵权，请告知删除，谢谢！ 文章目录前言一、页面分析三、参数破解3.1 h5Fingerprint解密3.2 password解密总结 前言 又是好久没写文章了，上周在肝易盾的验证码，发现自己还是不太行，需要继续学习呀。 这篇给大家带来的是美团登入接口的加密破解，是一个RSA类型的加密。 网站：https://passport.meituan.com/account/unitivelogin 一、页面分析 进入网页后随便输入账号密码，找到登
美团App首页实现之Category_HeaderView可翻页实现
weixin_34179762的博客
06-26 209
一。主要实现功能： 自定义indicator，侧滑页面切换页面内容，indicator跟着变化；二。实现步奏： 1.自定义ViewPagerIndicator ①：定义三个不同颜色的画笔 ②：在画布上画三个静态圆 ③：改变CX值使indicator居中 ...
美团网官网最新底部导航页面制作及CSS样式设计
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
06-09 2603
目的： 实现美团网站底部的导航页面的设计 设计思路： 整体一个div-1 整体可分为上下两部分：上为——浅绿色背景；下为选项及选项内容 上部分的左侧设置一个div，存放美团导航文字内容 使用ul>li无序列表存放每个选项：热门城市、热门分类、周边热门 其中每个<li>包括左侧的文本以及右侧的展开选项。 右侧展开选项设置为两个<ul>无序列表。 具体...
美团自定义导航栏思路以及代码
weixin_30887919的博客
03-10 261
一.右边两个图标：直接添加两个UIBarButtonItem，其中各自添加UIButton，然后再设置button的图片，为了方便，使用分类自定义，UIBarButtonItem+DQCategory.h 二.左边加四个UIBarButtonItem，其中各自添加自定义的view，设置好xib的宽高，连个lable，一个按钮button，按钮应该覆盖整个区域以确保整个xib点击都有效果，然后...
短信验证码URL收集
热门推荐
while(1) { smile(); }
11-27 1万+
https://my.zto.com/account/register http://ec.yto.net.cn/register.htm http://q1.sto.cn/reg/registerform https://ssl.zc.qq.com/chs/index.html https://mail.sina.com.cn/register/regmail.php http://me
html+css+js制作美团官网
12-05
在制作美团官网的过程中，HTML将被用来构建页面的骨架，包括导航栏、商品分类、推荐信息、用户评价等各个部分。例如，`<header>`定义头部区域，`<nav>`构建导航菜单，`<section>`划分内容区块，`<article>`表示具体...
美团主界面
12-06
2. **网页框架**：框架是网页设计的基础结构，包括页面布局、导航栏、主要内容区域等部分，它为网页内容的填充提供了一个基本模板。这里的“只是框架”意味着只完成了基本的页面结构设计，但具体的内容（如图片、...
vue仿美团简单案例
05-10
2. **组件（components）**：Vue应用的核心是组件化，每个组件都代表网页的一个独立部分，如头部导航、侧边栏、内容区域等。在这个案例中，可能会有`Menu.vue`、`Search.vue`、`Category.vue`等组件，分别代表菜单、...
实现美团网的导航功能
09-23
实现美团网的导航功能并且能重用ListView的Item 不好意思了，实在是没有下载积分了，要一个积分。如果实在没有积分的朋友私信我一下，我要是看到的话传给你们。但是有积分就下一下，评论完，会返还一个积分的。谢谢了
仿美团饿了点餐页面框架
08-07
仿照美团饿了么点餐界面编写的框架，html+css+jq的简单代码
超高仿美团微信小程序
01-28
1，实现的需求 1）首页：标题栏获取用户当前位置，使用腾讯api实现定位，不用弹窗出现用户授权， 进入首页，获取附近商铺的列表 轮播图： 导航栏： （1）向后台发送请求来获取展示的商铺列表，综合排序，筛选实现根据用户 条件请求数据 （2）导航栏出现偏移 商铺列表： （1）带参跳转店铺 网络中断情况： 新页面提示没网，可点击刷新 2）店铺：根据店铺id获取店铺相关信息 头部：动态显示店铺的相关优惠 导航：分别切换菜单，评价，商家 菜单： 商品列表展示：左右联动，动态出现添加数量以及按钮 商品详情展示：弹窗卡片，展示详情，可动态出现添加数量以及按钮 购物车：展示添加进购物车的商品信息，清空结算，计算合价，差多少配送， 结算：（未实现），跳转支付，传后台购物车数据，用户信息，当前时间等订单 需求信息 评价：根据店铺id获取店铺的所有评价list展示 商家：展示商家优惠信息，需求（呼叫商家，查看食品安全档案） 3）订单 全部订单：根据用户信息获取相关全部订单，实现详情，再来一点（需要根据店铺 id） 待评价：需求：实现评价功能（提交：店铺id，评价信息） 退款：评价，详情 4）个人 用户信息展示： 登录： 未登录：（登录，注册实现） 用户地址： 管理地址：添加新地址，编辑地址（地址id，用户id） 客服中心：接入客服（公众号后台可设置客服人员） 退出账号：清空本地用户信息
仿美团头部筛选效果
07-12
仿美团多头部菜单栏切换筛选效果
JsRender+ajax的使用helloword案例
qq_34787830的博客
03-31 910
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt; &lt;head&gt;  &lt;title&gt; New Document &lt;/title&gt;  &lt;meta http-
自定义美团的导航栏
Manjusaka的专栏
07-15 1773
自定义美团的导航栏 1.自定义navigationItem，在xib中自定义navigationItem的样式 2.项目使用MVC编程模式 创建两个模型： 商品分类模型 CategoryModel@interface CategoryModel : NSObject#pragma mark - 声明属性 //图标 @property (copy,nonatomic)NSString *
模仿美团导航栏分类布局
weixin_34247299的博客
10-26 1219
2019独角兽企业重金招聘Python工程师标准>>> ...
仿美团外卖底部导航栏动画
tm1989tm的博客
11-27 4724
体验了一下美团外卖的底部导航栏，感觉动画很流畅，分割线被顶起，还有图标的动画，可能用的lottie，觉得分割线被顶起可以自己写动画，所以试着写了一下 。 想自定义view点击实现动画效果，自定义view的区域一定比背景需要被顶起的线要高，所以布局如下： 开始绘制view，被顶起的曲线分三段，前后两端曲线对称的，用path绘制曲线，中间段绘制贝塞尔曲线。 那么我们分别绘制三段曲线，...
android仿美团底部导航栏的点击效果——揭露动画
silence_jjj的专栏
07-18 1万+
又是划水的一天好开心，无聊逛了逛美团，喜欢上美团底部导航栏的点击效果。感觉在哪里见过，又想不起来，后来一波百度，发现就是安卓5.0的揭露动画createCircularReveal。什么事揭露动画，参考http://www.itdadao.com/articles/c15a1442955p0.html。 看到没，大概就是这种动画效果，用的好的话，这种效果其实会很可爱。于是，我快速的加入新建demo
uniapp自定义头部导航栏
最新发布
03-20
在UniApp中，可以通过自定义头部导航栏来实现个性化的界面设计。 要自定义UniApp的头部导航栏，可以按照以下步骤进行操作： 1. 在pages.json文件中配置导航栏样式： 在pages.json文件中，可以为每个页面配置导航栏...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值