简单实现响应式菜单

时间: 2016-03-27

分类: 代码

最终效果如上，手机端（左）、电脑端（右）

使用的jQuery，所以只要你的页面引用了一次jQuery，那么代码量真的是相当少，两三段就实现了js控制，那么，粗暴一点，直接贴代码吧。

HTML框架：

<header id="header">
    <nav class="navs">
        <a href="#" class="logo">iDevs</a>
        <div id="switch">Menu</div>
        <ul class="menu case_menu">
            <li class="current"><a href="#header">Home</a></li>
            <li><a href="#title">Service</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#maps">Contact</a></li>
        </ul>
    </nav>
</header>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#switch").click(function(){
  $(".case_menu").toggle(300);
  });
});
</script>

CSS：

#header{width:100%;height:2000px;}
#header .navs{background:#5c7;height: 80px;width: 100%;line-height:80px;}
#header .navs .logo{float:left;display: block;margin: 0 10px;color: #fff;font-size: 30px;}
#header #switch{display:none;}
#header .navs .menu{float: right;}
#header .navs .menu li{display: inline;}
#header .navs .menu li a{color: #fff;padding: 0 10px;font-size:20px;text-decoration:none;transition:.2s;}
#header .navs .menu li a:hover{text-shadow:1px 1px 1px #295}
#header .navs .menu li.current a{text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff}
@media(max-width:700px){
#header #switch{display:block;float:right;color:#fff;padding:0 10px;margin: 0 10px 0 0; font-size:20px;background:#3a5;cursor: pointer;}
#header .navs .menu{position:absolute;right:10px;top:80px;display:none;background:#3a5;height:200px;width:180px;text-align:center;}
#header .navs .menu li{line-height:50px;}
#header .navs .menu li a{display:block;font-size:16px;width:100%;padding:0}
#header .navs .menu li a:hover,#header .navs .menu li.current a{background: #295}
}

Demo效果

嗯，大概就是这样，上面代码的Demo效果如下：

自行修改代码美化吧，就不继续贴代码了。

已有 56 条评论

kaikai

2016-03-27 15:13

下载了博主的主题感觉挺不错的但我发现css里有一个拼写错误 style.css文件里第16行的的 p{fcolor:#666;} 应该是color吧，虽然不影响使用。。

回复
1. Tokin
  
  2016-03-27 15:41
  
  嗯，是的，没有注意，可能写的时候不小心敲上去了
  
  回复
刚子

2016-03-27 17:28

加了个说说插件为啥网站右上角导航直接点击进入不了说说页面的再次点击
http://www.liuxinggang.com/index.php/shuoshuo/ 谢谢

回复
1. Tokin
  
  2016-03-27 22:47
  
  不明白描述的问题
  
  回复
2. Tokin
  
  2016-03-27 22:48
  
  主题是pjax的，需要html结构一致，新的页面结构跟主题不同可能会出现你说的问题
  
  回复
3. kaikai
  
  2016-04-02 07:55
  
  如果加入了新的页面，固定链接是以.html结尾的，需要去后台设置里的固定链接那里重新保存下设置的
  
  回复
健健

2016-03-27 19:12

博主，请问您用的什么编辑器呀，每一个标题前面的色块是怎么弄上去的啊

回复
小雨

2016-03-27 22:29

不夸张的说，你现在至少已经超过北京两年以上前端工程师的水平了。

回复
1. Tokin
  
  2016-03-27 22:46
  
  你这样会让我骄傲的，而且我觉得两年也太夸张了。。
  
  回复
  1. 大发
    
    2016-03-28 11:19
    
    不要被这种不负责任的人的话误导。讲真，实习生以下水平。我说的是明星公司实习生哈，你也不用妄自菲薄，多看看基础知识。
    
    回复
    
    Tokin
    
    2016-03-28 13:08
    
    自己几斤几两我自己最清楚了，也就是玩玩，不要当真，哈哈。基础确实渣，基本上用到什么去找什么资料，什么时候信手拈来就好了
    
    发哥怎么又又又换头像了
    
    回复
    
    大发
    
    2016-03-28 17:53
    
    哈哈，没贬低你的意思。
    看你没毕业，怕你听多了这种话自我膨胀，找工作的时候受挫。。。
    
    回复
    
    Tokin
    
    2016-03-28 21:26
    
    为什么你的留言不加网址呢？难道有什么意想不到的效果。
    
    回复
    
    大发
    
    2016-03-29 00:14
    
    你又不是不知道我地址。。
    
    回复
    
    c
    
    2016-03-30 11:44
    
    讲真，进北京某些大公司实习过，里面的人有多糊弄那简直是……
    
    回复
    
    c
    
    2016-03-30 11:52
    
    比如：华为、中兴的某些业务，中关村软件园的软通动力、滴滴。还有百度……
    就百度首页代码都是错误百出，“设置”class属性重复、有的&用转义&有的不用。
    感觉就是不同的几个新手生拼硬凑做出来的，一个网站的门面代码写成这样也是醉了。
    
    回复
    
    Tokin
    
    2016-03-31 08:09
    
    肯定不是一个人写的，而且就算是同一个人写的，经过多次改版之后，总会留下很多冗余。
    
    回复
    
    kaikai
    
    2016-04-02 08:00
    
    因为大门户网站在乎的是效率，版本更新快并且上线要快只要功能实现就好了。听说淘宝的代码是比较严谨的，写代码的也都是国内顶尖的
    
    回复
    
    c
    
    2016-04-02 12:50
    
    恩，淘宝必然的，涉及到太多金钱相关问题，所以格外小心……
    
    回复
c

2016-03-30 11:46

其实我觉得jQuery才是最臃肿的= =
我现在比较头疼的是怎么用纯CSS做出响应式下拉多级导航栏……

回复
1. Tokin
  
  2016-03-31 08:15
  
  是可以的，我现在在用的导航就可以做到，只是使用hover有些问题
  
  回复
碎碎念ZWS

2016-03-30 15:50

最近也是在写这些，不过就没有你那么溜啦，博客彻底屏蔽百度的滋味很酸爽啊！

回复
1. Tokin
  
  2016-03-31 13:41
  
  为什么屏蔽百度
  
  回复
阿斯顿发

2016-03-31 14:36

师傅

回复
鬼马

2016-04-03 03:26

这个wordpress主题能发一下吗

回复
Rich

2016-04-04 00:04

刚才执行例行维护什么鬼。。。

回复
1. Tokin
  
  2016-04-04 02:49
  
  升级插件
  
  回复
  1. 哈希
    
    2016-04-05 11:48
    
    对
    
    回复
2. Tokin
  
  2016-04-04 02:50
  
  倒是你博客什么时候恢复，域名到期了好像
  
  回复
  1. Rich
    
    2016-04-04 16:09
    
    是啊，求个便宜的域名商，狗爹续费实在太贵
    
    回复
    
    Tokin
    
    2016-04-04 22:53
    
    Namesilo吧，很多年了，价格相对便宜
    
    回复
    
    Rich
    
    2016-04-05 18:55
    
    嗯，我去看看。
    另外iDevise的Typecho版本已经在移植中了，到时候应该会随博客一起上线的;-)
    
    回复
    
    Tokin
    
    2016-04-07 00:24
    
    期待，哈哈
    
    回复
