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

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

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
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 را به تفکیک مدل با آموزش اختصاصی نصب متنی و ویدیویی قرار میدهیم. همانطور که میدانید حتی اندروید ۵٫۱٫۱ برای گلکسی اس۵ منتشر نشد و این دیوایس با نسخه مشکل دار […]

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

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