سئو سایت طراحی سایت تبلیغات
خدمات ، شرکت ، خدمات تبلیغات ، شرکت طراحی سایت ، شرکت سئو سایت ، سئو ، سئو سایت,سئو وبلاگ, سئو سایت در اصفهان,سئو سایت اصفهان, بهینه سازی وب سایت,طراحی سایت در اصفهان , طراحی سایت , طراحی سایت حرفه ای
طریقه ی ایجاد منو و زیرمنو
برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/
نحوه ی ایجاد منو و زیر منو با Html و Css
همانطور که می دانید یکی از مهم ترین بخش های وب سایت که منوی ناوبری می باشد و جز بخش های بسیار تزئینی و تعاملی صفحه است .در این مقاله شما را با نحوه ی ایجاد منو و زیر منو آشنا خواهیم کرد.به طوریکه در پایان این آموزش شما می توانید یک منوی ناوبری تعاملی ایجاد نمایید. با تیم طراحی سایت وب یار همراه باشید.
در مرحله ی اول باید کد های html مربوط به منوی اصلی در یک فایل با پسوند html نوشته و ذخیره شود. برای نوشتن منو در html تگ های ul و li مورد استفاده قرار می گیرد .
<!DOCTYPE html> <head> <title>DropDown Menu with HTML and CSS</title> </head> <body> <nav> <ul> <li><a href="#">طراحی سایت </a></li> <li><a href="#">سئوسایت </a></li> <li><a href="#">طراحی فروشگاه اینترنتی </a></li> <li><a href="#">درباره وب یار</a></li> <li><a href="#">تماس با وب یار</a></li> </ul> </nav> </body> </html>
کد بالا یک فهرست توسط ul ایجاد می کند و آیتم های منو در درون این فهرست و در تگ li قرار می گیرند. کد های بالا لیستی از منوی ساده ی عمودی فاقد زیر منو را نمایش می دهد که شامل ۵ منوی اصلی می باشد.
تا اینجا تنها منو های اصلی طراحی شده است , حال برای این که منو هایی با زیر منو داشته باشیم باید درون آیتم دلخواه خود که می خواهیم زیر منو داشته باشد یک بلاک ul و li اضافه کنیم. برای مثال می خواهیم به منوی ” طراحی سایت ” خود ۳ زیر منو اضافه کنیم. به کد های زیر توجه کنید.
<li><a href="#"> طراحی سایت </a> <ul> <li><a href="#">طراحی سایت اصفهان </a></li> <li><a href="#"> طراحی سایت در اصفهان </a></li> <li><a href="#"> طراحی سایت حرفه ای </a></li> </ul> </li>
با توجه به کد های بالا برای اضافه کردن زیر منو به منوی اصلی “طراحی سایت” باید یک بلاک کامل ul و li به تگ li آن اضافه کنیم. به همین ترتیب می توانید به سایر منو ها هم زیر منو اضافه کنید.
<nav> <ul> <li><a href="#"> طراحی سایت </a> <ul> <li><a href="#">طراحی سایت اصفهان </a></li> <li><a href="#"> طراحی سایت در اصفهان </a></li> <li><a href="#"> طراحی سایت حرفه ای </a></li> </ul> </li> <li><a href="#"> سئو سایت </a> <ul> <li><a href="#">سئو سایت اصفهان </a></li> <li><a href="#"> سئو سایت در اصفهان </a></li> <li><a href="#"> سئوداخلی سایت</a></li> </ul> </li> <li><a href="#">طراحی فروشگاه اینترنتی </a></li> <li><a href="#">درباره وب یار</a></li> <li><a href="#">تماس با وب یار</a></li> </ul> </nav>
بعد از این که نوشتن کد های html تمام شد نوبت به استایل دهی و تعریف کلاس های css می شود.
در این مرحله ابتدا باید کاری کنیم که در حالت عادی تنها منو های اصلی به نمایش درآیند و تنها وقتی که موس بر روی گزینه های منو می رود و یا بر روی آنها کلیک می شود زیر منوی آن ها به نمایش در آید به همین خاطر باید کد های css زیر را به استایل خود اضافه نمایید.
ul li ul { Display:none; }
از این کد برای مخفی کردن زیر منوهای منوی اصلی در حالت اولیه استفاده می شود.
ul li:hover ul } display: block; {
از این کد برای نمایش زیر منوهای منوی اصلی هنگامی که موس بر روی هر کدام از آن ها قرار می گیرد استفاده می شود.
نکته ی مهم دیگر استفاده از Position:relative می باشد. که قرار دادن Position در حالت relative باعث می شود که محل قرار گیری هر زیر منو با توجه به منوی راس آن باشد.
ul { Position: relative; }
با استفاده از قطعه کد زیر می توانید منو های اصلی را در کنار هم قرار دهید.
ul li { Display:inline-block; }
کد های زیر نمونه کد css برای ایجاد یک منویی با طراحی ساده می باشد. این کد ها صرفا به عنوان نمونه می باشد و شما می توانید بنابر نیاز خود این کد ها را تغییر دهید.
ul { list-style:none; } li { float: right; width: auto; position: relative; height: 40px; } ul li { ; float: right ; font-family:'yekan' ; display: inline-block } ul li a { padding:5px 18px 0px 10px; font: 15px 'Yekan'; ; font-weight:bold color:#323232; max-height:33px; margin-top:3px; line-height:0px; display: inline-block; } ul li ul { Display:none; ; padding: 0 margin:5px; position: absolute; transition: all 0.5s ease 0s; visibility: hidden; width: 150px; ; Z-index:1 margin-right:-10px; } ul li ul li { width:150px; height:auto; text-align:center; padding:10px; background-color:#dcedc8; border:1px solid #BDBDBD; opacity: .85; } ul li ul li:hover { width:150px border:1px solid #ffc107 background-color:#ffc107 } ul li:hover ul { display: block; ; opacity: 1 ; visibility: visible } ul li ul li a { color: #000000; width: 150px; text-align: center; padding:15px; }
درپایان از توجه شماهمراهان عزیز وب یار بسیار سپاس گذاریم. برای دریافت آموزش های بیشتر طراحی سایت تیم طراحی سایت وب یار را به خاطر بسپارید.
نوشته طریقه ی ایجاد منو و زیرمنو اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.
طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت طراحی سایت اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس http://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]
طراحی سایت در اصفهان طراحی سایت و سئو سایت در اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]
روسیه بزرگترین کشور دنیا با نژادی قدرتمند، فرهنگی متمایز و مناظر نفسگیر همواره توریست های زیادی را به خود جذب می کند. شاید حالا که سفر به قسمت هایی از این کشور بدون ویزا برای ایرانیان فراهم شده است بتوانیم با معرفی جاذبه های گردشگری و توریستی روسیه به شما اطلاعاتی درباره این کشور پهناور […]
زمان فعالیت دفتر وب یار در ایام نوروز یا مقلب القلوب و الابصار یا مدبرالیل و النهار یا محول الحول و الاحوال حول حالنا الی احسن الحال حلول سال نو و بهار پرطراوت را که نشانه قدرت لایزال الهی و تجدید حیات طبیعت می باشد را […]
Mozilla Firefox آخرین نسخه از مرورگر وب محبوب فایرفاکس می باشد که اخیرا منتشر شده است. این مرورگر به صورت کامل از HTML5 پشتیبانی می‌کند. نسخه جدید فایرفاکس برای مدیریت ساده تر تب ها و پنجره ها ارتقا فوق العاده ای داشته است و اکنون در این نسخه شما ابزار های مختلفی را برای استفاده […]
Contacts + Pro نرم افزاری محبوب و کاربردی به همراه امکان برقراری تماس و ارسال پیام در اندروید ، که می تواند در اپلیکیشن هایی چون واتس آپ، فیس بوک، توییتر و اپلیکیشن های دیگر به شما امکانات زیادی جهت مدیریت مخاطبان ارائه کند. نرم افزار امکان مدیریت کامل و همه جانبه بر روی مخاطبین […]