手机 全屏tab栏 导航栏

最新推荐文章于 2020-01-03 11:28:13 发布
最新推荐文章于 2020-01-03 11:28:13 发布
阅读量489 收藏
点赞数
原文链接：http://www.cnblogs.com/lostu5/p/10418071.html
版权

先上两张图 点击左上角 弹出tab栏

 

 

下面是html代码

<!doctype html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>导航</title>
        <link rel="stylesheet" type="text/css" href="dhpstatic/css/default.css">
        <link href='dhpstatic/css/40e9811c7516418db462902abcece49e.css' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="dhpstatic/css/demo-3.css">
        <!--[if IE]>
        <script src="static/js/html5shiv.min.js"></script>
    <![endif]-->
    </head>

    <body>
            <div class="screen">
                <div class="navbar"></div>
                <div class="menu-bg"></div>
                <div class="menu">
                    <ul class="menu-splitL">
                        <li>
                            <a href="ManagerIndex.jsp">首页</a>
                        </li>
                        <li>
                            <a href="Activities.jsp">查看活动</a>
                        </li>
                        <li>
                            <a href="WeChatSetUp.jsp">公众号设置</a>
                        </li>
                        <li>
                            <a href="DomainSetUp.jsp">域名设置</a>
                        </li>
                        <li>
                            <a href="giftSetUp.jsp">礼物设置</a>
                        </li>
                        <li>
                            <a href="EmpBonus.jsp">提成设置</a>
                        </li>
                        <li>
                            <a href="EmpBonus.jsp">退出</a>
                        </li>
                    </ul>
                    <ul class="menu-splitR">
                        <li>
                            <a href="ManagerIndex.jsp">首页</a>
                        </li>
                        <li>
                            <a href="Activities.jsp">查看活动</a>
                        </li>
                        <li>
                            <a href="WeChatSetUp.jsp">公众号设置</a>
                        </li>
                        <li>
                            <a href="DomainSetUp.jsp">域名设置</a>
                        </li>
                        <li>
                            <a href="giftSetUp.jsp">礼物设置</a>
                        </li>
                        <li>
                            <a href="EmpBonus.jsp">提成设置</a>
                        </li>
                        <li>
                            <a href="EmpBonus.jsp">退出</a>
                        </li>
                    </ul>
                </div>
                <div class="burger">
                    <div class="x"></div>
                    <div class="y"></div>
                    <div class="z"></div>
                </div>
                
            </div>
            <div class="mydiv">
                        
                        <div id="">
                            123
                        </div>
                        <div id="">
                            123
                        </div>
                        <div id="">
                            123
                        </div>
                        <div id="">
                            123
                        </div>
                        <div id="">
                            123
                        </div>
                        <div id="">
                            123
                        </div>
                        
                    </div>
        <script src="dhpstatic/js/stopexecutionontimeout.js"></script>
        <script src="dhpstatic/js/jquery.min.js"></script>
        <script src="dhpstatic/js/dhpindex.js"></script>
    </body>

</html>

css 还有其他好多东西，加起来太多了

可以去我github下载 demo

https://github.com/lostu5/phone_table

 可以加微信共同学习 LOSTU5

 

转载于:https://www.cnblogs.com/lostu5/p/10418071.html

