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

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

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
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 ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]

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

طراحی سایت

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

رام رسمی اندروید ۶٫۰٫۱ ملقب به مارشمالو بلاخره برای سامسونگ گلکسی S5 منتشر شد. در این پست تمامی رام های اندروید ۶ سری SM-G900 را به تفکیک مدل با آموزش اختصاصی نصب متنی و ویدیویی قرار میدهیم. همانطور که میدانید حتی اندروید ۵٫۱٫۱ برای گلکسی اس۵ منتشر نشد و این دیوایس با نسخه مشکل دار […]

طرح حنا روی دست رنگ آمیزی با رنگ های طبیعی مثل حنا روی پوست بدن در کشورهای آسیایی بسیار رایج است و زیبایی آن باعث شده است به مدی در دنیا تبدیل شود. در تصاویر زیر نمونه هایی از طرح حنا روی دست را می توانید ببینید:       نوشته طرح حنا روی دست […]

مدل لباس ورزشی زنانه ای که انتخاب می‌کنید، می‌تواند یک مدل ساده باشد یا یک مدل جذاب و مطابق با مد روز. اما بیایید به سال ۲۰۱۶ مدهایی مانند لگینگ های طرح‌دار یا استفاده از پارچه‌ی مخمل در لباس های اسپرت زنانه فکر کنیم که چقد ظاهر جذاب‌تری به لباس های همیشگی می‌داد؛ ۲۰۱۷ قرار […]