با استفاده از این پلاگین می توانید در سایت خود منوی عمودی داشته باشید .
آموزش استفاده
۱- فراخوانی کتابخانه پلاگین و خصوصیت ها
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" /> <style type="text/css">body{background:url(img/bg.png) repeat;width:960px;margin:0 auto}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250{width:250px;margin:0 auto;}</style> <script type="text/javascript"> $(document).ready(function () { // Store variables var accordion_head = $('.accordion > li > a'), accordion_body = $('.accordion li > .sub-menu'); // Open the first tab on load accordion_head.first().addClass('active').next().slideDown('normal'); // Click function accordion_head.on('click', function (event) { // Disable header links event.preventDefault(); // Show and hide the tabs on click if ($(this).attr('class') != 'active') { accordion_body.slideUp('normal'); $(this).next().stop(true, true).slideToggle('normal'); accordion_head.removeClass('active'); $(this).addClass('active'); } }); }); </script>
2- کد html جهت استفاده پلاگین
<div id="wrapper-250"> <ul class="accordion"> <li id="one" class="files"> <a href="#one">فایل های من</a> <ul class="sub-menu"> <li><a href="#"><em>1 -</em>درایو اول</a></li> <li><a href="#"><em>2 -</em>درایو دوم</a></li> <li><a href="#"><em>3 -</em>درایو سوم</a></li> <li><a href="#"><em>4 -</em>درایو چهارم</a></li> <li><a href="#"><em>5 -</em>درایو پنجم</a></li> </ul> </li> <li id="two" class="mail"> <a href="#two">ایمیل ها</a> <ul class="sub-menu"> <li><a href="#"><em>1 -</em>هات میل</a></li> <li><a href="#"><em>2 -</em>یاهو میل</a></li> <li><a href="#"><em>2 -</em>جی میل</a></li> </ul> </li> <li id="three" class="cloud"> <a href="#three">کار ها</a> <ul class="sub-menu"> <li><a href="#"><em>1 -</em>یادداشت اول</a></li> <li><a href="#"><em>2 -</em>یادداشت دوم </a></li> </ul> </li> <li id="four" class="sign"> <a href="#four">تنظیمات</a> <ul class="sub-menu"> <li><a href="#"><em>1 -</em>خروج</a></li> <li><a href="#"><em>2 -</em>حذف اکانت</a></li> <li><a href="#"><em>3 -</em>تغیر رمز عبور</a></li> </ul> </li> </ul> </div>
خیلی عالی بود
با تشکر
ممنون سمیرا خانم
سلام
من این کد رو توی قالبم میزارم درسته ولی
می خوام بزارم توی مطلب نمیشه بهم میریزه
شما به چه شکل داخل مطلبت میزاری . احتمالاً یا مشکل تداخل جی کوئری داری یا css
css
میزنه فایل css رو پاک می کنه خودکار
میشه از این کدها در جوملا استفاده کرد؟
آیا این کدها فقط مخصوص html هستن؟
ماهانا جان استفاده از جی کوئری و این پلاگین ها در تمام سیستم های مدیریت محتوا از جمله جمله امکان پذیر است
با سلام
لطفا توضیح بدید که چطور میشه تعداد لینک های منو رو زیاد کرد من با توجه به کدهای قسمت bodyمشابه ش کد نوشتم برای ایجاد لینک های جدید در منو اما اصلا شبیه منو اصلی نشد و background خاکستری و .. نداشت و مثل یک لینک ساده شد!
لطفا راهنمایی کنید..
ممنون
salam
vaghteton bekhir
man az in menu estefade kardam ama moshkelam ine k ba raftan ro menuhash kole safaham ya paen mire ya bala