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

پنج شنبه, ۱۶ام اردیبهشت , ۱۳۸۹ | ۳۱ دیدگاه

پست میهمان : سلام ، امروز میخواهیم طریقه ایجاد یک منوی یازشو را با هم یاد بگیریم. می دانیم که امروزه منوهای بازشو در طراحی صفحات وب بسیار کاربرد دارند و می توانیم از آنها در زیبایی سایت خود و دسترسی آسان به صفحات دیگر استفاده کنیم.در ابتدا ما از کدهای html که در ایجاد منو به ما کمک می کنند و کاربرد دارند استفاده می کنیم.
برای اینکار ابتدا یک تگ div ساخته و id= nav قرار می دهیم. سپس شروع به ساخت منو با استفاده از تگ ( ul ) می کنیم. همانطور که در کدهای زیر می بینید ما یک لیست نامرتب ( ul ) با کدهای استاندارد داریم که باید در قسمتNavigation قرار گیرد.

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

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

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

<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photos</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>

پس از اتمام  کدهای html  ، حالا نوبت css  است :

کدهای CSS

ابتدا ما  تغییراتی را در ویژگی    id  تگ  div که آن را به اسم   #nav تعریف کردیم انجام می دهیم . اول برای تعیین ویژگی کلی صفحه  پهنا و ارتفاع صفحه  و اندازه قلم را تعیین می کنیم . البته ممکن است با تغییر قلم همترازی  پهنا و ار تفاع تغییر کند ولی مسئله ای پیش نمی آید.  سپس  خط بعدی کد زیر  list-style :none قرار داده تا شکل های کنار لیست را پاک کنیم.

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}

این تکه کد زیر مرحله  مهم ساختن نوار منو است  . اگر ما خصوصیت  flot :left   قرار دهیم تگ   <div> ما را به حالت شناور در می آورد . و لیست ما از حالت پلکانی  به صورت عمودی و کنار هم در می آید . فراموش نکنید که  خصوصیت Position : relative انتخاب کرده تا لیست نمونه کار به عنوان والد معرفی شود ، زیرا منوی باز شو ما باید توسط آن حمایت و به جلو برده شود.

#nav ul li {
float: left
position: relative;
}

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

#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:non;
color:#999;
}

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

بخش اول کد مربوط به  دومین  تگ < ul>  ما  می باشد که با  مقداردهی  خصوصیت  display : none   از قرار گرفتن المانی در تگ div  جلوگیری می کنیم .

بخش دوم کد نیز برای  اینکه المان کل سطر خود را اشغال کند خصوصیت  display را با    block مقدار دهی می کنیم.

سپس  ویژگی  position  منوی بازشو را برای اینکه به صورت  زیر هم باشد ، absolute   قرار می دهیم.

#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}

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

#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

کد های کامل css

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

پ ن : این پست توسط نویسنده میهمان سینا ی عزیز نوشته شده که با وجود سن وسال کمی که داره اما مهارت خوبی و از خودش نشان داده و امیدوارم شاهد فعالیتهای بیشتری از سینا جان در آِ تی تی باشیم.

پستهای مرتبط :
۹روش برای جایگزینی نوشته با تصویر با استفاده از CSS
لودینگ برای صفحات با استفاده از جاوا اسکریپت و سی اس اس
مرجع کامل دستورات CSS2
بهینه سازی کدهای CSS
Cheat Sheet (خلاصه دستورها) برای CSS
نوشته های سایه دار توسط CSS

Be Sociable, Share!


