今天帮朋友改响应式网站,其实响应式网站其他地方只要用媒体查询重写一下即可,但是导航部分是比较难处理的,一般都是进行重写,当然网上有很多插件可用,但是代码硬肿,没必要为了那么点功能就去使用插件,我就随便写了一个,记录一下,对美感没太大要求的站点可以直接使用,代码如下:
css部分
* { margin: 0; padding: 0; } .m_nav { position: relative; height: 40px; width: 100%; background: #999; } .m_nav .m_nav_icon { position: relative; float: left; margin-left: 5px; width: 40px; height: 30px; box-sizing: border-box; margin-top: 5px; border-top: 5px solid #fff; border-bottom: 5px solid #fff; } .m_nav .m_nav_icon:after { position: absolute; content: ""; width: 100%; height: 5px; background: #fff; left: 0; top: 8px; } .m_nav .m_nav_icon.active { border: none; transition: all ease-in .5s; } .m_nav .m_nav_icon.active:after { position: absolute; content: ""; width: 100%; height: 5px; background: #fff; left: 0; top: 10px; transform: rotate(45deg); } .m_nav .m_nav_icon.active:before { position: absolute; content: ""; width: 100%; height: 5px; background: #fff; left: 0; top: 10px; transform: rotate(-45deg); } .m_nav .m_nav_nav { position: absolute; z-index: 999; width: 200px; height: 100vh; background: #999; left: 0; top: 40px; display: none; } .m_nav .m_nav_nav ul { list-style: none; text-indent: 5px; overflow: hidden; } .m_nav .m_nav_nav ul li { width: 100%; height: 40px; text-align: center; line-height: 40px; border-bottom: 1px solid #aaa; } .m_nav .m_nav_nav ul li a { display: block; width: 100%; height: 100%; color: #fff; }
HTML部分
<div class="m_nav"> <div class="m_nav_icon"></div> <div class="m_nav_nav"> <ul> <li> <a href="">1</a> </li> <li> <a href="">2</a> </li> <li> <a href="">3</a> </li> <li> <a href="">4</a> </li> <li> <a href="">5</a> </li> <li> <a href="">6</a> </li> <li> <a href="">7</a> </li> </ul> </div> </div>
JS部分:
$(function() { $('.m_nav_icon').click(function() { $(this).toggleClass('active'); $('.m_nav_nav').animate({ width: 'toggle' }, 500); }) })
评论前必须登录!
注册