inove更改jquery风格导航菜单笔记

这个菜单来自jquery的一款DEMO菜单，我只是将他应用在了inove上，谈不上技术，特来和大家分享。

如果你和我一样，酷爱mg12的inove主题，你可以完全按照下边的步骤将你的inove导航菜单更改为jquery的web 2.0风格，你需要首先下载jquery的JS库和一些背景图。
下载1

如果你使用的是其他主题，我不建议你完全按照下边的步骤，不过可以参考。

另附上这款DEMO菜单的原始文件，里边包含了好几款菜单样式。开源软件，大家随便修改分发。
下载2

DEMO:http://www.vi1129.com

注意：以下步骤仅适用于Inove 1.4版本!遇到问题欢迎咨询。

首先，你需要将jquerymenus_with_inove.zip解压，并将其中的jquery-1.2.6.min.js和jquery.bgpos.js上传到wp-content/themes/inove/js目录下，coolmenus_bg1.jpg和coolmenus_bg2.jpg上传到wp-content/themes/inove/img目录下。

修改以下三个文件
wp-content/themes/inove/templates/start.php
wp-content/themes/inove/templates/header.php
wp-content/themes/inove/style.css
建议从你的服务器上下载这3个文件，并备份，为防止出现的意外情况以备恢复。

1. start.php
大概在46行左右

^?View Code JAVASCRIPT

<script src="&lt;?php bloginfo('template_url'); ?&gt;&lt;!--
/js/menu.js" type="text/javascript"><!--mce:0--></script>

下边添加

^?View Code JAVASCRIPT

<script src="&lt;?php bloginfo('template_url'); ?&gt;&lt;!--
/js/jquery-1.2.6.min.js" type="text/javascript"><!--mce:1--></script>
	<script src="&lt;?php bloginfo('template_url'); ?&gt;&lt;!--
/js/jquery.bgpos.js" type="text/javascript"><!--mce:2--></script>
	<script type="text/javascript"><!--mce:3--></script>

再往后是原来的代码<!– script END –>，请确认。

2. header.php
大概在29行左右，找到<!– menus START –>,将<!– menus START –>到<!– menus END –>之间的代码修改为如下所示

^?View Code HTML4STRICT

	<!-- menus START -->
<div class="menus">
<ul id="coolmenus"><!--
<ul id="menus">-->
	<li class="&lt;?php echo($home_menu); ?&gt;"><a class="home" title="&lt;?php _e('Home', 'inove'); ?&gt;" href="&lt;?php echo get_settings('home'); ?&gt;/"></a></li>
<!--
	<li><a class="lastmenu" href="javascript:void(0);" mce_href="javascript:void(0);"></a></li>
--></ul>
</div>
<!-- menus END -->

3. style.css
找到第216行#menus li { ，从这行开始注释，直到257行，也就是将#menus开头的这些行注释

^?View Code CSS

/*#menus li {
 …………………………………………
  …………………………………………
#menus li a.lastmenu:hover {
	background-position:0 0;
	cursor:default;
}*/

紧接着在下边添加，也就是258行开始添加下边的内容。

^?View Code CSS

.menus ul {list-style:none;margin:0;padding:0;}
.menus li {float:left;width:100px;margin:0;padding:0;text-align:center;}
.menus li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;background:url(img/coolmenus_bg2.jpg) repeat 0 0;}
 
.menus li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#coolmenus a  {background:url(img/coolmenus_bg1.jpg) repeat -20px 35px;}