۳۱ دیدگاه


  1. Hesam
    ۱۶ اردیبهشت ۱۳۸۹

    یه مدته گیر دادی به منوی باز شو با سی اس اس به خدا یادگرفتم !
    خیلی وقت پیش علیها گذاشته بود (+ دوشتان کپی پیستی) و چند روز قبل هم یه بلاگ خوبم دوباره به درخواست یکی از خواننده هاش گذاشته بود و بار سومم اینجا ؟ …




  2. Hesam
    ۱۶ اردیبهشت ۱۳۸۹

    اقا سینا ، شما وبلاگی ندارید ؟
    و چندسالتونه ؟




  3. hossein hashemi
    ۱۶ اردیبهشت ۱۳۸۹

    منوی خوبیه فقط تو IE6 کار نمی کنه .




  4. باغ بان باشی
    ۱۷ اردیبهشت ۱۳۸۹

    ممنون . دستت درد نکنه




  5. یه دوست خوب
    ۱۰ خرداد ۱۳۸۹

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




  6. ایمان
    ۱۷ خرداد ۱۳۸۹

    آقا خیلی عالی بود
    از وقتی که صرف می کنید ممنون




  7. نوید
    ۲۹ خرداد ۱۳۸۹

    خیلیییی خیلییییییییییییییییییییییییییییی ممنون و اینکه من تست نکرذم ولی اگه تو ie6 به بالا کار نکنه به چه دردی میخوره؟!




  8. نام (لازم)
    ۱۳ تیر ۱۳۸۹

    خیلی ممنون استادم گفته بود اگه این کارو انجام ندادید سر کلاس نیاین:)))))))))))))))




  9. سلامت بخش
    ۱۳ مرداد ۱۳۸۹

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




  10. سارا
    ۱۷ مرداد ۱۳۸۹

    سلام
    ممنونم از آموزشهای خوبتون
    لطفا آموزش منوی کشویی رو هم بزارین




  11. محسن
    ۲۵ مرداد ۱۳۸۹

    سلام

    ممنون از آموزش مفیدتون…

    یه سوال داشتم که البته میدونم شاید خیلی کلی باشه و کمی هم مبهم!
    من تازه CSS یاد گرفتم و هنوز تجربه ی عملی ندارم.
    از دوستانی که تجربه ی عملی زیادی دارم یه سوال داشتم و اون اینکه معمولاً ما چه وقتهایی برای div های صفحه از خاصیت های float , relative, absolute استفاده میکنیم؟
    البته من مفهوم اینهارو میدونم.
    منظورم اینه که به لحاظ آماری اینها بیشتر برای چه div ها یا المان هایی استفاده میشن.




  12. susan
    ۲۵ مرداد ۱۳۸۹

    ممنون خیلی خوب بود فقط اگه میشه بحث آموزش php رو هم بزارید که دیگه حسابی عالی میشه




  13. مهدی
    ۵ آذر ۱۳۸۹

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




  14. koZZet
    ۱۱ آذر ۱۳۸۹

    خیلی ممنون… من فقط یه مشکل داشتم با این منو و اونم اینه که حالت gradiant منو رو من نتونستم توو منوهام داشته باشم مثل این نمونه ای که گذاشتین… چرا؟




  15. koZZet
    ۱۱ آذر ۱۳۸۹

    خدمت آقا محسن:
    وقتی flot رو میذاریم برای اینه که بتونیم تعیین کنیم کهDIV سمت چپ صفحه باشه یا راست (به طور پیش فرض چپ صفحه قرار میگیره)
    برای DIV احتیاجی نیست از absolute یا relative استفاده بشه، همین که flot:right/left گذاشته بشه کافیه…
    در مورد tableها برایساخت منو ،برای اینکه flot عمل کنه باید قبلش حتما position:absolute باشه (در غیر این صورت نمیتونیم table رو جابه جا کنیم و زیر لینک یا سمت چپش قرار بدیم) و البته باید margin: 0 auto رو حتما اضافه کنیم تا در resolutionهای متفاوت مانیتور فاصله منو از لینک تغییر نکنه…

    اگر بد توضیح دادم معذرت




  16. koZZet
    ۱۱ آذر ۱۳۸۹

    البته همون float منظورم بود…




  17. koZZet
    ۱۱ آذر ۱۳۸۹

    gradiant منو ها رو متوجه شدم… باید عکسش رو داشته باشم

    sorry




  18. الهام
    ۱۴ آذر ۱۳۸۹

    این پست ها pdf ندارن؟ می خوام dl کنم




  19. m
    ۴ دی ۱۳۸۹

    سلام من از این منو تو navigation استفاده کردم
    اما بعدش یعنی پایینش content گذاشتم ، و منو باز شو خوب کار نمی کنه ، چون جا نداره ک بازشه .
    باید چی کار کنم که مشکل حل شه خیلی فوری هست کارم
    .
    یعنی می خوام منو بیوفته رو قسمت پایینیش که مشکل حل شه(یعنی وقتی موسو رو منو باز شو می برم منو باز شه و بیوفته رو قسمت پایینی )
    تو حالت عادی انجام نمیشه ! منتظر جواب شمام




  20. m
    ۴ دی ۱۳۸۹

    سلام من منتظرماااااا plz help




  21. حسین
    ۱۹ بهمن ۱۳۸۹

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




  22. رويا
    ۲۱ بهمن ۱۳۸۹

    سلام من الان چن ماهیه میخوام وب درست کنم نمیدونم تو مراحل اولیه باید چیکار کنم اگه ممکنه توضیح بدید یا اگرم یا برنامش واسم ایمیل بدید که خیییییلی ممنون میشم با تشکر فراوان




  23. sara
    ۳ فروردین ۱۳۹۰

    بابا خیلی چاکریم،دنبالش می گشتم،دمت گرم




  24. مرجان
    ۶ فروردین ۱۳۹۰

    خیلی خوب بود ممنونم




  25. وحید
    ۱۱ تیر ۱۳۹۰

    اگه امکان داره مراحل اولیه طراحیو به من با زبون ساده توضیح بدید
    دم شما چندتاااااااااااااااااااااااا



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