php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

梦里梦外; 2023-01-14 04:57 373阅读 0赞

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

![ec862e11c6ccf6a4cf43174c5aab693c.png][]

bootstrap侧边导航栏实现原理侧滑栏使用定位fixed

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

侧滑栏的侧滑效果不使用jquery方法来实现，使用的是css3 transforms属性进行div的移动，侧滑的动画效果使用的是css属性transition

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

效果图

![011fde4e6f68a519d74862a4616ac2bc.png][]

![054f683bdf9af9f257d89ca92420bf9e.gif][]

bootstrap导航栏布局

*  首页
 *  Java
 *  SVN
 *  iOS

菜鸟教程

*  iOS
 *  SVN
 *  Java

一个导航栏的布局，用了两个导航菜单，一个是pc端的，一个是手机端，利用bootstrap响应式使用工具类visible-xs visible-sm来实现pc端隐藏切换按钮； visible-lg visible-md 实现了pc端显示导航栏；visible-xs visible-sm实现手机端显示手机导航栏。

bootstrap响应式工具类详见：https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html

css实现布局和侧滑效果(侧滑的关键css3属性transform、transition)

代码不多，仅仅10行\* \{margin:0;padding:0;\}

\#mobile-menu \{position:fixed;top:0;left:0;width:220px;height:100%;background-color:\#373737;z-index:9999;\}

a:hover ,a:focus\{text-decoration:none\}

.mobile-nav ul li a \{color:gray;display:block;padding:1em 5%; border-top:1px solid \#4f4f4f;border-bottom:1px solid \#292929;transition:all 0.2s ease-out;cursor:pointer;\#mobile-menu \{position:fixed;top:0;left:0;width:220px;height:100%;background-color:\#373737;z-index:9999;transition:all 0.3s ease-in;\}\}

.mobile-nav ul li a:hover \{background-color: \#23A1F6;color: \#ffffff;\}

.show-nav \{transform:translateX(0);\}

.hide-nav \{transform:translateX(-220px);\} /\*侧滑关键\*/

.mobile-nav-taggle \{height:35px;line-height:35px;width:35px;background-color:\#23A1F6;color:\#ffffff;display:inline-block;text-align:center;cursor:pointer\}

.nav.avbar-inverse\{position:relative;\}

.nav-btn \{position:absolute;right:20px;top:20px;\}要值得注意的是css3的两个属性：

transform：旋转div，支持元素2D或3D旋转，属性值translateX(X)就是在X轴上移动Xpx的距离

http://www.w3school.com.cn/cssref/pr\_transform.asp

而侧滑的动画效果是使用transition属性，设置属性的过渡动画的效果，语法

transition: property duration timing-function delay;

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)

else \{

setTimeout(function ()\{

mobileMenu.addClass("show-nav").removeClass("hide-nav");

\}, 100)

\})

总结

不推荐用两个菜单导航栏，缺点很明显，为了实现效果而已，不要介意，其实用一个菜单导航栏也是可以实现，试试media 完全可以实现。

代码下载：http://download.csdn.net/detail/kebi007/9909725

更多编程相关知识，请访问：编程入门！！

[ec862e11c6ccf6a4cf43174c5aab693c.png]: /images/20221022/3c27dc20a7c24fa8a1522eaeecade927.png
[011fde4e6f68a519d74862a4616ac2bc.png]: /images/20221022/a8135b13505b4aa49371bc4111f0f1d4.png
[054f683bdf9af9f257d89ca92420bf9e.gif]: /images/20221022/970f1323ed4b43b691b1e7299f97617e.png