h5 导航栏左后滑动

素颜马尾好姑娘i 2023-03-14 13:20 5阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .maincate {
                width: 100%;
                height: 50px;
                line-height: 50px;
                white-space: nowrap;
                box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
                overflow-x: scroll;
                overflow-y: hidden;
                -webkit-backface-visibility: hidden;
                -webkit-perspective: 1000;
                -webkit-overflow-scrolling: touch;
                text-align: justify;
                background: #f78361;
                padding: 0px 5px;
                box-sizing: border-box;
            }
    
            .maincate a {
                color: #fff;
                text-decoration: none;
                margin-right: 10px;
            }
    
            .maincate::-webkit-scrollbar {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="maincate" class="maincate">
            <a href="#">首页</a>
            <a href="#">SuperMap</a>
            <a href="#">三维GIS</a>
            <a href="#">移动GIS</a>
            <a href="#">云GIS</a>
            <a href="#">二三维一体化</a>
            <a href="#">大数据GIS</a>
            <a href="#">大数据GIS</a>
            <a href="#">大数据GIS</a>
            <a href="#">大数据GIS</a>
        </div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5 导航栏左后滑动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

素颜马尾好姑娘i/ 2023年03月14日 13:20/ 0 赞/ 6 阅读

相关滑动导航栏效果 html+css+js

一.先看效果（完整代码在最后）： ![在这里插入图片描述][20210501193422872.gif_pic_center] 实现并不难，但是初学 js 时拿来练手

超、凢脫俗/ 2023年01月18日 06:47/ 0 赞/ 163 阅读

相关 uni-app带滑动条的导航栏

先放实现效果图： > ![实现效果图][20210316110547509.gif_pic_center] 结构： <scroll-view scroll-x c

超、凢脫俗/ 2022年11月10日 03:46/ 0 赞/ 230 阅读

相关 Web前端——原生H5+CSS+JS导航栏实现

H5标签 <nav class="nav_bar"> <ul class="nav_ul"> <li class="nav_btns_norma

我不是女神ヾ/ 2022年11月07日 13:26/ 0 赞/ 200 阅读

相关 html5 导航栏置顶,html5导航栏横向

html5中怎么样让导航条完全的横向100%显示，附图你里面是不是还有内嵌标签设置了宽度。请注意以下几点一：只能用HTML5 + CSS 二：要保证在不同页面跳转的时候

小灰灰/ 2022年10月05日 10:51/ 0 赞/ 250 阅读

相关 html5--导航栏制作

效果展示： ![Center][] 效果介绍：通过鼠标点击，点到哪个导航栏会显示不同的颜色与其内容如何实现：（前提必须引进自己的jquery.js我这里的是jq.j

「爱情、让人受尽委屈。」/ 2022年09月24日 05:17/ 0 赞/ 227 阅读

相关让具有导航栏的界面滑动返回

遵守协议 <UIGestureRecognizerDelegate> 在viewdidload中实现以下方法 id target = self.navig

不念不忘少年蓝@/ 2022年08月20日 02:30/ 0 赞/ 196 阅读

相关 jquery 实现导航栏滑动效果

原文：[http://www.cnblogs.com/WebMobile/p/3926921.html][http_www.cnblogs.com_WebMobile_p_39

向右看齐/ 2022年08月11日 06:28/ 0 赞/ 278 阅读

相关 android——顶部导航栏滑动变换背景色

效果图： ![Center][] 当鼠标向下滑动的时候，顶部导航栏会设置一个距离顶部的值进行判断，滑动的时候，当滑动距离的值大于我们设置的这个值就改变导航栏的背景颜色，当滑

清疚/ 2022年06月03日 01:40/ 0 赞/ 306 阅读

相关左中侧导航栏组件

![大笑][laugh.gif]2018.1.11 21:35pm 左中侧效果： ![Image 1][]![Image 1][]![Image 1][]![SouthEa

川长思鸟来/ 2021年10月09日 03:52/ 0 赞/ 318 阅读