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


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.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

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

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



Source link

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*
*

..................................................................................طراحی وب سایت , سئو وب سایت , طراحی قالب وردپرس , فروش بک لینک , فروش رپورتاژ.................................................................................. رد کردن

آفلاین

در حال حاضر نیستیم. لطفا پیام خود را ارسال کنید, در اولین فرصت رسیدگی میکنیم. با تشکر : تیم پشتیبانی اسپادان

هر سولی دارید بپرسید.

شروع چت