طریقه ی ایجاد منو و زیرمنو

آخرین بروز رسانی: اسفند ۱۷, ۱۳۹۶

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/

menu-css-html

نحوه­ ی ایجاد منو و زیر منو با  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; }

menu_submenu

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

نوشته طریقه ی ایجاد منو و زیرمنو اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت اصفهان

پربازدیدترین اخبار
طراحی سایت اصفهان

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت طراحی سایت اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس http://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]

طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

روسیه بزرگترین کشور دنیا با نژادی قدرتمند، فرهنگی متمایز و مناظر نفسگیر همواره توریست های زیادی را به خود جذب می کند. شاید حالا که سفر به قسمت هایی از این کشور بدون ویزا برای ایرانیان فراهم شده است بتوانیم با معرفی جاذبه های گردشگری و توریستی روسیه به شما اطلاعاتی درباره این کشور پهناور […]

زمان فعالیت دفتر وب یار در ایام نوروز                  یا مقلب القلوب و الابصار یا مدبرالیل و النهار                                                                                            یا محول الحول و الاحوال حول حالنا الی احسن الحال حلول سال نو و بهار پرطراوت را که نشانه قدرت لایزال الهی و تجدید حیات طبیعت می باشد را […]

Mozilla Firefox آخرین نسخه از مرورگر وب محبوب فایرفاکس می باشد که اخیرا منتشر شده است.‏ این مرورگر به صورت کامل از HTML5 پشتیبانی می‌کند. نسخه جدید فایرفاکس برای مدیریت ساده‌ تر تب ها و پنجره ها ارتقا فوق العاده ای داشته است و اکنون در این نسخه شما ابزار های مختلفی را برای استفاده […]

Contacts + Pro نرم افزاری محبوب و کاربردی به همراه امکان برقراری تماس و ارسال پیام در اندروید ، که می تواند در اپلیکیشن هایی چون واتس آپ، فیس بوک، توییتر و اپلیکیشن های دیگر به شما امکانات زیادی جهت مدیریت مخاطبان ارائه کند. نرم افزار امکان مدیریت کامل و همه جانبه بر روی مخاطبین […]