استفاده از جی کوئری در منو

[behvandi 10]

درود

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

1.باید جی کوئری رو توی قسمت ماژول منو اضافه کرد یا توی ایندکس قالب یا هر دو میشه؟

2.نحوه اضافه کردن لینک های cdn چجوری هست از نظر سینتکس و محل نوشتن؟

فقط لطفن کسی نگه چه کاریه از منوسازها استفاده کن

[barend 13]

نه اتفاقا من برای یه سایت از منوی جی کوئری استفاده کردم خوبیش اینه که دقیقا اون چیزی که تو 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;}

[barend 13]

راستی یادم رفت این کد رو هم داخل قسمت body ایندکس در جایی مناسب (اونجایی که قراره موقعیت منو رو بسازی) اضافه کن

<!-- Begin Menu -->

<?php if($this->countModules('menu')): ?>

<div id="menu1"><div id="menu2"><div id="menu">

<jdoc:include type="modules" name="menu" style="none" />

</div></div></div>

<?php endif; ?>

<!-- End Menu -->

اگرم مشکلی با این قضایا داشتید ایمیل و ایدی من درخدمت شماست info@conceptidea.ir - mr_ebrahimpoor