دسته بندی :
تاریخ انتشار : ۳۰ اردیبهشت ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

mega-dropdown یک منو کشویی رسپانسیو و به راحتی قابل سفارشی بودن می باشد . 

یکی از سخت ترین قسمت زمانی که شما روی یک پروژه کار میکنین اینکه با تعداد زیادی محتوا رو به رو هستین و شما باید یه راه ساده برای ارائه این محتوا به کاربر استفاده کنید . برای نشون دادن این موضوع ما میتونیم سایت آمازمون رو مثال بزنیم که از یه دسته بندی بی نهایت استفاده میکنه . اگه به سایت amazoon برید بالایی سایت در سمت چپ یه منوکشویی میبینید که ما اسمشو میذاریم mega-dropdown این منو یه دسته بندی بی نهایت رو بطور زیبا تو خودش قرار داده بطوری که هر element دارایی زیر مجموعه ایه .

ما سعی کردیم همونو بسازیم ، البته با رسپانسیو بودن بیشتر و زیر شاخه های جذاب تر . در زیر یه انیمیشن از کار این منو قرار میدیم تا بتونین درک کنید ما چی میگیم :

همانطور که شما می توانید از نسخه ی نمایشی متوجه شید . منویی ما با کلیک کردن فعال میشه و همینطور زیر شاخه هاش با Hover کردن روشون نمایش داده میشن ، البته بدونه نیاز به جاوا اسکریپت . (ما از قابلیت خود css بجایی جاوا اسکریت برای این متحرک سازی استفاده میکنیم ) . با این حال  تصمیم گیری در این مورد دسته خودمونه که فکر میکنید کدوم راه برای یه تجربه ای کاربری بهتر میتونه استفاده بشه . css یا javascript . در کل از کاربرها انتظار میره که برای دسترسی به محتوایی جدید رو این منوها کلیک کنن . و hover کردن چیزی ، نشون دهنده "بالقوه بودن" اون موضوعه . به همین دلیله که ما ترجیه میدیم از کلیک برای نمایش منو استفاده کنیم . درصورتی که شما با این دیدگاه مخالفین به راحتی میتونید از hover کردن منو برای نمایش استفاده کنید در آخر تصمیم با شماست . 

  • بوجود آوردن ساختار 

منو کشوییمون از دوتا تگ کلی بوجود میاد : <header> که شامل منومون میشه (.cd-dropdown-wrapper) ، و تگ بعد <main> که شامل محتوایی دیگه سایتمون میشه . تگ .cd-dropdown-wrapper که شامل .cd-dropdown-trigger برای دکمه منومون میشه و تگ .cd-dropdown که لیست شاخه بندهامون تو اون قرار میگیره . 

<header>
	<div class="cd-dropdown-wrapper">
		<a class="cd-dropdown-trigger" href="#0">Dropdown</a>
		<nav class="cd-dropdown">
			<h2>Title</h2>
			<a href="#0" class="cd-close">Close</a>
			<ul class="cd-dropdown-content">
				<li>
					<form class="cd-search">
						<input type="search" placeholder="Search...">
					</form>
				</li>
				<li class="has-children">
					<a href="#0">Clothing</a>
 
					<ul class="cd-secondary-dropdown is-hidden">
						<li class="go-back"><a href="#0">Menu</a></li>
						<li class="see-all"><a href="#0">All Clothing</a></li>
						<li class="has-children">
							<a href="#0">Accessories</a>
 
							<ul class="is-hidden">
								<li class="go-back"><a href="#0">Clothing</a></li>
								<li class="see-all"><a href="#0">All Accessories</a></li>
								<li class="has-children">
									<a href="#0">Beanies</a>
 
									<ul class="is-hidden">
										<li class="go-back"><a href="#0">Accessories</a></li>
										<li class="see-all"><a href="#0">All Benies</a></li>
										<li><a href="#0">Caps &amp; Hats</a></li>
										<!-- other list items here -->
									</ul>
								</li>
								<li class="has-children">
									<a href="#0">Caps &amp; Hats</a>
 
									<ul class="is-hidden">
										<li class="go-back"><a href="#0">Accessories</a></li>
										<li class="see-all"><a href="#0">All Caps &amp; Hats</a></li>
										<li><a href="#0">Beanies</a></li>
										<!-- other list items here -->
									</ul>
								</li>
								<li><a href="#0">Glasses</a></li>
								<!-- other list items here -->
							</ul>
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
					</ul> <!-- .cd-secondary-dropdown -->
				</li> <!-- .has-children -->
 
				<li class="has-children">
					<!-- other list items here -->
				</li> <!-- .has-children -->
 
				<li class="has-children">
					<!-- other list items here -->
				</li> <!-- .has-children -->
 
				<li class="cd-divider">Divider</li>
 
				<li><a href="#0">Page 1</a></li>
				<!-- other list items here -->
 
			</ul> <!-- .cd-dropdown-content -->
		</nav> <!-- .cd-dropdown -->
	</div> <!-- .cd-dropdown-wrapper -->
</header>
 
<main class="cd-main-content">
	<!-- your content here -->
</main>
  • اضافه کردن استایل 

برای دستگاه های تلفن همراه ، ایده اصلی تمرکز بیشتر کاربر بر روی منویی کشوییه زمانی که در تلفن های همراه اونو میبینه . برای همین هم ما به منومون  fixed position میدیم و ارتفاع و عرض رو 100% در نظر میگیریم بصور پیش فرض نمایش منو رو برابر (translateY(-100%)) قرار میدیم .زمانی که کاربر روی دکمه منو کلیک میکنه کلاس .dropdown-is-active به منو اضافه میشه و منو نمایش پیدا میکنه . 

.cd-dropdown {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform 0.5s;
}
.cd-dropdown.dropdown-is-active {
  transform: translateY(0);
}

هنگامی که کاربر رو یه sublevel کلیک میکنه . به منومون برای نمایش کلاس .move-out اضافه میشه در حالی که اگه بخواد مخفی بشه از کلاس .is-hidden برای این کار استفاده میشه . 

.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
  /* push the secondary dropdown items to the right */
  transform: translateX(100%);
}
 
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
  /* push the dropdown items to the left when secondary dropdown slides in */
  transform: translateX(-100%);
}

در دستگاه های بزرگتر (بزرگتر از دید عرض 1024px) ، چون فضایی کافی برای نمایش وجود داره ما به جایگزین کردن محتوایی قابل مشاهده نیاز نداریم . 

@media only screen and (min-width: 1024px) {
  .cd-dropdown {
    position: absolute;
    top: 100%;
    /* reset style*/
    height: auto;
    width: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
  }
  .cd-dropdown.dropdown-is-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
  }
 
  .cd-dropdown-content {
    /* reset mobile style */
    position: static;
    height: auto;
    width: 280px;
  }
  .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
    transform: translateX(0);
    left: 100%;
    height: auto;
  }
  .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
    /* reset mobile style */
    transform: translateX(0);
  }
  .cd-dropdown-content > .has-children > ul {
    visibility: hidden;
  }
  .cd-dropdown-content > .has-children:hover > ul {
    /* when hover over .cd-dropdown-content items - show subnavigation */
    visibility: visible;
  }
  .cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > li > ul {
    /* if .cd-secondary-dropdown is visible - show also subnavigation */
    visibility: visible;
  }
}

نکته : اگه شما میخواید منوتون از سمت چپ باز بشه به راحتی مینوید با اضافه کردن کلاس .open-to-left به .cd-dropdown-wrapper به این کار دست پیدا کنید . 

  • کنترل رویداد ها 

ما  به غیر از کلیک کردن روی آیتم ها برای فعال کردن و نشون دادنشون از جی کوئری زیاد استفاده نکردیم تا کد هامون سبک تر بشه . ما برای این فعال سازی ها از پلاگین  jQuery-menu-aim plugin  استفاده کرده ایم یک پلاگینی که کاربر برای مشاهده کردن آیتم ها براحتی بتونه ازش استفاده کنه . 

ممنونم که تا اینجایی این مقاله هم همراه ما بودید اومیدوارم مورد استفادتون قرار گرفته باشه . 

برچسب : , ,

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • محسن

    سلام. من این منوی dropdown رو به وب پیجم اضافه کردم. خود وب پیج از قبل یک منوی dropup در فوتر داشت. حالا با اضافه کردن رفرنس به فایل main.js در هدر, منوی dropup مذکور با لود صفحه به صورت باز لود میشه. یعنی فایل main.js با توابع جاوااسکریپت منوی dropup فوتر تداخل میکنه. حالا باید چه کار کنم؟

    • admin

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

  • مرتضی فاریابی

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

    • admin

      بله درسته انشالله حتما قرار داده میشه

  • [Mr.mm]

    بسیار عالیییییییی

  • داوود

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

    • admin

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

  • داوود

    ممنونم حسام جان، ولی ببین جایی خوندم و شنیدم که میگن یه طراح خوب نمیتونه یه گرافیست خوب هم باشه و این دو تا از همدیگه به کلی متفاوت هستن، الان من گیج شدم که یعنی باید طرحهای psd رو هم خودم تولید کنم و برم گرافیک و روانشناسی رنگ و اینها رو هم بدونم یا اینکه نه، این وظیفه من نیست و من بعنوان یه طراح باید قالب رو تبدیل کنم؟؟ بنظرتون میشه هم گرافیست و هم طراح خوبی بود؟؟؟ ضمنا مسابقه ای رو که میگین اگه زودتر راه بندازین ممنون میشم.

    • admin

      اگه رو یک چیز تمرکز کنین خیلی خوبه . ببنین طراحی دیداری یک وبسایت اون چیزی که کاربر میبینه معمولا با css , html و jquery انجام میشه خب شما میتونید گرافیک رو بدین دست یکی دیگه طراحی کنه ولی شاید اون چیزی که خودت میخوای از آب در نیاد . برای همینه که دونستن طراحی گرافیکی برای کد نویسی دیداری وبسایتتون خیلی خوبه این راحیه که من رفتم برای همین دارم در موردش نظر میدم البته به طراحی گرافیک علاقه دارم اگه شما علاقه ای تو این زمینه ندارین فقط بخش کد ها رو کار کنین اما بازم میگم یکار باید با برنامه ریزی کامل صورت بگیره تا چنین چیز های ساخته بشه . در رابطه با مسابقه فعلا حامی مالی نداریم و درگیر کارایی دیگه اگه بتونیم حامی مالی گیر بیاریم زودتر شروع میکنیم . عجله نکنین صبر داشتنم یکی از ویژگی های رسیدن به چنین موفقیت هایه .

  • داوود

    آره این خیلی خوبه که شما میگین، یعنی من سوالم اینه که حسام جان الان اینها چقدر کار کردن که به این حد رسیدن که اینقدر قشنگ طراحی می کنن؟؟؟ آخه جالبه برام. یه کتابی هم بود که 101 نکته و ترفند در css که اون رو هم یه خانوم نوشته بود. ما ها هم اگه کار کنیم به حد اونها میرسیم؟؟؟ درسته که پشتکار هم میخواد و لازمه این کار هستش. ضمنا شما واقعا مسابقه ای که میگی رو میذاری؟؟؟ اگه سایت رو ادامه بدی و اینجور که میگی باشه خیلی عالی میشه! من راستش الان فیلم آموزشی و css رو خوندم و دیدم ولی دیگه نمیدونم باید از کجا شروع کنم که بتونم طراح و یا شخصی بشم که بتونم طرحهای psd رو به زیبایی و خوبی به html تبدیل کنم. ضمنا میشه بصورت ایمیل هم باهاتون در ارتباط باشیم و سوالامون و یا اشکالاتمون رو ازت بپرسیم؟؟؟؟ مثلا من الان یه header کوچولو طراحی کردم و میخوام نقاط ضعف و سوالایی رو که دارم بپرسم. چیکار کنم؟؟؟ بازم از اینکه سایت به این خوبی رو راه انداختی و داری اطلاعاتت رو نشر میدی یه دنیا ممنون و سپاسگزارم و امیدوارم اواسط راه دلسرد و خسته نشی، چون راهی که انتخاب کردی هر چند زیبا و قشنگ هستش ولی پرزحمت و زیاد انرژی میگیره. بهرحال تا زمانی که باشی منهم دوستانه و صمیمانه در خدمتت هستم و مشتاق ادامه مطالب شما. البته همین مطالبی هم که گذاشتی رو نگاه نکردم، چون 3 یا 4 روز بیشتر نمیشه که با سایتمون آشنا شدم. مرسی

    • admin

      ببینید طراحی این چنین چیزا یا کارایی روال خودشو داره یعنی شما اگه بدونه روال کار چطوره به راحتی میتونی کارایی زیبایی خلق کنی وقتی شما طرحی که تو ذهنتون هست رو psd اجرا کنید و خیلی قشنگ روش کار کنی و بعد تبدیل به css , html , jquery کنی (طوری تبدیل کنی که اون چیزایی که میخوایی انجام بشه ) دیگه خلق چیزایی دیگه کاری نداره ! شما این افرادی که تو خارج هستن رو ببینی اینا بیشتر از کد نویسی رو طرحاشون کار میکنن یعنی قبل از شروع کار میشینن از قدم اول تا آخر رو قبلش برنامه ریزی میکنن نه اینکه مثل ما شروع به کد نویسی کنن بعد فکر کنن بخوان چیکار کنن . ولی در جواب سوالتون بله شما هم میتونید به این حد برسید ! بله انشالله مسابقه ها یا طرح های دیگه ای میزاریم تازه 1 ماه هم از راه اندازی وبسایت ما نمیگذره اگه خدا بخواد کارایی بیشتر هم میکنیم . در رابطه با مشاوره بله شما هم میتونید با شماره تلفن ما در تماس باشین یا مشکلات یا سوالاتتون در هر رابطه ای رو به ایمیل ما info@roocket.ir بفرستید تا در اولین فرصت جوابتونو بدیم . غیر این انشالله تو تابستون بخش سوالات تخصصی سایتتم راه اندازی میکنیم تا افراد مثل شما سوالاتشونو مطرح کنن . در ضمن اگه بنده فرصت کنم خودمم از این طرح ها اجرا میکنم تا بقیه بتونن استفاده کنن . در آخر ممنون از دلگرمی هاتون انشالله موفق باشید.

  • داوود

    سلام مجدد؛ حسام جان یه سوال داشتم، الان همون خانومی که این طرح رو پیاده سازی کرده(Claudia Romano) چقدر کار کرده که تونسته طرحی به این قشنگی رو اجرا کنه؟؟ منظورم اینه که ما ها چقدر باید کار کنیم که مثل ایشون و یا سایرینی که تو همون سایت هستن بتونیم کدها و طرحهای زیبا بزنیم؟؟ آیا نیاز به زمان و پشتکار زیادی داره؟؟؟؟؟آخه هر چی نگاه میکنم میبینم که چه طرحهای قشنگی رو تو همون سایت (http://codyhouse.co)پیاده سازی کردن و من همچنان دارم برای خودم دیوهای رنگی درست می کنم و دیگه خسته شدم از بس خوندم و هیچ کار عملی انجام ندادم. شما هیچ راهکاری برای این مورد ندارین؟؟ تمرینی؟ مثلا یه Header رو بدی ما طراحی کنیم و بعدش ایراداتشو بگی تا همینجوری پیشرفت کنیم.

    • admin

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

  • داوود

    سلام حسام جان؛ از ترجمه به این خوبی شما سپاسگزارم. دستت درد نکنه. حسام جان این کلاسی که این آخر گفتی ؛ کجای کد هست که ازش استفاده کنیم برای اینکه از سمت چپ باز بشه؟؟

    • admin

      خواهش میکنم نظر لطفتونه . بببنین برای اینکه از طرف چپ باز بشه شما باید کلاس "open-to-left" رو به عنصری که کلاس cd-dropdown-wrapper اضافه کنی تا از طرف چپ باز بشه !

  • سوران

    خیلی عالی زیباست

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :