روز سوم فرانت اند:ساخت منوی کشویی همراه با انیمیشن Css3
با یکی دیگر از آموزش های سری (روز فرانت اند) در خدمت شما هستیم.امروز می خواهیم با نحوه ساخت یک منوی کشویی multi-level یا چند سطحی به همراه انیمیشن CSS3 transitions آشنا شویم.از منوی کشویی برای نمایش ساب منو ها به صورت کشویی و از قابلیت multi-level برای ایجاد منوی آتیم های تو در تو برای منو استفاده می شود.(دموی این منو را میتوانید در صفحه کدپن سایت مشاهده کنید).
ساخت منوی کشویی(HTML)
برای ساخت منوی کشویی ابتدا باید لایه اولیه منو را در سند html ایجاد کنیم،برای اینکار از <nav> برای ایجاد یک لایه نگهدارنده و از تگ <ul>برای ساخت منو و از تگ<li>برای ایجاد آیتم های مربوط به هر بخش از منو استفاده می کنیم.برای درک بهتر توضیحات می توانید از دوره آموزش ویدئویی و انلاین HTML5 استفاده کنید.
<!doctype html> <html> <head> /* Codefriend.ir */ <meta charset="utf-8"> <title>Animated Dropdown Navigation with CSS3 Transitions Demo(Codefriend)</title> </head> <body> <h1>Animated Dropdown Navigation with CSS3 Transitions Demo(Codefriend.ir)</h1> <div class="css-script-ads" align="center"></div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a><span class="dropBottom"></span> <ul> <li><a href="#">Design</a><span class="dropRight"></span> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a><span class="dropRight"></span> <ul> <li><a href="#">XTHML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a></li> <li><a href="#">Interviews</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>
افزودن استایل Css به لایه HTML:
برای اینکه منوی کشویی را که ساختیم زیباتر کنیم و یک رابط کاربری مناسبی بسازیم باید از کدهای css کمک بگیرم.تمامی کدهای سی اس اسی که در زیر استفاده شده است در دوره آموزشی مقدماتی و پیشرفته Css و Css3 به صورت کامل و قدم به قدم توضیح داده شده است.پس اگر مشکلی با هر کدام از قسمت های فایل سی اس اس داشتید میتوانید به این دوره ها مراجعه کرده و به راحتی موضوع مدنظر رو درک کنید.
body { background: url("https://s9.picofile.com/file/8296629492/backgrounds.jpg"); } span.dropBottom, span.dropRight { display: block; box-shadow: inset 2px 0px 0px #FF9; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 2px 0px #FF9; position: absolute; width: 100%; bottom: 0px; } h1 { color: #EDEDED; text-align: center; font-family: 'Open Sans', sans-serif; } nav { display: table; margin: 50px auto; box-shadow: 0px 2px 0px #023333; } ul { margin: 0; padding: 0; list-style: none; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0%; left: 160%; } ul ul li:hover > ul { top: 0%; left: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; } ul li { float: left; position: relative; } ul ul li { float: none; } ul li { background-color: #03A9F4; cursor: pointer; } ul a { text-decoration: none; display: block; color: #FF9; padding: 10px 15px; width: 6em; text-align: center; font-family: 'Open Sans', sans-serif; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: #007373; } ul li a:hover { background-color: #007373; }
به همین سادگی توانستیم یک منوی کشویی چند سطحی همراه با انیمیشن با استفاده از قدرت سی اس اس ایجاد کنیم(موفق باشید).
برچسب:CSS3, آشنایی با مفهوم Front-End و Back-End, آموزش front-end, آموزش responsive, آموزش آنلاین رایگان, آموزش طراحی سایت واکنش گرا, آموزشی مقدماتی, استفاده از hover در css, افزودن استایل Css به لایه HTML, انیمیشن, انیمیشن Css3, انیمیشن در Css, برنامه نویسی front end چیست, خاصیت hover در css, خاصیت کلیک در css, دانلود آموزش طراحی سایت واکنش گرا, دستور hover در html, دوره آموزش ویدئویی و انلاین HTML5, روز سوم فرانت اند, روز فرانت اند, ساخت منوی ابشاری در css, ساخت منوی کشویی, ساخت منوی کشویی در css, سامانه آموزش آنلاین, فایل سی اس اس, فرانت اند, فرانت اند چیست, فیلم آموزش طراحی ریسپانسیو, مفهوم front-end, منوی کشویی multi-level
1 دیدگاه
واقعا خوب بود ،، من برم بقیه ببینمسایت جالبی دارید واقعا لینکتونو برای چندتا از دوستام فرستادم بدردشون میخوره ،، ممنون