引导实现简单侧边导航栏效果的方法

　　介绍

这篇文章主要介绍引导实现简单侧边导航栏效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>引导侧边导航栏实现原理

<李>

侧滑栏使用定位固定

<李>

使用引导响应式使用工具类visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配

<李>

侧滑栏的侧滑效果不使用jquery方法来实现,使用的是css3转换属性进行div的移动,侧滑的动画效果使用的是css属性过渡

<李>

缺点:使用两套菜单,一套是pc端屏幕显示的菜单,一套是移动端显示的手机导航菜单,这个缺点比较明显,生成无关的标签,优点代码少,简单容易接受

<>强效果图

引导实现简单侧边导航栏效果的方法”> <br/> <img src=

<强>引导导航栏布局

,,,,& lt; !——手机导航栏——比; 　　,,,& lt; div  id=癿obile-menu",类=癿obile-nav  visible-xs  visible-sm"比; 　　,,,,,,,& lt; ul> 　　,,,,,,,,,,,& lt; li> & lt; https://www.yisu.com/zixun/a  href=" # ">首页 　　<李> Java 　　<李> SVN 　　<李> iOS 　　 　　
　　 　　<导航类=" navbar-inverse visible-lg visible-md”角色="导航"> 　　
　　
菜鸟教程 　　
　　 　　
　　 　　 　　
　　 　　 　　 　　

一个导航栏的布局,用了两个导航菜单,一个是电脑端的,一个是手机端,利用引导响应式使用工具类visible-xs visible-sm来实现pc端隐藏切换按钮;visible-lg visible-md实现了pc端显示导航栏;visible-xs visible-sm实现手机端显示手机导航栏。
引导响应式工具类详见:https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html

<强> css实现布局和侧滑效果(侧滑的关键css3属性变换,转换)

代码不多,仅仅10行

,,,,,,,,,*,{保证金:0;填充:0;} 　　,,,,,,,,# mobile-menu {:固定;:0;左:0;宽度:220 px;高度:100%;background - color: # 373737; z - index: 9999;} 　　,,,,,,,,,hover :关注{文字修饰:没有} 　　,,,,,,,.mobile-nav  ul  li  a {颜色:灰色;显示:块;填充:1 em  5%,,,,, border-top: 1 px  solid  # 4 f4f4f;边界底部:1 px  solid  # 292929;转型:all  0.2 s 打发走,光标:指针;# mobile-menu {:固定;:0;左:0;宽度:220 px;高度:100%;background - color: # 373737; z - index: 9999;转型:all  0.3 s 在;}} 　　,,,,,,,.mobile-nav  ul  li 答:hover  {background - color: # 23 a1f6;颜色:,# ffffff;} 　　,,,,,,,.show-nav {变换:translateX (0);} 　　,,,,,,,.hide-nav {变换:translateX (-220 px);},/*侧滑关键*/,,,,,,,.mobile-nav-taggle {高度:35 px;行高:35 px;宽度:35 px; background - color: # 23 a1f6;颜色:# ffffff,显示:inline-block; text-align:中心;游标:指针} 　　,,,,,,,.nav.avbar-inverse{:相对;} 　　,,,,,,,.nav-btn {:绝对;右:20 px;: 20 px;}

要值得注意的是css3的两个属性:
变换:旋转div,支持元素2 d或3 d旋转,属性值translateX (X)就是在X轴上移动Xpx的距离
http://www.w3school.com.cn/cssref/pr_transform.asp
而侧滑的动画效果是使用过渡属性,设置属性的过渡动画的效果,语法
转型:财产持续时间定时功能延迟;http://www.w3school.com.cn/cssref/pr_transition.asp

<强>单击事件切换侧滑

,,,,,,,,(“# mobile-nav-taggle") .click(美元function  (), { 　　,,,,,,,,,,,var  mobileMenu =,美元(“# mobile-menu"); 　　,,,,,,,,,,,if  (mobileMenu.hasClass (“show-nav")), { 　　,,,,,,,,,,,,,,,setTimeout (function  (), { 　　,,,,,,,,,,,,,,,,,,,mobileMenu.addClass (“hide-nav") .removeClass (“show-nav"); 　　,,,,,,,,,,,,,,,},,100) 　　null 　　null 　　null 　　null 　　null 　　null 　　null

引导实现简单侧边导航栏效果的方法