导航栏自适应折腾完毕

Category : FakeTech Views : 4486 Comments : 6 Posted on : 2018-11-21

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

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

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

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

Posted by : 小宇 Tags : 导航

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

Previous post 记录一下：修改了轮播图设置方式

Next post 一级路由无法直接访问二级路由下的终端设备

已有 6 条评论

云缠月

January 22nd, 2019 at 06:33:36 PM 回复

我咋感觉这个样式更好看呢
1. 小宇
  
  January 22nd, 2019 at 08:28:51 PM 回复
  
  回复云缠月：那个是在手机端访问时的样式呢
程志辉

November 22nd, 2018 at 10:28:34 AM 回复

你这个轮播手机自适应有点问题....会多出一丢丢。自适应我比你更懒吧....用bootstrap提供的现成的导航栏....
1. 小宇
  
  November 22nd, 2018 at 12:30:31 PM 回复
  
  回复程志辉：是哪个位置会多出？我刚才用手机上的腾讯浏览器、火狐、谷歌都访问了一下，没有发现额。
  1. 小菜菜
    
    December 10th, 2018 at 02:35:30 PM 回复
    
    回复小宇：左右拖动页面，确实有超宽。
    
    小宇
    
    December 10th, 2018 at 03:06:04 PM 回复
    
    回复小菜菜：已经调整过了，现在还有吗？能否截图发我看下？感谢！

书犹药也,善读可以医愚

导航栏自适应折腾完毕

已有 6 条评论

添加新评论