تبلیغات

به وبلاگ رسمی مهندس محسن مهرابی خوش آمدید
مهندسی برق
برق قدرت - نحوه ی ساخت منوی بازشو (آبشاری) با HTML و
صفحه اصلی خلاقیت دانلود جزوه تماس با مدیریت سایت تماس با ما
 
برق قدرت
مهندسی برق قدرت
درباره وبلاگ


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


مدیر وبلاگ : محسن مهرابى
نویسندگان
نظرسنجی
نظر شما در مورد مطالب سایت چیست







پیش نیازها:

  1. داشتن اطلاعات پایه در خصوص لیست های نامرتب (بولت دار) در HTML
  2. داشتن اطلاعات اولیه در خصوص css و نحوه ی بکارگیری آن
  3. یک محیط نوشتاری متنی مانند NotePad

همانطور که در گزینه ی نخست پیش نیاز ذکر شد، برای منوهای آبشاری از لیست ها (تگ ul و li) در html استفاده میکنیم و با استفاده از css نحوه ی نمایش آنها را تعیین میکنیم. پس در گام نخست به سراغ کد HTML خواهیم رفت.

کد ایجاد منو در HTML

همانطور که گفتیم برای ایجاد منو در html از لیست های تو در تو کمک خواهیم گرفت، یعنی تگهای ul و li. اجازه بدهید کمتر توضیح دهیم و سریعتر کدها را بررسی کنیم!


<div class="navigation">
<nav>
<ul>
<li><a href="#">آیتم یک</a></li>
<li><a href="#">آیتم دو</a></li>
<li><a href="#">آیتم سه</a>
<ul>
<li><a href="#">آیتم زیرمجموعه یک</a></li>
<li><a href="#">آیتم زیرمجموعه دو</a>
<ul>
<li><a href="#">آیتم زیرمجموعه یک</a></li>
<li><a href="#">آیتم زیرمجموعه دو</a></li>
<li><a href="#">آیتم زیرمجموعه سه</a></li>
<li><a href="#">آیتم زیرمجموعه چهار</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">آیتم چهار</a></li>
<li><a href="http://www.AsreElm.com">عصرعلم</a></li>
</ul>
</nav>
</div>

در بالا کد html منو را مشاهده میکنید که از چند لیست تودرتو ساخته شده و ممکن است کمی برای شما گیج کننده باشد. به همین دلیل ما تصویر زیر را برای درک بهتر شما رسم کرده ایم:

نمای کلی از لیست تودرتو

به منظور درک راحت تر، تگهای لینک (a) حذف شده اند

همانطور که مشاهده میکنید، لیست اصلی توسط تگ <ul> آغاز شده است که حاوی ۵ تگ <li> اصلی میباشد که این ۵ آیتم تشکیل دهنده ی آیتم های اولیه ی منو می باشند. (آیتم یک، آیتم دو، آیتم سه، آیتم چهار، عصرعلم).

آیتم سوم (تگ <li> سوم) دارای زیرمجموعه است بنابراین قبل از اینکه تگ خاتمه (یعنی <li/>) بسته شود، باید کد منوی زیرمجموعه نوشته شود پس با استفاده از تگ <ul> منوی زیرمجموعه ی آیتم سوم را ایجاد میکنیم.

دومین آیتم زیرمجموعه از آیتم سه، خود دارای یک زیر مجموعه است، پس در اینجا نیز قبل از بسته شده تگ <li> باید کد مربوط به زیرمجموعه ی آن ذکر شود.

در واقع هرکدام از <ul> تا <ul/> ها یک منو (یا زیر منو) محسوب میشوند و هر کدام از <li> تا <li/> ها آیتم مربوط به آن!

اگر کد بالا را در یک صفحه ی html نوشته و ذخیره کنید باید لیستی شبیه زیر داشته باشید:

ظاهر منوی اولیه

در این تصویر نیز تودرتو بودن منو به خوبی نشان داده شده است.

اکنون منوی ما در html ایجاد شده است و مابقی کارها باید در css انجام شود به این ترتیب که ابتدا تمام زیرمنوها باید مخفی شوند تا فقط ۵ عنصر اصلی منو (آیتم یک، آیتم دو، آیتم سه، آیتم چهار و عصرعلم) نمایان باشند. در مرحله ی بعد با قرار گرفتن نمایشگر ماوس بر روی هر آیتم زیرمنوی آن نمایش داده شود.

بکارگیری css برای ساخت منوی آبشاری

اگر با css آشنایی داشته باشید حتما میدانید که برای کنترل تگهای ul و li در css از انتخابگرهایی با همین نام استفاده میکنیم. از آنجا که ممکن است لیستهای دیگری نیز در صفحه ی وب ما وجود داشته باشند، بنابراین باید لیست مربوط به منوی ناوبری را از سایر لیستها مجزا کنیم. اینکار را میتوان به دو شیوه انجام داد:

  1. اختصاص کلاس یا آیدی انحصاری به تگ ul
  2. قرار دادن کل منوی ناوبری داخل یک تگ div و اختصاص دادن یک کلاس یا آیدی به تگ div

در اینجا ما شیوه ی دوم را انتخاب کردیم دلیل آن را هم در ادامه ذکر خواهیم کرد.

همانطور که در بخش html مشاهده کردید، تمام محتویات منو داخل تگ div با کلاس navigation قرار داده شده اند، بنابراین میتوانیم عناصر موجود در منو را بدون اینکه سایر لیست ها در صفحه تغییر کنند مورد هدف قرار دهیم، کافی است از کد زیر استفاده کنیم:


.navigation ul{ ... }

در اینصورت تغییرات تنها روی برچسب های ul که داخل عنصری با کلاس navigation قرار دارند اعمال خواهند شد.

قدم نخست: ریست کردن مشخه های منو

قبل از هرکاری بهتر است مشخصه های منو را ریست کنیم. البته اینکار ضروری نیست ولی برای افزایش سازگاری منو با سایر مرورگرها مفید میباشد. برای ریست کردن کافی است مقدار padding و margin را برابر ۰ قرار دهید:


.navigation{
font:.8em/1.8em tahoma;
height:50px;
text-align:center;
padding-top:7px;
}
.navigation ul,
.navigation li,
.navigation a{
margin:0;
padding:0;
}

در کد بالا، علاوه بر ریست کردن مشخصه های li,ul و a بکار رفته در کلاس navigation، خود کلاس navigation را نیز تعریف کردیم و فونت و اندازه ی ارتفاع منو را مشخص کردیم. اگر صفحه ی html خود را Refresh کنید، ظاهر منو به صورت زیر تغییر کرده است:

منوی آبشاری در css

در این مرحله به سراغ بولت های مزاحمی میرویم که در کنار هرکدام از آیتم ها در لیست قرار گرفته اند.

قدم دوم: حذف بولت ها و خط زیر لینک ها

برای اینکه بولت ها حذف شوند باید مشخصه ی list-style برابر none قرار داده شود. همچنین برای لینک ها نیز باید از مشخصه ی text-decoration استفاده کنید:


.navigation ul{
list-style:none;
}
.navigation a{
display:block;
color:#000;
padding:5px 2%;
text-decoration:none;
}

البته ما تغییرات دیگری نیز برای لینک ها درنظر گرفتیم، برای مثال رنگ آنها را از آبی پیشفرض، به مشکی تغییر دادیم، نحوه ی نمایش آنها را به صورت block تعریف کردیم و با استفاده از padding برای هر لینک یک حریم (۵ پیکسل از بالا و پایین و ۲% از چپ و راست) ایجاد کردیم. با اعمال تغییرات و Refresh کردن صفحه شاهد تغییرات زیر خواهید بود:

حذف بولت از لیست و خط زیر لینکحال باید آیتم های موجود در لیست را از حالت عمودی و زیر هم خارج کنیم و آنها را به صورت افقی نمایش دهیم. برای این منظور باید به سراغ تگهای <li> برویم.

قدم سوم: تغییر حالت نمایش از عمودی به افقی

برای اینکه آیتم ها به صورت افقی در کنار یکدیگر قرار بگیرند باید تگهای <li> به صورت inline-block باشند و چون زبان فارسی از راست به چپ نوشته میشود، برای درست نمایش داده شدن ترتیب آیتم ها از راست به چپ باید مقدار float:right را نیز برای آنها در نظر بگیریم:


.navigation li{
display:inline-block;
float:right;
background: #f5f5f5;
border:1px #ccc solid;
min-width:100px;
padding:5px 0;
margin:0 5px;
position:relative;
}

علاوه بر موارد قبلی، با استفاده از background و border برای هر آیتم رنگ زمینه و خط مرزی تعریف کردیم تا کمی رنگ داشته باشند. با استفاده از padding و margin بین آنها کمی فاصله ایجاد کردیم تا از حالت بهم چسبیده خارج شوند. همچنین حداقل پهنای هر آیتم را برابر ۱۰۰ پیکسل تعریف کردیم.

