首页 > 其他分享 >html5从响应式导航开始

html5从响应式导航开始

时间:2023-04-05 12:02:43浏览次数:51  
标签:响应 margin width nav html5 item 导航 display left


常用的一个响应式网页导航条解决方案,整理记录。

效果展示入口:https://shanhubei.github.io/navigationh5/

html结构和js代码都很简单,主要是css样式。

直接粘上来的代码有点乱。最下面有demo的下载地址,可以下载看整理过的代码。

主要的css知识点有:
@media screen and (max-width:1279px) {} (媒体查询)
transition: all .4s; (css3过渡属性)
transform: translateY(34px); (transform:控制元素的2D或3D转换, translateY:Y 轴偏移)
transform: rotate(-45deg); ( rotate: 2D 旋转)

html代码:

<div class="menu_open">
    <i></i>
    <i></i>
    <i></i>
</div>
<div class="nav">
    <ul class="nav_ul clearfix">
        <li class="nav_item active"><a href="###">首页</a></li>
        <li class="nav_item"><a href="javascript:;">公司简介</a><i></i>
            <ul class="nav_item_open">
                <li class="subopen"><a href="javascript:;">公司简介</a></li>
                <li class="nav_item2"><a href="###">公司简介</a></li>
                <li class="nav_item2"><a href="###">组织架构</a></li>
                <li class="nav_item2"><a href="###">服务流程</a></li>
            </ul>
        </li>
        <li class="nav_item "><a href="javascript:;">新闻动态</a><i></i>
            <ul class="nav_item_open">
                <li class="subopen"><a href="javascript:;">新闻动态</a></li>
                <li class="nav_item2"><a href="###">公司动态</a></li>
                <li class="nav_item2"><a href="###">行业动态</a></li>
            </ul>
        </li>
        <li class="nav_item"><a href="###">产品中心</a><i></i>
            <ul class="nav_item_open">
                <li class="subopen"><a href="javascript:;">产品中心</a></li>
                <li class="nav_item2"><a href="###">产品一</a></li>
                <li class="nav_item2"><a href="###">产品二</a></li>
                <li class="nav_item2"><a href="###">产品三</a></li>
                <li class="nav_item2"><a href="###">产品四</a></li>
                <li class="nav_item2"><a href="###">产品五</a></li>
                <li class="nav_item2"><a href="###">产品六</a></li>
                <li class="nav_item2"><a href="###">产品七</a></li>
            </ul>
        </li>
        <li class="nav_item"><a href="###">成功案例</a></li>
        <li class="nav_item"><a href="###">荣誉资质</a></li>
        <li class="nav_item"><a href="###">联系我们</a></li>
    </ul>
</div>
<div class="hcover"></div>

css 代码:

/* s-初始化公共样式 */
body, html { font-size: 12px; font-family: 'Microsoft YaHei'; margin: 0; padding: 0; }
ul, ol { padding: 0; margin: 0; }
li { list-style-type: none; padding: 0; margin: 0; }
a { background: transparent; text-decoration: none; padding: 0; margin: 0; color: #666666; }
h1, h2, h3, h4, h5, h6, dt, dd, dl { font-size: 12px; margin: 0; padding: 0; font-weight: normal; }
em, i { font-style: normal; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix { display: block; }
.clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }
/* e-初始化公共样式 */

/* s-nav */
.nav { width: 1200px; height: 50px; margin: 0 auto; }
.nav_item { float: left; position: relative; }
.nav_item > a { display: block; padding: 0 15px; line-height: 50px; font-size: 16px; color: #333; -webkit-transition: all .4s; transition: all .4s; }

.menu_open { display: none; }

@media screen and (min-width:1001px) {
    .nav_item.active > a { color: #00a2e7; }
    .nav_item:hover > a { color: #00a2e7; }
}

.nav_item_open { min-width: 110px; height: auto; position: absolute; left: 0; top: 100%; z-index: 10; box-shadow: 0 4px 15px 0 rgba(0, 12, 49, 0.5); background: #fff; border-radius: 4px; opacity: 0; visibility: hidden; -webkit-transform: translateY(34px); transform: translateY(34px); -webkit-transition: all .4s; transition: all .4s; overflow: hidden; }
.nav_item:hover .nav_item_open { visibility: visible; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
.subopen { display: none; }
.nav_item2 { width: 100%; line-height: 40px; }
.nav_item2 a { display: block; padding: 0 20px; font-size: 14px; white-space: nowrap; text-align: left; }
.nav_item2:hover a { background: #00a2e7; color: #fff; }
.hcover { display: none; }

@media screen and (max-width:1279px) {
    .nav_item > a { font-size: 15px; }
}

@media screen and (max-width:1023px) {
    .nav_item > a { font-size: 14px; }
}

@media screen and (max-width:1000px) {
    .menu_open { display: block; float: right; width: 24px; height: 20px; margin-top: 35px; margin-right: 3%; }
    .menu_open i { height: 2px; width: 100%; background: #000; display: block; margin-bottom: 7px; }
    .nav { width: 50%; height: 100%; position: fixed; top: 0; left: -50%; z-index: 100; overflow: hidden; background: #333; color: rgba(255, 255, 255, .6); }
    .hcover { display: block; width: 50%; height: 100%; background: rgba(0, 0, 0, .6); position: fixed; right: -50%; top: 0; z-index: 101; }
    .nav_ul { margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow-x: hidden; overflow-y: auto; padding-top: 20px; text-align: left; }
    .nav_item { float: none; margin: 0; width: 100%; }
    .nav_item:after { content: ''; display: block; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, .15); margin-left: 20px; }
    .nav_item > a { display: block; margin: 0; font-size: 14px; line-height: 1.8; color: inherit; padding: 10px 10px 10px 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-right: 40px; }
    .nav_item i { position: absolute; z-index: 2; top: 0; right: 0; width: 40px; height: 100%; }
    .nav_item i:before { content: ''; display: block; height: 100%; border-left: 1px solid rgba(0, 0, 0, .15); position: absolute; top: 0; left: 0; }
    .nav_item i:after { content: ''; display: block; width: 7px; height: 7px; margin-bottom: -5px; border: 2px solid rgba(255, 255, 255, .3); border-top: 0; border-left: 0; position: absolute; bottom: 50%; right: 18px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    .nav_item_open { width: 50%; height: 100%; margin: 0; box-shadow: none; background: #333; border-radius: 0; opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); position: fixed; left: -50%; top: 0; }
    .subopen { display: block; }
    .subopen a { display: block; overflow: hidden; margin: 0; padding: 30px 10px 10px 20px; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .1); text-indent: 20px; position: relative; }
    .subopen a:before { content: ''; display: block; width: 7px; height: 7px; position: absolute; bottom: 50%; left: 22px; margin-bottom: -15px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: 2px solid rgba(255, 255, 255, .3); border-right: 0; border-bottom: 0; }
    .nav_item2 { position: relative; }
    .nav_item2 a { display: block; overflow: hidden; margin: 0; line-height: 1.8; padding: 10px 10px 10px 20px; white-space: nowrap; text-overflow: ellipsis; color: inherit; }
    .nav_item2:after { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; display: block; border-bottom-width: 1px; border-bottom-style: solid; border-bottom: 1px solid rgba(0, 0, 0, .15); margin-left: 20px; }
}
/* e-nav */

js代码

$(function () {
    $(".menu_open").click(function () {
        $(".nav").animate({ 'left': '0' }, 400);
        $(".hcover").animate({ 'right': '0' }, 400);
    });
    $(".hcover").click(function () {
        $(this).animate({ 'right': '-50%' }, 400);
        $(".nav").animate({ 'left': '-50%' }, 400);
        $(".nav_ul").animate({ 'left': '0' }, 400);
        $('.nav_item_open').css('left', '-50%');
    });
    $(".nav_item i").click(function () {
        $(".nav_ul").animate({ 'left': '-100%' }, 400);
        $(this).next('.nav_item_open').css('left', '0');
    });
    $(".subopen").click(function () {
        $(this).parent('.nav_item_open').css('left', '-50%');
        $(".nav_ul").animate({ 'left': '0' }, 400);
    });

注意:
1.在head添加:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.引入jQuery:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

下载地址:
https://github.com/shanhubei/navigationh5/

标签:响应,margin,width,nav,html5,item,导航,display,left
From: https://blog.51cto.com/u_15967457/6170538

相关文章

  • 火狐主页被360导航劫持怎么办
    一直都是火狐的忠实粉丝,但是最近不知道怎么就出现了打开火狐就弹出360主页的情况,实在恶心到我了。关键是我的电脑从来都没使用过360!!这是因为某些应用捆绑了360,但是没写360在上面,真是要喷血。今天教大家一些简单实用的方法。解决方案一:进行主页修复,重设火狐主页,详情请访问:http:/......
  • flask:cbv源码分析、模板语法、请求与响应、session及源码分析、闪现(flash)、请求扩展
    目录一、cbv源码分析1.1基于类的视图写法1.2源码分析1.3分析源码,查找不传别名的时候为什么函数名会变成别名1.4flask的路由注册使用装饰器,如果写了一个登录认证装饰器,那么应该放在路由装饰器上还是下?1.5dispatch_request讲解1.6知识点总结二、模板语法2.1py2.2html三、请......
  • flask框架02 cbv分析 模板 请求与响应 session 闪现 请求拓展
    今日内容详细目录今日内容详细1cbv分析1.1源码分析2模板2.1py文件2.2html页面3请求与响应4session及源码分析4.1session的使用4.2源码分析5闪现6请求拓展1cbv分析#基于类的视图,写法fromflaskimportFlask,requestfromflask.viewsimportView,MethodView......
  • cbv分析、模板、请求与响应、session及源码分析、闪现、请求扩展
    cbv分析#基于类的视图,写法fromflaskimportFlask,requestfromflask.viewsimportView,MethodViewapp=Flask(__name__)app.debug=True#视图类,继承MethodView,类中写跟请求方式同名的方法即可,之前学的所有都一致classIndexView(MethodView):defget(s......
  • SpringWebFlux~webclient响应式HttpClient
    1.webClientSpringWebFlux包括WebClient对Http请求的响应式,非阻塞。WebClient实例创建方式:1.1通过静态工厂方法创建响应式WebClient实例WebClient.create()WebClient.create(StringbaseUrl)packagecom.crazymaker.springcloud.reactive.rpc.mock;importorg.......
  • flask,cbv分析,模板,请求与响应,session及源码分析,闪现,请求扩展
    内容回顾web框架同步框架django:大而全,有很多内置的app,还有很多第三方appflask:小而精异步框架santic:异步faskapi异步flask框架wsgirefwerkzeug登录小案例注册路由app.router(路径,methods=[请求方式])新手四件套render_template渲染模板根django有区别redirec......
  • springboot请求响应
    springboot请求响应1.什么是请求?响应?请求:获取请求数据响应:设置响应数据2.原始方法获取请求数据Controller方法形参中声明HttpServletRequest对象调用对象的getParameter(参数名)这种方式复杂繁琐//@RequestMapping("/simpleParam")//原始方式//创建请求对......
  • Prism 中区域、模块化、导航功能、对话服务、发布订阅的简单使用
    本文演示了Prism框架在WPF编程中的几个基本功能环境:VisualStudio2022内容介绍Prism几个基本功能,包括区域、模块化、导航功能、对话服务、发布订阅区域可以在XMAL中定义某ContentControl为Prism的区域,并在App中注册模块://这个区域的名字为ContentRegion......
  • Flask快速入门day02(1、CBV使用及源码分析,2、模板用法,3、请求与响应的基本用法,4、sessi
    目录Flask框架一、CBV分析1、CBV编写视图类方法二、CBV源码分析1、CBV源码问题2、补充问题3、总结三、模板1、py文件2、html页面四、请求与响应1、request常用方法2、response常用方法五、session及源码分析1、session的基本使用2、session源码分析六、闪现七、请求扩展Flask框......
  • flask CBV写法/中间件/异常捕获/请求与响应/session/请求扩展
    flaskcbv写法基于类的视图写法fromflaskimportFlask,requestfromflask.viewsimportMethodView,Viewapp=Flask(__name__)app.debug=True#必须要继承MethodView这个类来编写classLoginView(MethodView):defget(self):print(request.method)......