طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

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

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

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

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

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

7 نظر

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

دانلود و پیش نمایش فایل منوی زیبای عمودی با جی کوئری و سی اس اس

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

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)