از آنجا که قرار است منوی ما دارای زیر منو باشد، باید تگ <li> دارای مشخصه ی position با مقدار relative باشد در غیر اینصورت زیرمنوها به درستی نمایش داده نخواهند شد. اگر کدها را به درستی اعمال کرده باشید باید ظاهر منو به صورت زیر تغییر یافته باشد:

منوی افقی اولیه

برای مشاهده در اندازه ی حقیقی بر روی تصویر کلیک کنید.

گرچه تمام تگهای li را به صورت راستچین و inline-block تعریف کردیم تا در کنار یکدیگر قرار بگیرند ولی مشاهده میکنید که آیتم های زیر منو (در آیتم سه) به صورت عمودی و زیر هم قرار گرفته اند. در گام بعدی به سراغ آیتم های زیر منو میرویم.

قدم چهارم: تغییر نحوه ی نمایش آیتم های زیرمنو

قبل از اینکه نحوه ی کنترل آیتم های زیر منو را در css بیان کنیم اجازه دهید یکبار دیگر به ساختار html توجه کنیم. در قسمتی که زیرمنوی آیتم سه ایجاد شده است، کد html به این صورت است:

نحوه ی قرارگیری عناصر مادر و بچه

به این صورت که A نسبت به B مادر محسوب میشود (A دارای دو فرزند B است) و B دوم (آیتم زیرمجموعه دو) نسبت به Cها مادر محسوب میشود (B دارای ۴ فرزند C است). در css برای کنترل عناصر فرزند به این صورت عمل میکنیم:


.navigation li li { ... }

مفهوم کد فوق اینگونه است: تگهای li فرزند که داخل کلاس navigation قرار گرفته اند.

با این توصیف کد بالا، هم دو فرزند B را نسبت به A هدف قرار میدهد و هم ۴ فرزند C را نسبت به B دوم (آیتم زیر مجموعه دو). حالا میتوانیم تغییرات دلخواه را برای آیتم های فرزند اعمال کنیم:


.navigation li li{
background:#fff;
width:100%;
margin:1px 0;
border:1px #ccc solid;
}

بخش اصلی کد بالا width:100% است. با این مشخصه پهنای تمام عناصر فرزند را برابر پهنای عنصر مادر قرار دادیم (۱۰۰% فضا). به این ترتیب منوی ما به شکل زیر تغییر خواهد کرد:

اصلاح عناصر فرزند در منو

برای مشاهده در اندازه ی حقیقی بر روی تصویر کلیک کنید.

در مرحله ی بعد باید اندازه ی آیتم سه و زیرمجموعه های آن را اصلاح کنیم.

قدم پنجم: اختصاص پهنای ثابت به زیرمنوها

همانطور که تگهای li نسبت به یکدیگر حالت والد و فرزند دارند، تگهای ul نیز اینچنین هستند. بنابراین اگر یک تگ ul داخل تگ ul دیگری قرار بگیرید، تگ بیرونی تر والد و تگ داخلی تر فرزند محسوب میشود. (در تصویر مربوط به مادر و فرزندی li به تگهای ul نیز توجه کنید!).

با این تفاسیر و با توجه به اینکه میدانیم بیرونی ترین تگ ul همان منوی اصلی و حاوی آیتمهای اصلی (آیتم یک، آیتم دو،…،عصرعلم) است پس اولین زیرمجموعه ی آیتم سه، اولین فرزند تگ ul اصلی محسوب میشود (برای درک بهتر به کد html مراجعه کنید).

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


.navigation ul ul { ... }

به این معنی که تگهای ul فرزندی که داخل کلاس navigation قرار گرفته اند.

پس برای اعمال تغییرات در تگهای ul فرزند باید کد زیر را لحاظ کنیم:


.navigation ul ul{
position:absolute;
top:44px;
right:0;
border:1px #999 solid;
width:210px;
display:block;
padding:5px;
}

اگر بخاطر داشته باشید، عناصر li را با position برابر relative تعریف کرده بودیم ولی در اینجا باید زیرمنوها به صورت absolute تعریف شوند تا جایگاه هر زیرمنو و محل قرار گیری آن مشخص باشد. به این ترتیب با استفاده از مشخصه ی top مقدار ۴۴ پیکسل فاصله از بالا تعیین شده است و فاصله از سمت راست ۰ در نظر گرفته شده است.

همچنین پهنای زیرمنو برابر ۲۱۰ پیکسل تعیین شده است. اگر پهنا را تعریف نکنیم در مراحل بعدی به مشکل برمیخوریم. شما میتوانید با ایجاد تغییرات در این اعداد و اندازه ها مفهوم و عملکرد آنها را درک کنید.

نکته ی مهمی که در کد بالا قرار دارد عبارت display:block است که باید به display:none تغییر یابد. این مقدار به صورت موقتی قرار داده شده است و در ادامه تغییر خواهد کرد اما برای اینکه اعمال تغییرات راحت تر انجام شود فعلا تغییری در آن ایجاد نخواهیم کرد. (اگر از ابتدا مقدار display:none را اعمال کنیم قادر نخواهیم بود تغییرات را مشاهده کنیم).

با اعمال کد بالا، ظاهر منو اینگونه خواهد شد:

زیرمنوی سطح یک

مشاهده میکنید که جایگاه زیرمنوی نخست (محتوی آیتم زیرمجموعه یک و آیتم زیرمجموعه دو) به درستی تعیین شده است ولی زیرمنوی دوم باید در کنار زیرمنوی اول قرار بگیرد تا وقتی ماوس بر روی “آیتم زیرمجموعه دو” قرار میگرد نمایش داده شود.

قدم ششم: اصلاح جایگاه زیرمنوی دوم (نوه ی منوی اصلی)

همانگونه که برای زیرمنوی فرزند اقدام کردیم باید برای زیرمنوی نوه (فرزندِ فرزند منوی اصلی) نیز اقدام کنیم، به این ترتیب خواهیم داشت:


.navigation ul ul ul{
position:absolute;
top:0px;
right:210px;
display:block;
}

حتما توجه کرده اید که بجای ul ul اینبار ul ul ul داریم. مقدار position برای تمام زیرمنوها باید absolute باشد. اینبار مقدار top برابر ۰ درنظر گرفته شده تا این زیرمنو در کنار زیرمنوی قبلی قرار بگیرد و چون مقدار right برابر ۲۱۰px تعریف شده است، این منو به همین مقدار به سمت چپ هدایت خواهد شد.

در اینجا نیز به display:block توجه کنید. این مقدار باید در انتهای کار به display:none تغییر یابد. پس تا به اینجا ظاهر منو به اینصورت خواهد بود:

اصلاح زیرمنوی سطح دو

حال که از جایگاه قرارگرفتن زیرمنوها اطمینان پیدا کردیم و مطمئن شدیم که در جای مناسب و درستی نمایش داده میشوند میتوانید display:block را در قطعه کد بالا (و کد قبلی) که با رنگ قرمز مشخص شده بودند به display:none تغییر دهیم. با اینکار زیرمنو ها مخفی خواهند شد و منو را اینگونه خواهیم داشت:

منوی اصلی

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

قدم هفتم: نمایش زیرمنوها در صورت قرار گرفتن ماوس بر روی آیتم

برای نمایش داده شدن زیرمنو ها کافی است وقتی نشانگر ماوس بر روی تگ li مادر قرار میگیرد، حالت نمایش آنها را از display:none به display:block تغییر دهیم. برای این منظور از کلاس کاذب hover: در css استفاده میکنیم.


.navigation ul li:hover > ul{
display:block;
}

مفهوم کد بالا این است که به مرورگر دستور میدهد هنگامی که در کلاس navigation، ماوس بر روی یکی از آیتم های (li:hover) منو (ul) قرار میگرد، اولین (<) زیرمنو (اولین ul فرزند یعنی ul ul) را نمایش بده! یعنی حالت display:block را به آن اختصاص بده.

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

مشاهده نمونه آنلاین

نمونه ی آنلاین در دو مدل نمایش داده شده و کمی رنگ و لعاب به آن داده ایم و با استفاده از css3 کمی پویایی به منو بخشیده ایم. اینکار با استفاده از مشخصه های transition و gradient صورت گرفته است. میتوانید با کلیک بر روی لینک زیر کد html و css آموزش را دریافت کنید و در طرح ها و یا سایت خود مورد استفاده قرار دهید. (افکتهای css3 تنها در مرورگرهای جدید پشتیبانی میشوند، در صورتی که از مرورگرهای قدیمی مانند IE7 یا IE8 استفاده میکنید قادر به مشاهده ی این افکتها نخواهید بود).

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





نوع مطلب :
برچسب ها : دانشگاه آزاد خرم اباد، دانشگاه آزاد واحد خرم اباد، برق قدرت دانشگاه آزاد خرم آباد، خرم اباد، دانشگاه خرم اباد، آزاد خرم اباد،
لینک های مرتبط :
دوشنبه 14 فروردین 1396 10:22 ق.ظ
This is a good tip especially to those fresh to the blogosphere.

Short but very precise information… Many thanks for sharing this one.
A must read article!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
.navigation li{ display:inline-block; float:right; background: #f5f5f5; border:1px #ccc solid; min-width:100px; padding:5px 0; margin:0 5px; position:relative; }