css代码：

.kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;background-color: #fff;border-bottom: 1px solid #ccc;}

.kch_nav_cont{width: 80%;right: 0px; left: 0px;top:0;position: inherit;margin: 0 auto;}

.kch_nav_logo{width: 100%;float: left;position: relative;z-index: 1000;}

.kch_nav_logo>a>img{margin-top: 0px; margin-left: 0px;padding-top: 8px; padding-bottom: 8px;}

.kch_nav_menu{width: 100%;text-align: right;position: absolute;z-index: 1001;display: block}

.kch_nav_menu>ul{margin-bottom: 0px;}

.kch_nav_menu ul>li{display: inline}

.kch_nav_menu>ul>li{height: 69px;line-height: 69px;}

.kch_nav_menu a{ color: #111; font-size: 1.25em; padding: 21px 25px; text-decoration: none;}

.kch_nav_menu>ul>li>a:hover{color: #42AF41;border-bottom: 3px solid #42AF41;}

.active>a{color: #42AF41;border-bottom: 3px solid #42AF41;}

.mainMenu{display: none}

@media (max-width: 980px) {

    .kch_nav_cont{ width: 95%; }

}

@media (max-width: 768px) {

    .kch_nav_cont{ width: 100%;}

    .kch_nav_menu a{ font-size: 1em; padding: 21px 15px;}

}

@media (max-width: 550px) {

    .kch_nav{height: 55px;}

    .kch_nav_cont{  width: 100%;  }

    .kch_nav_logo>a>img{height: 55px; margin-left: 45px;padding-top: 4px; padding-bottom: 4px;}

    .kch_nav_menu ul{padding-left: 0px;}

    .kch_nav_menu a{ font-size: 1em; padding: 21px 15px;}

    .kch_nav_menu{width: 50%;text-align:center; right:0;top:55px;border: 1px solid #ccc;display: none}

    .kch_nav_menu ul>li{display: list-item;list-style: none;border-bottom: 1px solid #ccc;}

    .kch_nav_menu>ul>li{background:rgba(1,1,1,0.75);height: 45px;line-height: 45px;}

    .kch_nav_menu a{ width:100%;color: #fff; font-size: 1.25em; padding-top: 8px;padding-bottom: 8px; text-decoration: none;}

    .kch_nav_menu>ul>li>a:hover{color: #42AF41;border-bottom: 0px solid #42AF41;width: 100%;}

    .active>a{color: #42AF41;border-bottom: 0px solid #42AF41;}

    .mainMenu{display: block;color: #42AF41;font-size:24px;float: right;width: 40px;height: 40px;border:1px solid #ccc;border-radius: 5px;line-height: 40px;text-align: center; margin-right: 45px; margin-top: 7px;}

}

html代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

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

    <meta name="keywords" content="空车汇">

    <meta name="description" content="空车汇是联冠汇通团队致力于物流行业智能化、信息化的研究而推出的移动互联网信息平台。旨在有效整合运力，对接货源，降低空驶率、节约成本、提高效率、增强信誉度，让业务智能、可视、可控，实现多方共赢">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>好运费，就上空车汇</title>

    <!-- Bootstrap -->

    <link href="assets/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="js/html5shiv.min.js"></script>

    <script src="js/respond.min.js"></script>

    <![endif]-->

    <script src="js/jquery-latest.min.js"></script>

</head>

<body>

<!--//空车汇导航条-->

<div class="kch_nav">

    <div class="kch_nav_cont">

        <div class="kch_nav_logo">

            <a href="#"><img src="data:images/logo.png"/></a>

            <a class="mainMenu" id="kchMainMenu"><i class=" glyphicon glyphicon-th-list"></i> </a>

        </div>

        <div class="kch_nav_menu">

            <ul>

                <li class="active"><a href="index.html">首页</a></li>

                <li><a href="shipper.html">货主</a></li>

                <li><a href="driver.html">车主</a></li>

                <li><a href="about.html">关于我们</a></li>

                <li><a href="properDistribute.html">交易</a></li>

                <li><a href="login.html">登陆</a></li>

            </ul>

        </div>

    </div>

</div>

<script src="js/bootstrap.min.js"></script>

<script>

    var i=1;

    $('#kchMainMenu').click(function(){

        ++i;

        if(i%2==0){

            $('.kch_nav_menu').fadeIn(500);

            $(this).css('color','#b6b6b6');

        }else{

            $('.kch_nav_menu').fadeOut(500);

            $(this).css('color','#42AF41');

        }

    })

</script>

</body>

</html>

基于Bootstrap、Jquery的自适应导航栏的更多相关文章

  1. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  2. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  3. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  4. Bootstrap响应式的导航栏

    Bootstrap 导航栏 | 菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  5. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  6. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  7. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  8. JS自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...

  9. jquery版滑块导航栏

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

随机推荐

  1. 黑马程序员——【Java高新技术】——案例：银行业务调度系统

    ---------- android培训.java培训.期待与您交流! ---------- 一.银行业务调度系统需求 Ø 银行内有6个业务窗口,1 - 4号窗口为普通窗口,5号窗口为快速窗口,6号窗 ...

  2. 支持向量机(SVM)——python3实现

    今天看完soft-margin SVM就又搜了下相关的代码,最后搜到这个,第一次看懂了SVM的实现. 关于代码中cvxopt的使用,可以看下这个简单的介绍. 这里还是将代码贴在这里,里面加了自己的一下 ...

  3. 操作各个版本的excel的链接写法

    有很有意思的网站:https://connectionstrings.com/ace-oledb-12-0/  很详细得介绍了各种写法 这里主要提两个: string strCon = @" ...

  4. Dojo

    dojo的类机制支持类声明.继承.调用父类方法等功能.dojo在底层实现上是通过操作原型链来实现其类机制的,而在实现继承时采用类式继承的方式.值得一提的是,dojo的类机制允许进行多重继承(注意,只有 ...

  5. Android中proc/meminfo的详解（原）

    今天在写到获取手机可用内存空间的总大小的时候,通过下面的方法去获取的时候,发现该方法最低支持的版本是16,这显然是不可取的. public static long getTotalSpace(Cont ...

  6. day27_反射

    1.反射-概述(掌握) 反射就是在程序运行过程中,通过.class文件动态的获取类的信息(属性,构造,方法),并调用 注意:JAVA不是动态语言,因为动态语言强调在程序运行过程中不仅能获取并调用类里面 ...

  7. Hibernate 随记(数据库映射流程)

      ORM:Object/Relationship Mapping  对象/关系映射   实现流程:   1.项目中导入Hibernate相关类包并创建配置文件.Hibernate.cfg.xml(可 ...

  8. Codeforces Round #381 (Div. 2) A B C 水 构造

    A. Alyona and copybooks time limit per test 1 second memory limit per test 256 megabytes input stand ...

  9. Java EE-Eclipse 运行Jsp项目遇到的几个问题及解决方法

    1.导入sql包错误 解决办法: 点击项目右击Properties->Java Build Path —> Libraries—>JRE System Library –> E ...

  10. 杭电acm 1002 大数模板(一)

    从杭电第一题开始A,发现做到1002就不会了,经过几天时间终于A出来了,顺便整理了一下关于大数的东西 其实这是刘汝佳老师在<算法竞赛 经典入门 第二版> 中所讲的模板,代码原封不动写上的, ...