aichuoluzc29562
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IOS界面元素四栏（状态栏、导航栏、工具栏、TAB栏）设计规范
GeekLee的博客
12-30 2万+
1.1 状态栏状态栏展示于设备和当前环境相关的重要信息。 外观和行为：状态栏总是出现在屏幕顶部，包含网络连接、时间、电量等用户需要的信息 在iPhone上，状态栏的颜色会变。而在iPad上，状态栏总是黑色的 如果你的程序不是游戏或者媒体播放器的话，隐藏状态栏前要考虑清楚 当用户全屏观看媒体时，要把状态栏藏起来 合适的话，展示网络连接情况 在iPone上，定义状态栏
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
10-09
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
手机触屏TAB菜单
newei_2008的博客
04-15 1458
现在手机网页越来越多，我们可以先看下两个地址：“http://3g.ifeng.com/”，“http://3g.163.com/touch/”，我们都会发现有一个共同的特点，就是TAB菜单，对于这种相当传统的特效，我们在之前做过许多，但在手机上，我们会发现它有新的生命力。 如果只是考虑上面的点击，那就是TAB菜单了，只不过这个TAB菜单是全屏切换的，但如果你在手机上体验，会发现，手
简单实用适应手机端的Tab菜单页面切换插件
weixin_46133151的博客
01-03 1004
jQuery tab选项卡自动切换插件是一款十分简单好用的滑动选项卡切换代码，有多种切换动画过渡方式可设置。另外，在切换tab时，tab标签的样式也很有特点，是一个凸起的弧形，给人3D立体的视觉效果。同时切换tab时背景颜色还可以自动切换 ...
全屏自适应html5手机tab标签触屏切换
01-25
全屏自适应html5手机tab标签触屏切换
jQuery全屏TAB页面切换特效代码
03-20
同时，创建一个导航栏，用于触发页面切换。 2. **CSS样式**：设置全屏容器的绝对定位，使得它们能够占据整个屏幕。使用CSS3的transition属性定义元素变换的速度和效果，如平滑滚动。 3. **jQuery绑定事件**：使用...
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
在某些特定的场景下，如登录页面或全屏展示的页面，我们可能需要隐藏导航栏以提供更好的用户体验。本文将详细讲解如何在Vue中实现某些特定路由页面隐藏导航栏的功能。 首先，Vue Router是Vue.js官方提供的路由管理...
jQuery全屏滑动TAB选项卡切换代码
06-09
在这个项目中，每个选项卡代表一个独立的内容区域，用户可以通过点击或滑动在不同的选项卡之间切换，同时导航栏上的图标能增强用户的视觉引导。 4. **图标使用**：图标可以快速传达信息并提升界面的可读性。在这个...
微信小程序中顶部导航栏的实现代码
08-30
在微信小程序中，顶部导航栏（Navbar）是一个重要的UI组件，用于展示页面标题、返回按钮以及其他操作选项。本文将详细讲解如何实现一个自定义的顶部导航栏，包括样式设计、事件处理以及动态更新。 首先，微信小程序...
Node.js-极其简便的快速实现隐藏标题栏和导航栏
08-12
标题 "Node.js-极其简便的快速实现隐藏标题栏和导航栏" 暗示了我们主要探讨的是在Node.js环境中，如何实现一个特定的UI交互功能，即在滚动时动态隐藏和显示标题栏及导航栏。尽管这个标题可能与Android开发相关，但...
zepto实现的简洁tab选项卡，实现超简单的，亲测可用
07-04
zepto实现的简洁tab选项卡，亲测可用
jquery大气的图标菜单tab选项卡切换效果代码.zip
07-11
大气选项卡切换，图标tab切换效果。jquery tab选项卡代码
手机端 可滑动切换tab选项卡
06-27
[removed] $(function() { function setCurrentSlide(ele, index) { $(".swiper1 .swiper-slide").removeClass("selected"); ele.addClass("selected"); //swiper1.initialSlide=index; } var swiper1 = new Swiper('.swiper1', { // 设置slider容器能够同时显示的slides数量(carousel模式)。 // 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。 // loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。 slidesPerView: 5.5, paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。 spaceBetween: 10,//slide之间的距离（单位px）。 freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。 loop: false,//是否可循环 onTab: function(swiper) { var n = swiper1.clickedIndex; } }); swiper1.slides.each(function(index, val) { var ele = $(this); ele.on("click", function() { setCurrentSlide(ele, index); swiper2.slideTo(index, 500, false); //mySwiper.initialSlide=index; }); }); var swiper2 = new Swiper('.swiper2', { //freeModeSticky 设置为true 滑动会自动贴合 direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。 loop: false, // effect : 'fade',//淡入 //effect : 'cube',//方块 //effect : 'coverflow',//3D流 // effect : 'flip',//3D翻转 autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。 onSlideChangeEnd: function(swiper) { //回调函数，swiper从一个slide过渡到另一个slide结束时执行。 var n = swiper.activeIndex; setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n); swiper1.slideTo(n, 500, false); } }); }); [removed]
高端大气移动端直播排行榜html5排行榜页面手机端tab选项卡换
04-08
高端大气移动端直播排行榜html5排行榜页面手机端tab选项卡换，供大家学习使用。
适配虚拟按键方案
Coder蒋的博客
04-25 1283
import android.app.Activity; import android.content.Context; import android.content.res.Resources; import android.graphics.Color; import android.graphics.Rect; import android.os.Build; import android....
uni-app项目配置手机端底部的tab栏（一）
码上言
11-06 4485
一般我们在开发手机应用的时候都会有手机底部的tab导航栏，然而我们在使用uni-app开发的时候，我们可以直接在项目中配置tab即可，非常的方便。 1、创建项目 我们用uni-app官方提供的HBuilder X工具来创建项目，可在官网上下载HBuilder X工具， 下载好之后，不需要安装，直接运行即可。我们找到文件进行创建项目： 创...
移动端可滑动的tab栏
qq_24906761的博客
11-12 1240
自行下载swiper还有移动端的公共样式 css .container { background-color: #fff; margin-bottom: .05rem; } .swiper1 { width: 100%; } .swiper1 .selected { color: #2d81ff; } .swiper-slide { ...
导航栏、tab类图
中国架构师的博客
11-23 639
如何实现导航栏下面的全屏banner图？
最新发布
05-31
实现导航栏下面的全屏banner图可以使用CSS的background属性设置背景图片，并将其设置为全屏显示。 具体步骤如下： 1. 在HTML文件中添加一个div元素作为banner区域，设置其宽度为100%。 ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值