基于Bootstrap的WordPress主题菜单侧边滑动效果

文章目录

很久没发文章了,继续上一篇文章的内容,也就是制作基于Bootstrap的wordpress主题。上一篇文章介绍了wordpress如何输出具有Bootstrap导航栏结构的菜单。在这个效果的基础上,tennfy来介绍下如何实现基于Bootstrap的wordpress主题的菜单侧边滑动的效果。

Bootstrap Offcanvas插件

Bootstrap Offcanvas是一款非常简单的jQuery隐藏滑动侧边栏插件。该jQuery插件使用Bootstrap的样式和标签来创建隐藏的滑动侧边栏,在大屏幕上会显示正常的导航菜单,当屏幕尺寸缩小到一定尺寸时该滑动侧边栏才会出现。

下图是Bootstrap Offcanvas插件的效果:

bootstrup-offcanvas

插件下载地址:http://pan.baidu.com/s/1eRyuDRO

实现菜单侧边滑动效果

1、下载Bootstrap Offcanvas插件

下载上述插件后,可以在js及css文件夹中找到bootstrap.offcanvas.min.js及bootstrap.offcanvas.min.css文件,将它们分别放置到wordpress主题文件夹下的js及css文件夹中。

2、引入js及css文件

在header.php中引入上述js及css文件,如下所示

1
2
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/bootstrap.offcanvas.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/bootstrap.offcanvas.min.js"> </script>

需要注意的是,bootstrap.offcanvas.min.js文件要在jquery后面引用。

3、为bootstrap菜单添加相应.class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#menu-list" type="button">
    <span class="sr-only">Toggle navigation</span>
    <span class="fa fa-reorder fa-lg"></span>
</button>		
<div class="navbar-collapse bs-navbar-collapse collapse navbar-offcanvas navbar-offcanvas-right navbar-offcanvas-touch navbar-offcanvas-fade" id="menu-list">
<?php   
     wp_nav_menu( array(  
	'theme_location' => 'cat_nav',  
	'depth' => 2,   
	'container' => false,   
	'menu_class' => 'nav navbar-nav',   
	'fallback_cb' => 'wp_page_menu',   
	//添加或更改walker参数   
	'walker' => new wp_bootstrap_navwalker())   
     );   
?>	
</div>

按照上述方式添加相应的.class,即可应用Bootstrap Offcanvas插件,实现它提供的效果。

小结

不可避免的,在一些比较老的浏览器上不支持该插件,请读者自行判断使用。

本文出自 TENNFY博客,转载时请注明出处及相应链接。

本文永久链接: https://www.tennfy.com/4105.html

下一篇文章:

上一篇文章:

3人参与了讨论

  1. themebetter 说:

    非常实用的方法,给博主点个赞!

  2. 用Bootstrap来制作wordpress主题真的很方便呢! :grin:

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

9 + 5 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部