آموزش ساخت منوی آبشاری

دسته‌ها : آموزش, وردپرس علی میرزائی 26 دیدگاه‌ها

css-menu

سلام.

امروز یه مطلب آموزشی توپ، برای دوستای عزیزی که به دنبال ساخت یک منوی کشویی زیبا هستن آماده کردم.
در این آموزش سعی شده که تمام مراحل ساخت یک منوی آبشاری، به صورت گام به گام و کاملا مفهومی توضیح داده بشه.
برای شروع کار به header.php قالبتون مراجعه کنید و کد زیر رو در یک جای مناسب قرار بدید.
در واقع این یک کد آزمایشی برای ساخت چارچوب منوها و زیر منوهای ماست.

<nav>
	<ul>
		<li><a href="#">خانه</a></li>
		<li><a href="#">آموزش</a>
			<ul>
				<li><a href="#">فتوشاپ</a></li>
				<li><a href="#">طراحی وب</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">وردپرس</a>
			<ul>
				<li><a href="#">پوسته</a></li>
				<li><a href="#">پلاگین</a></li>
			</ul>
		</li>
		<li><a href="#">توسعه</a></li>
	</ul>
</nav>

حالا اگه کدهای بالا رو در قالب اجرا کنید چیزی شبیه تصویر زیر رو خواهید داشت.

اما این چیزی نیست که ما دنبالش هستیم، بنابراین برای فرم دهی و زیبا سازی به سراغ کدهای css میریم.
اولین کارمون اینه که به شیوه نامه قالبمون مراجعه میکنیم (style.css) و قطعه کد زیر رو در انتهای کدهای موجود قرار میدیم.
* البته بهتره که سری کد های زیر رو در زیر جاهایی مثل header یا wrapper قرار بدید، این بیشتر برای مرتب بودن شیوه نامه ی قالبتونه، اما چیز واجبی نیست و اگه با css  آشنایی ندارید میتونید تو همون آخر کدهای موجود  قرار بدید.

این قطعه کد زیر خیلی مهمه، چون  به وسیله ی همین کد قابلیت داشتن زیر منو و همچین تنظیم نمایش اونها رو برای وقتی که اشاره گر موس بر روی یک منوی اصلی قرار میگیره، خواهیم داشت.

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

خوب، حالا کد زیر رو که تنظیم کننده ی استایل کلی قالب منوی ماست ، در ادامه ی کد بالا قرار بدید.

	nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
	float: right;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;

		}

	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

تا اینجا قالب کلی منوهای ما شکل گرفته، اما هنوز کار تموم نشده چون این حالت فقط برای منوهای اصلیه  و زیر منوها شاملش نمیشن.
بنابراین، در قدم بعدی کد زیر رو در ادامه کدهای قبلی قرار بدید و نتیجه رو مشاهده کنید.

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}

حالا منوهای ما شکل بهتری رو گرفتن…
اما باز یه چیزی کم داره…
اونم اینه که زیر منوی، زیر منوهای ما، در زیر دسته ی بالاترشون قرار میگیرن که این حالت، شکل و نظم خوبی رو نداره.
پس در ادامه این کد زیر رو هم قرار میدیم و کار رو تموم میکنیم.

			nav ul ul ul {
	display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 0;right:100%;

}

 

راستی اگه خواستید موضوعات مطالب سایتتون (در سایتهای وردپرسی) رو هم به نمایش در بیارید، با قرار داد قطعه کد  زیر در در کنار کدهای html بالا در header.php فهرست مطالب  هم به صورت اتوماتیک و آبشاری به نمایش در میاد.

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

<?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?>

 منبع : line25.com & alimir.ir

