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. Bzoj索引

    1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...

  2. ASP.NET常用函数(参考用)

    Abs(number) 取得数值的绝对值. Asc(String) 取得字符串表达式的第一个字符ASCII 码. Atn(number) 取得一个角度的反正切值. CallByName (object ...

  3. 关于git 操作

    一. Git 命令初识 在正式介绍Git命令之前,先介绍一下Git 的基本命令和操作,对Git命令有一个总体的认识 示例:从Git 版本库的初始化,通常有两种方式: 1)git clone:这是一种较 ...

  4. MAC解决端口占用

    1.前言 启用goagent.firefly等服务的时候,如果非正常退出,再次启动经常会遇到address already in use,端口被先前启动的服务进程所占用,导致服务无法使用.这种情况,可 ...

  5. PHP 监控服务器动态

    预期准备 一个139邮箱,收到邮件后,可以免费给你短信提醒.如果你不需要短信提醒功能,用什么邮箱都可以 另外一个可以运行PHP文件的Web服务器(相当于监控服务器),现在免费的PHP网站空间很多,上网 ...

  6. Huffman编码(测试源代码)

    1.此程序为c++程序 2.以下代码可实现手动输入,即去掉代码中的/*...*/注释符,并同时去掉赋值代码段 3.源代码 #include<iostream> using namespac ...

  7. linux 下 C语言显示中文

    例如:tset.c int main() { printf("你好,世界\n"); retuen 0; } 编译时应该这样: iconv -f gb2312 -t utf8 tes ...

  8. jQuery:cookie插件的使用

    Jquery插件就是在Jquery基础之上,开发的基于Jquery的javascript库. 在Jquery中,引入cookie插件后,可以很方便的定义某个cookie的名称,并设置cookie值.通 ...

  9. C语言拾遗

    1. 没C++那么恶心的const C语言中的const修饰符用于修饰一个变量是const属性的.被C语言的const修饰的变量具有只读属性,并且不能被修改. const修饰的变量 != 常量,con ...

  10. bootstrapCDN和本地化

    因为公司网络环境较差和自己是菜鸟的原因,很简单的事情折腾了不少时间.测试开发的网页时候 更新速度总是很慢,这跟使用bootstrapCDN有关系,因为每次更新,它都要重新访问cdn.bootstrap ...