ijquery

منوی زیبای عمودی با جی کوئری و سی اس اس

screenshot

با استفاده از این پلاگین می توانید  در سایت خود منوی عمودی داشته باشید .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <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>

پیش نمایش دانلود فایل پلاگین

9 دیدگاه دربارهٔ «منوی زیبای عمودی با جی کوئری و سی اس اس»

  1. امیر اللهیاری

    سلام
    من این کد رو توی قالبم میزارم درسته ولی
    می خوام بزارم توی مطلب نمیشه بهم میریزه

    1. ماهانا جان استفاده از جی کوئری و این پلاگین ها در تمام سیستم های مدیریت محتوا از جمله جمله امکان پذیر است

  2. با سلام
    لطفا توضیح بدید که چطور میشه تعداد لینک های منو رو زیاد کرد من با توجه به کدهای قسمت bodyمشابه ش کد نوشتم برای ایجاد لینک های جدید در منو اما اصلا شبیه منو اصلی نشد و background خاکستری و .. نداشت و مثل یک لینک ساده شد!
    لطفا راهنمایی کنید..
    ممنون

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *