نه اتفاقا من برای یه سایت از منوی جی کوئری استفاده کردم خوبیش اینه که دقیقا اون چیزی که تو psd زدی رو میتونی بوجود بیاری
سمعک ساعی
دقیقا شبیه psd خودش شده ...
اما آموزش توی قسمت index.php سایت کد زیز رو قبل از اتمام head یعنی داخل تگ head وارد کنید :
<!-- jQuery code Menu -->
<?php if ($superfish == 'yes' ) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/superfish.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#menu ul').superfish({
pathLevels : 3,
delay : 300,
animation : {opacity:'show',height:'show',width:'show'},
speed : 'fast',
autoArrows : false,
dropShadows : false,
});
});
</script>
<?php endif; ?>
<!-- jQuery code Menu -->
بعد دو تا فایل که در ضمیمه میزارم رو در پوشه ای به نام js بریز دو تا فایل جاوا اسکریپتن تو xml سایت هم بهش این پوشه رو معرفی کن <folder>js</folder>
و در آخر هم انواع کد های جی کوئری منو در وب موجوده که خودم اون کد استفاده شده رو برات میزارم اینارو تو فایل template.css اضافه کن
/*----------- Menu & Hover & Active -----------*/
@charset "utf-8";
#menu1 { direction:rtl; overflow: visible; color: #fff; position: relative; z-index: 999; margin:0 auto;}
#menu2 {}
#menu { margin:0 auto; min-height: 40px; width:900px; background-color: #888;
background-image: -moz-linear-gradient(top, #616161, #2d2d2d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#616161), to(#2d2d2d));
background-image: -webkit-linear-gradient(top, #616161, #2d2d2d);
background-image: -o-linear-gradient(top, #616161, #2d2d2d);
background-image: linear-gradient(to bottom, #616161, #2d2d2d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F90', endColorstr='#FC0', GradientType=0); border: none; -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; overflow:hidden; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); *zoom: 1;}
#menu ul { margin:0 auto; padding:0;}
#menu ul li { list-style:none; display:inline-block; position: static; padding:0; margin:0;font-family:'yekan';}
#menu ul li a { display:block; padding:0 25%; margin:0; line-height:35px; text-decoration:none; font-size:16px; color:#fff;}
#menu ul.menu { color: #fff; text-decoration: none; padding:0;}
#menu .menu li a:hover { background-color: transparent; color: #d30000; text-decoration: none;}
#menu ul.menu .active { color:#FFF; padding:0px; margin:0px; height:40px; color: #fff; text-decoration: none; -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
background-image: -moz-linear-gradient(top, #d80000, #9e0000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d80000), to(#9e0000));
background-image: -webkit-linear-gradient(top, #d80000, #9e0000);
background-image: -o-linear-gradient(top, #d80000, #9e0000);
background-image: linear-gradient(to bottom, #d80000, #9e0000);}
#menu ul li a span.menutitle { display:block;}
#menu ul li a span.menudesc { float:right; clear:both; font-size:11px; line-height:12px; margin:-20px 0 0 0; font-family:'yekan';}
/* ---------------------submenu--------------------- */
#menu ul li ul li { padding:0 0 1px 0; height:auto; margin:-2px 0px 5px; border-right:none;}
#menu ul li ul { overflow:hidden; position:absolute; width:240px; right:-999em; margin:0px 260px; padding:5px; background-color: #444; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
#menu ul li a:hover { text-decoration:none; color:#FFF; border-radius:0px;}
#menu ul li:hover ul, #menu ul li.sfHover ul { right:0px;}
#menu ul li ul li:hover ul { right:220px; top:0;}
#menu ul li:hover ul li a { color:#fff; border-radius:10px ;width:230px; margin:0; padding:6px 6px 0 1px; line-height:25px; font-size:14px; text-align:right;}
#menu ul li:hover ul li { background:none;}
#menu ul.menu li.item-115.current.active.deeper.parent ul a { padding:1px 5px 0;}
#menu ul li ul li.active ul li.active a { height:300px; }
#menu ul li.active ul li a:hover {color:#d30000;}
#menu ul li ul li.active a {color:#fff;}
#menu ul li ul ul, #menu ul li:hover ul ul,#menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul { right:-999em; padding:0px; margin:-5px 0 0 0;}
#menu > ul.menu > li.item-115.current.active.deeper.parent > ul a {color:#fff; padding:7px 2px 0px 2px;}
#menu > ul.menu > li.item-115.current.active.deeper.parent > ul a:hover {color:#d30000 !important;}
