در این آموزش طراحی سایت، قصد داریم با مفاهیمی که تا به حال به شما آموزش داده ایم، یک منوی افقی ساده را با استفاده از css و html ایجاد کنیم. این آموزش برای مبتدیان طراحی وب، بسیار مفید است. برای ساختن منوهای افقی بصورت غیر اصولی راه های زیادی وجود دارد که معمولاً افردا مبتدی از آن ها استفاده می کنند. یکی از ایرادات ساخت منوی غیر استاندارد، این است که از نظر html معنایی، برای مرورگها و موتورهای جستجو قابل درک نیست. در طراحی صفحات وب، منوی افقی، لیستی از گزینه هاست که هر گزینه یک پیوند به صفحات یا قسمت های دیگری دارد، بنابراین منوها باید با عناصر مخصوص ایجاد لیست (تگ های ul)، پیاده سازی شوند.
می توانید لیست منوهای دیگری که در آنلاینر آموزش داده شده است را در زیر مشاهده کنید :
- منوی کشویی افقی
- منوی کشویی عمودی
- منوی آکاردئونی (کشویی)
- منوی عمودی از روی طرح گرافیکی فتوشاپ
- منوی افقی کاربردی و استفاده از تکنیک double border
- تب منوی افقی
- تب منوی عمودی
[hdplay id=59]
برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :
[free_vip]
[video_download cat=’html’ url=’https://onliner.co/css-videos/creating-simple-horizontal-nav.mp4′]دانلود فیلم آموزش ساخت منوی افقی ساده با CSS[/video_download]
[onliner_button type=”edu-demo” url=’http://dl.onliner.ir/css-snippets/simple-horizontal-nav.zip’]دانلود دمو[/onliner_button]
[/free_vip]
دسترسی سریع :
- آموزش قبلی : فیلم آموزش وسط چین کردن محتوای اصلی سایت با CSS
- آموزش بعدی : فیلم آموزش ساخت منوی افقی براساس طرح گرافیکی
- لیست فیلم ها : فیلم های آموزش جامع CSS
3 دیدگاه دربارهٔ «فیلم آموزش ساخت منوی افقی ساده با CSS»
ببخشید من یک مشکل در این منو ساده دارم و این مشکل اینه که از چپ به راست منو من مینویسه مشکل کجاست اینم یک عکس ازش::
http://8pic.ir/images/2omi274ilcdu2yuv2c88.jpg
سلام.عناصر li رو باید از سمت راست بچینید و در واقع float:right به عناصر li بدید.
بازتاب: آموزش CSS | ساخت منوی افقی و استفاده از تکنیک double border