آموزش ساخت منو با css
ساخت منو با css
در این آموزش یک منوی آبشاری زیبا با html و css رو آموزش میدیم ، این آموزش بسیار ساده هست و کد های استفاده شده نیز در اختیار شما قرار داده شده ، که علاوه بر مشاهده توضیحات و راهنمایی ها قادر به استفاده صحیح از کد نیز باشید.
در کد زیر ، 6 منوی ایستا بصورت کنار هم رو ایجاد میکنیم ، توجه داشته باشید که هنوز قابلیت منوی آبشاری در کد زیر فعال نشده و فقط کدهای html و متن منو هارو کنار هم قرار میدیم
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>
برای زیبا سازی و استایل دهی به کد بالا ، از css زیر استفاده میکنیم
/* Giving a background-color to the nav container. */ nav { margin: 100px 0; background-color: #E64A19; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ nav ul { padding:0; margin:0; list-style: none; position: relative; } /* Positioning the navigation items inline */ nav ul li { margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; } /* Styling the links */ nav a { display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } /* Background color change on Hover */ nav a:hover { background-color: #000000; }
برای ایجاد قابلیت آبشاری یا Drop down تگ <ul> رو داخل تگ <li> قرار میدیم.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- First Tier Drop Down --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a></li> </ul> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>
همچنین برای استایل دهی به منوی آبشاری ، کدهای زیر رو در فایل css قرار میدیم
/* Hide Dropdowns by Default * and giving it a position of absolute */ nav ul ul { display: none; position: absolute; top: 100%; } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:inherit; } /* Fisrt Tier Dropdown */ nav ul ul li { min-width:170px; display:list-item; position: relative; }
دانلود فایل آموزش
سایر لینک ها :