این مورد به احتمال زیاد ماژول نیست و اگر باشد ماژول swmenu pro است.
اما به راحتی می توانید آن را به قالب خود اضافه کنید.
ابتدا jquery را از گوگل اپیز لود کنید، به صورت اسکریپت این کد را در داخل قالب خود لود کنید:
کد:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
و این کد جاوا اسکریپت را با نام menu.js ذخیره کنید و در آدرسی قرار دهید که بعداً مانند کد بالا آن را در داخل قالب فراخوانی کنید:
کد:
jQuery.noConflict();
jQuery('.item').hover(
function(){
var $this = jQuery(this);
expand($this);
},
function(){
var $this = jQuery(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 30;
jQuery('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'150px'}, 1000)
.find('.item_content').fadeIn(400,function(){
jQuery(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
jQuery('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'30px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
این کد را برای فراخوانی کد menu.js در قالب خود قرار دهید. طبیعی است که باید آدرس آن را با آدرس محل menu.js تنظیم کنید:
کد:
<script type="text/javascript" src="/templates/joomina9/js/menu.js"></script>
این کد css را هم به نام menu.css در یک شاخه ذخیره کرده و آن را با آدرس دهی در قالب خود لود کنید:
کد:
#menu {
height:35px;
float:right;
margin-top:15px;
float:left}
.menu{
height:30px;
position:relative;
top:0;
right:0px;
font-family:tahoma,tahoma, sans-serif;
font-size:12px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#90846c;
float:right;
width:32px;
margin:0px 5px;
height:32px;
border:1px solid #756b57 ;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;background: rgb(125,126,125);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYzE5NzY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwMzkxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgb(125,126,125) 0%, rgb(193,151,105) 0%, rgb(96,57,19) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(125,126,125)), color-stop(0%,rgb(193,151,105)), color-stop(100%,rgb(96,57,19)));
background: -webkit-linear-gradient(top, rgb(125,126,125) 0%,rgb(193,151,105) 0%,rgb(96,57,19) 100%);
background: -o-linear-gradient(top, rgb(125,126,125) 0%,rgb(193,151,105) 0%,rgb(96,57,19) 100%);
background: -ms-linear-gradient(top, rgb(125,126,125) 0%,rgb(193,151,105) 0%,rgb(96,57,19) 100%);
background: linear-gradient(top, rgb(125,126,125) 0%,rgb(193,151,105) 0%,rgb(96,57,19) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#603913',GradientType=0 );
}
.link{
left:2px;
top:2px;
position:absolute;
width:25px;
height:25px;
}
.icon_home{
background: url(../images/joomina.png) transparent no-repeat ;
background-position: -10px -92px;
}
.icon_mail{
background:transparent url(../images/joomina.png) no-repeat;
background-position: -10px -368px;
}
.icon_help{
background:transparent url(../images/joomina.png) no-repeat ;
background-position: -10px -184px;
}
.icon_find{
background:transparent url(../images/joomina.png) no-repeat;
background-position: -10px -276px;
}
.icon_photos{
background:transparent url(../images/joomina.png) no-repeat ;
background-position: -10px -230px;
}
.icon_lamp{
background:transparent url(../images/joomina.png) no-repeat;
background-position: -10px -138px;
}
.icon_member{
background:transparent url(../images/joomina.png) no-repeat;
background-position: -10px -322px;
}
.item_content{
position:absolute;
height:25px;
width:150px;
overflow:hidden;
text-align:center;
background:transparent;
display:none;
right:10px;
top:4px
}
.item_content a{
background-color:transparent;
float:right;
color:#FFF;
text-shadow: 1px 1px 1px #000;
text-decoration:none;
font-size:12px;
font-weight:normal
}
.item_content a:hover{
color: #fff;
}
.item_content p {
background-color:transparent;
display:none;
}
/*-------------------------------------------------------------------------------_*/
ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:45px;
background-color:#333333;
list-style:none;
font-family:tahoma,"Trebuchet MS", sans-serif;
margin-top:5px;
text-align:justify;
color:#FFF
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
float:right;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:#fff;
background-color:#333333;
height:45px;
line-height:45px;
cursor:default;
padding:0px 20px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #666;
border-left:1px solid #333;
}
ul.ldd_menu .ldd_submenu{
position:absolute;
top:45px;
width:550px;
display:none;
opacity:0.95;
right:0px;
font-size:10px;
background: #C34328;
border-top:1px solid #EF593B;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#f0f0f0;
color:#444;
display:block;
clear:both;
padding:15px 20px;
text-transform:uppercase;
font-family:tahoma, Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:0px 0px 2px #777 inset;
-webkit-box-shadow:0px 0px 2px #777 inset;
-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
list-style:none;
float:right;
text-align:justify;
border-left:1px solid #DF7B61;
margin:10px 10px 5px 0;
padding:10px;
}
li.ldd_heading , li.ldd_heading a{
font-family:tahoma, Georgia, serif;
font-size: 13px;
font-style: italic;
color:#FFB39F;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family:tahoma, Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px ;
}
ul.ldd_menu ul li:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
background:#AF412B;
}
a.ldd_subfoot {
color:#333}
و این کد را برای لود css استفاده کنید. منطقی است که باید آدرس آن را با آدرسی که فایل menu.css را در آنجا قرار داده اید تنظیم کنید:
کد:
<link rel="stylesheet" href="/templates/joomina9/css/menu.css" type="text/css">
حال تنها کافی است کلاس های link و item و item_content را جوری به کار ببرید که منوی شما را تحت تاثیر قرار دهند. مانند کاری که جومینا در منوی خود کرده!
(نکته! منوی جومینا احتمالاً به صورت دستی کم و زیاد می شود. یا این که از swmenu pro استفاده می کنند.)
این کد منوی جومینا است:
کد:
<div id="menu">
<div class="menu">
<div class="item" style="width: 30px; overflow-x: hidden; overflow-y: hidden; display: block; ">
<a class="link icon_home"></a>
<div class="item_content" style="display: none; ">
<a href="http://www.joomina.ir/component/content/article/47-handmade/472-joomlapersian205.html">جوملا فارسی 2.5</a>
</div>
</div>
<div class="item">
<a class="link icon_lamp"></a>
<div class="item_content">
<a href="http://www.joomina.ir/ghanoonuser.html">قوانین عضویت در جومینا</a>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<a href="http://www.joomina.ir/joomla-extension.html">افزونه های جوملا</a>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<a href="http://forum.joomina.ir">انجمن پشتیبانی</a>
</div>
</div>
<div class="item" style="width: 30px; display: block; ">
<a class="link icon_find"></a>
<div class="item_content" style="display: none; ">
<a href="http://joominahost.com">هاستینگ تخصصی</a>
</div>
</div>
<div class="item">
<a class="link icon_member"></a>
<div class="item_content">
<a href="http://www.joomina.ir/newkarha.html">نمونه کارها</a>
</div>
</div>
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<a href="http://www.joomina.ir/contact-us.html">تماس با ما</a>
</div>
</div>
</div>
</div>