دیدگاه کاربران در مورد این نوشته

  1. سلام.خسته نباشید
    من در سایتم نمیتونم چ
    ندتا فهرست کشویی بزارم
    میشه بگید پی کار میتونم کنم لطفا؟

    توسط سحر پاسخ

  2. سلام
    اقا من یه منو میخوام که وقتی صفحه رو پایین میکشین دنبال صفحه بیاد
    یعنی پایین بره منو هم باهاش بیاد
    از چی استفاده کنم؟؟

    توسط وحید پاسخ

    1. سلام. کدنویسی پیچیده ای نداره. و حتی میتونید از پلاگین های جی کوئری زیادی (با عنوان sticky menu) استفاده کنید. یک نمونه:
      http://codepen.io/senff/pen/ayGvD

      توسط علی میرزائی پاسخ

  3. با سلام کد داخل صفحه معمولی جواب میده ولی وقتی داخل قالب وبلاگ میخواهم بزارم تمام منو ها و زیر منو ها میاد ولی موس تا اولین زیر منو بیشتر نمیرود
    و برای بقیه منو از بین میرود

    توسط فراز پاسخ

  4. سلام
    من دو نوع منو داخل متن نیاز دارم برای ورد پرس:
    1. مثل صفحه:
    http://www.winkhaus.com/en/window-technology/turn-tilt-fittings/activpilot/activpilot-concept
    چهار دکمه باشه که با کلیک محتوای پایین تصویر رو عوض کنه.
    2. یک منووسط متن که وقتی فشار داده شده یک منو آبشاری رو باز کنه مثل منوهای قرار گرفته در زیر هر عکس لینک زیر:
    http://www.winkhaus.com/en/window-technology
    ممنون میشم راهنمایی بفرمایید.

    توسط علی پاسخ

  5. با عرض سلام تشکر خیلی مفید و ساده آموزش دادید
    موفق باشد

    توسط reza پاسخ

    1. ممنون رضا جان {گل}

      توسط علی میرزائی پاسخ

  6. سلام خدمت اساتید محترم

    یه سوال داشتم که ربطی هم به اینجا نداره . ولی ندونستم کجا باید مطرح کنم

    من یه منوی عمودی که آکوردئون باشه برای وردپرس میخوام درست کنم
    شبیه به سایت:
    www.nextendweb.com
    تا جایی که میدونم ساختار وردپرس اجازه چنین کاری رو نمیده
    یعنی منو فونت آیکون داشته باشه علامت های بازو بسته شدن داشته باشه و آکوردئون باشه
    برای مثال این تصویر رو تماشا کنید لطفا:
    http://up2www.com/uploads/b4c8Menu.jpg

    – – – – – – – – –
    این افزونه:
    Nextend Accordion Menu
    هم که واسه همون سایت و تصویریه که اسم بردم که رایگان نیست!.یعنی باید آپدیت بشه که تمام امکاناتش فعال بشن
    افزونه های مشابه هم هستن که هیچکدوم به اینصورت کامل نیستن

    لطفا شما راهنمایی کنید که چطور میشه همچین منوهایی با افزونه و یا بدونه افزونه ساخت؟؟؟
    اگه بدون افزونه آموزش بدین خیلی عالی میشه

    باور کنین کل اینترنت رو زیر و رو کردم ولی چیزی پیدا نکردم . امیدوارم شما منو راهنمایی کنید

    واقعا ممنونم

    توسط Peyman پاسخ

  7. مرسی
    عالی بود

    توسط محمد پاسخ

  8. سلام
    دوست عزیز من کد بالا را استفاده کردم اما یه مشکل دارم – ببینید من یه باکس دیگه دارم به نام comntent که در بر گیرنده متن سایت هست و وقتی منو کشویی رو به پایین باز میشه زیر اون قرار میگیره و من میخواهم منو روی متن و کلیه محتوای صفحه قرار بگیره لطفا راهنمایی بفرمایید

    توسط افشین پاسخ

    1. سلام، از خاصیت z-index در css استفاده کنید.

      توسط علی میرزائی پاسخ

  9. سلام

    خسته نباشی مرسی بابت آموزش گیر همین منو بودم که به لطف شما حل شد مچکر اگه میشه منو عمودی هم بذارید برای ستون های کناری باز تشکر

    توسط milad پاسخ

    1. سلام میلاد جان؛ میتونی از این اسکریپت استفاده کنی:
      http://tiny.alimir.ir/1u

      توسط علی میرزائی پاسخ

  10. سلام دوست عزیز من آموزش شما رو انجام دادم درست بود دستت طلا فقط چطور می تونم مثل منوی سایت خودت فلش رو به پایین درس کنم کدش رو لطف کنید

    توسط رضا پاسخ

    1. منو دنیای وردپرس -با کمی تغییر- تحت فریم ورک بوت استرپ، شکل گرفته. اما با کمی کدنویسی ساده میتونید همچین استایلی رو ایجاد کنید. به عنوان نمونه:
      http://alimir.ir/dropdown-animation-menu

      توسط علی میرزائی پاسخ

  11. سلام خسته نباشید امید وارم که سالم وصحت مند باشید دوست عزیز دوتاسوال داشتم یک این که من هم مثل دوست که کفت کد ها کامل قرار دادم اما باز هم همان شکل است میشه خودتون توسایت من سر بزید که مشکل از کجا است ممنون میشم که این کار انجام بدهید.

    توسط زمان الله پاسخ

    1. سلام،
      سایتتون رو بررسی کردم ولی متوجه موردی نشدم! لطفا دقیقتر توضیح بدید.

      توسط علی میرزائی پاسخ

  12. سلام
    توی ie 8 کار نمیکنه

    توسط پخش کاغذ پاسخ

  13. سلام من گذاشتم ولی زیر منوها میرن زیر باکسهایی که گذاشتم عکسو ببین کلا میفهمی.
    http://uploadtak.com/images/r2148_menuu.png

    توسط احسان پاسخ

    1. سلام،
      برای رفع این مشکل باید از خاصیت z-index در سلکتور زیرمنوها استفاده کنید (با دادن مقادیر بزرگ به z-index در یک سلکتور، در واقع اولویت بیشتری رو در نمایش اون عنصر ایجاد کردید).

      توسط علی میرزائی پاسخ

  14. دوست من این قسمت سایتت که داخلش کد گذاشتی از چه افزونه ای استفاده کردی؟
    ممنون میشم جواب بدید

    توسط مصطفی پاسخ

    1. سلام،
      بله، این افزونه قبلا در سایت معرفی شده، به لینک زیر مراجعه کنید:
      http://tiny.alimir.ir/s

      توسط علی میرزائی پاسخ

  15. با سلام خدمت شما
    آقا من این کد رو از همون مرحله اول که در قالبم قرار میدم شبیه تصویر شما نشون داده نمیشه و حتی رفتم و کاملش هم کردم اما باز هم حل نشد و منو ها بصورت خطی زیر هم قرار میگیرن و هیچ تغییری هم نمیکنند
    میشه بیشتر توضیح بدید مثلا از اول در کجا قرار بدهم؟ منظورم داخل هدر هستش کجا قرار بدهم تا دستور رو درست اجرا کند؟
    باتشکر فراوان

    توسط 4print پاسخ

    1. سلام.
      اگه ممکنه یه اسکرین شات تهیه کنید و برام بفرستید.
      اگه منوها ظاهر خوبی نداشته باشن، ممکنه مشکل از کدهای css باشه، دقت کنید که تمامی کدهای مربوط به بخش شیوه نامه رو قرار داده باشید.
      در مورد کد مربوط به header.php هم نمیشه چیزی قطعی ای گفت، چون کد نویسی قالب ها، نام توابع، المان ها و… باهم فرق میکنن.

      توسط علی میرزائی پاسخ

  16. در آن نامه ی آخر که نوشتم
    و فرشته ها برایت آوردند
    نمی دانم کدامین نامت را ستوده بودم
    در این نامه می نویسم
    ستوده باد اسم اعظم یاهو

    you have nice page

    توسط دکلمه ها پاسخ

    1. ممنون آقای علیپور، متن زیبایی بود…
      هرچی باشه به وبسایت شما که نمیرسه :)
      میبخشید که نمیتونم سر بزنم، واقعا سرم شلوغه :(

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید