آموزش طراحی متریال با Materialize (جلسه 19) - Navbar و منو

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۲ اردیبهشت ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

Materialize تعدادی کلاس رو بوجود آورده که با استفاده از اونا میتونین منو و Navigation های زیبایی رو بوجود بیارید و از اونا در سایتتون استفاده کنید. کلاسهایی که در این زمینه وجود دارند عبارتند از:

  • nav-wrapper : با نسبت دادن این کلاس به div پدر یا parent، مشخص میکنید که این المنت و اجزای اون میخان یک Navbar رو تشکیل بدن
  • brand-logo : یک المنت لینکی رو بصورت المنت اصلی در منو در نظر میگیره
  • nav-mobile : با نسبت دادن این کلاس به ul مورد نظر، اون رو بصورت یک Navigation Bar در میاریم

مثالها

با مثالهای زیر یکی یکی کلاسهای بالا و کاربردشون رو براتون توضیح میدم تا بیشتر باهاشون آشنا بشید.

منوی راست چین:

<nav>
   <div class="nav-wrapper">
      <a href="#" class="brand-logo">TutorialsPoint</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li><a href="#">HTML5</a></li>
         <li><a href="#">CSS</a></li>
         <li><a href="#">JavaScript</a></li>
      </ul>
   </div>
</nav>

میبینید که برای div مورد نظر کلاس nav-wrapper رو در نظر گرفتیم. برای لینک مورد نظر هم کلاس brand-logo رو قرار دادیم تا لینک اصلی بشه. با دادن کلاس hide-on-med-and-down باعث میشیم که در دستگاههای با سایز متوسط و کوچک این ul مخفی بشه.

خروجی:a1

منوی چپ چین:

<nav>
   <div class="nav-wrapper">
      <a href="#" class="brand-logo right">TutorialsPoint</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
         <li><a href="#">HTML5</a></li>
         <li><a href="#">CSS</a></li>
         <li><a href="#">JavaScript</a></li>
      </ul>
   </div>
</nav>

میبینید که برای div مورد نظر کلاس nav-wrapper رو در نظر گرفتیم. با استفاده از کلاسهای right و left هم ترازبندی و محل قرار گیری المنتها رو معین میکنیم.

خروجی:a2

منوی وسط چین:

<nav>
   <div class="nav-wrapper">
      <a href="#" class="brand-logo center">TutorialsPoint</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">                    
         <li><a href="#">Java</a></li>
      </ul>
   </div>
</nav>

خروجی:a3

منوی با لینک فعال:

<nav>
   <div class="nav-wrapper">
      <a href="#" class="brand-logo right">TutorialsPoint</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
         <li><a href="#">HTML5</a></li>
         <li><a href="#">CSS</a></li>
         <li class="active"><a href="#">JavaScript</a></li>
      </ul>
   </div>
</nav>

میبینید که یکی از li ها کلاس active داره.

خروجی:a4

منوی همراه با DropDown:

<div class="col s12 m12 l12">
	<h5>Nav Bar with dropdown menu</h5>
	<ul id="javaDropDown" class="dropdown-content">
		<li><a href="#!">JSF</a></li>
		<li><a href="#!">JSP</a></li>
		<li class="divider"></li>
		<li><a href="#!">Servlets</a></li>
	</ul>
	<nav>
		<div class="nav-wrapper">
			<a href="#" class="brand-logo center">TutorialsPoint</a>
			<ul id="nav-mobile" class="right hide-on-med-and-down">                    
				<!-- Dropdown Trigger -->
				<li><a class="dropdown-button" href="#!" data-activates="javaDropDown">Java<i class="material-icons right">arrow_drop_down</i></a></li>
			</ul>
		</div>
	</nav>
</div>

بعد از اون باید با استفاده از Javascript لینکی که Dropdown هست رو فعال کنید:

$( document ).ready(function){
 $(".dropdown-button").dropdown();
});

خروجی:a5

زمانی که بر روی منوی مورد نظر کلیک میکنید، زیر منوهای اون به زیبایی باز میشن و میتونین آیتم مورد نظرتون رو انتخاب کنید.

منوی همراه با آیکون و لینک:

<nav>
	<div class="nav-wrapper">
		<a href="#" class="brand-logo right">TutorialsPoint</a>
		<ul id="nav-mobile" class="left hide-on-med-and-down">
			<li><a href="#"><i class="material-icons left">search</i>HTML5</a></li>
			<li><a href="#"><i class="material-icons right">view_module</i>CSS</a></li>
			<li><a href="#">JavaScript</a></li>
		</ul>
	</div>
</nav>

خروجی:a6

 

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

رضا

با سلام
واقعا از سایت شما ممنونم بابت این مطالب که می زارین من تا به حال هیچ سایتی مثل سایت شما ندیدم خیلی زحمت می کشین با تشکر 😉

محمد اسفندیاری

موفق باشید دوست عزیز

نیاز به لاگین

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