子歇

2016-04-07 09:06

撸的一手好代码。。

回复
刚哥笔记

2016-04-07 13:40

你好，用了你的主题，但是出现两个问题。一是标题栏只显示网址，不显示title，可能是缺少header.asp。二是，用了baidu-sitemaps插件，生成了http://域名/sitemap.html,打开是404，请教。

回复
1. Tokin
  
  2016-04-09 20:13
  
  不了解，你试试其他主题是否可以
  
  回复
  1. 刚哥笔记
    
    2016-04-09 21:57
    
    但是你的可以显示title，同样的源码，奇怪
    
    回复
    
    Tokin
    
    2016-04-10 19:10
    
    我访问你博客是正常的啊
    
    回复
老张

2016-04-13 13:25

学习了

回复
收集控

2016-04-13 23:36

博主你好，我问下，为什么我的首页有些文章的时间显示不出来呢？谢谢！

回复
1. Tokin
  
  2016-04-14 07:24
  
  下个版本会推送更新
  
  回复
  1. 收集控
    
    2016-04-14 13:04
    
    呵呵，在你新年红包中这篇文章评论中找到答案了！好简洁的主题，代码文件就这个，爽！
    
    回复
收集控

2016-04-13 23:38

我用的是你的主题，网站http://www.sjk5.top，麻烦帮看下！

回复
穹庐

2016-04-15 12:55

你学写代码的过程是怎样的，用啥工具调试呢

回复
1. Tokin
  
  2016-04-15 16:39
  
  瞎写，有什么问题就搜索啊
  
  回复
pow3630

2016-04-20 09:08

感谢，正在使用你的主题

回复
杨先生

2016-04-22 16:58

我试试评论

回复
唯历史

2016-05-14 08:43

感觉很炫，我的网站需要弄弄了

回复
小雨

2016-05-14 22:19

你文章底部的打赏入口icon为什么不用「赏」字，而是用了一个「打」字。。。

回复
1. Tokin
  
  2016-05-15 11:59
  
  原意是打赏，所有人都用赏，我用打难道不很有趣嘛。哈哈
  
  回复
Itcat

2016-05-15 20:53

你好，能不能做一个登录注册地弹窗控件放在首页，谢谢了

回复
1. Tokin
  
  2016-05-15 22:48
  
  个性化功能不免费提供，你可以自行DIY
  
  回复
精选故事网

2016-05-23 15:14

博主是前端工程师哇！！！

回复
1. Tokin
  
  2016-05-25 22:24
  
  自己瞎鼓捣，不专业
  
  回复
Akon uncle

2016-06-01 08:58

确实很不错，简洁流畅

回复
新哈博客

2016-09-03 20:17

谢谢分享试一下

回复

简单实现响应式菜单

HTML框架：

CSS：

Demo效果

已有 56 条评论

添加新评论

最新文章

最近回复

分类

归档

其它