استفاده از جی کوئری در قالب

[Rohani 389]

سلام من میخواهم از این منوی جی کوئری در قالبم استفاده کنم.

لطفا راهنمایی کنید.

menu.zip

[Farid 2281]

سلام

1 ـ پوشه ی files رو به پوشه ی قالبتون اضافه کنید .

2 ـ قبل از پایان تگ هد ، فایل های جاوا رو فراخوانی کنید :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
</script>

3 ـ قبل از پایان تگ هد ، فایل استایل رو نیز وارد کنید ( یا این که کد های استایلش رو به فایل استایل قالب اضافه کنید ) :

<style type="text/css">
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li {
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a {
color: #7bc441;
}
ul#topnav span {
display: none;
}
ul#topnav.v2 span {
background: url("files/a_bg.gif") repeat-x left top;
}
ul#topnav.v2 a {
color: #555;
background: url("files/a_bg.gif") repeat-x left bottom;
}
</style>

4 ـ هر جای که میخوایید منو نمایش داده بشه ، کد html اش رو وارد کنید :

<ul id="topnav" class="v2">

<li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a
href="#">منو آزمایشی</a></li>
<li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a
href="#">منو آزمایشی</a></li>

<li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a
href="#">منو آزمایشی</a></li>
<li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a
href="#">منو آزمایشی</a></li>
<li><span style="display: inline; margin-top: 0px;">منو</span><a
href="#">منو </a></li>
<li><span style="display: inline; margin-top: 0px;">منو </span><a
href="#">منو </a></li>
</ul>