书犹药也,善读可以医愚

    

导航栏自适应折腾完毕

20181121nav.png

花了半天时间又完成了一项主题的进展:导航栏自适应。本来是想直接找一个现成的源码用上去的,后来想想还是自己写一写吧,顺便学习熟悉一下相关知识,这个导航是使用了CSS+JS实现的,没有使用jQuery和特效,导航嘛,没必要搞得那么麻烦 -,-! 好吧,我承认是我比较懒哈。

自适应导航的实现很简单,在不同分辨率下使用不同样式就可以了,不过在手机端访问的话,需要将菜单收缩隐藏,点击图标的时候再显示菜单,就需要用到JS来处理。

其实我想不用JS应该也是可以的,在手机上触屏其实会引发hover的,那其实把菜单写到一个DIV里面先隐藏掉,然后通过图标hover来使这个DIV显示,应该也是可以的。这样的话点击屏幕的其他地方就会取消hover,菜单又会隐藏,不用另外写JS代码,感觉好省事哈。不过我没有试过这样操作,直接用JS写了吧,以后有空的话可以试一下。

接下来好像没有几个功能要写咯,嘿嘿,第一个主题总算快要完成了!

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

已有 6 条评论

  1. 我咋感觉这个样式更好看呢
    1. 回复 云缠月: 那个是在手机端访问时的样式呢
  2. 你这个轮播手机自适应有点问题....会多出一丢丢。自适应我比你更懒吧....用bootstrap提供的现成的导航栏....
    1. 回复 程志辉: 是哪个位置会多出?我刚才用手机上的腾讯浏览器、火狐、谷歌都访问了一下,没有发现额。
      1. 小菜菜 小菜菜
        回复 小宇: 左右拖动页面,确实有超宽。
        1. 回复 小菜菜: 已经调整过了,现在还有吗?能否截图发我看下?感谢!

添加新评论

  时光笔记:逐渐成长

有天晚上下班,和豆豆吃过饭后一起接了小家伙回家,开车的时候我说了句:哎呀晚上吃太饱了。没想到小家伙拖着长长的音在边上说:我——也——是——,边说还一本正经地用手摸了摸自己的肚子,笑死我了。

updated on :

  关于博主

84年,天秤座与处女座交接,有一点点强迫症,性格诡异,情绪复杂多变。爱好健身、跑步,一年必跑一场全程马拉松,N场半程马拉松。也喜欢听歌与阅读,喜欢接触新鲜事物。座右铭:活到老,学到老,生命在于运动!

  近期评论

  •  Cat: 冒个泡
  •  Ronin: 咚门,算是我对这个圈子的启蒙吧(⁎⁍̴̛ᴗ⁍̴̛⁎) 刚上大学那会,看到他的站,直接就买了使用...
  •  Ronin: 小宇也认识咚哥?以前我用的咚哥的wp主题 能加下友链吗?本站已添加,日均100PV,经常更新的...
  •  一稿计划: 定期回访
  •  iherb: 坚持锻炼不容易 赞
  •  小酱博客-记录我的一生: 互相串门啊!超级喜欢你的模板! 网站名称:小酱博客~记录我的一生 网站简介:被嘲笑梦依旧前进着...
  •  哎呦: 这个时间轴啥时候能发布?
  •  bean sprout: 因为我也懒了,周末还要陪小孩,一点点想更新blog的想法也没有了
  •  为迪斯科: 您好,用了和你一样的风格模板,友情链接一下,谢谢。 博客名称:为迪斯科户外 博客描述:各种户外...
  •  叶戈: 来和大佬链接了, 名称 叶戈博客 地址 https://blog.xjqxz.top 好像不用...

你是否在某个夜深人静的时刻,静静地听着Bressanone,思念着某人。—— by 小宇

每个人心里都有一段伤痕,时间才是最好的疗剂。

人总是珍惜未得到的,而遗忘了所拥有的。

退一步,并不象征我认输;放手,并不表示我放弃;微笑,并不意味我快乐!

人海中再回首,朋友真诚依旧,生命里重逢,心境平和温柔,往事如风,岁月如歌,漫漫人生路,苍桑几许,幸福几何!