سلام برنامه | HiProgram

آموزش ساخت منو کرکره ای (dropdown) موضوع بحث امروز سلام برنامه

در آموزش ساخت منو کرکره ای (dropdown) می آموزید که چطور یک منو با زیر منو های آن را بسازید.

امروز منو های زیر منو دار را در هر سایتی میبینید هدف ما این است که دست شما را برای خلق منو باز بگذاریم

در این آموزش دست شما برای شخصی سازی بسیار باز است و می توانید منو مد نظر خود را بسازید

سلام برنامه این آموزش را کاملا تصویری و به زبان فارسی برای شما تهیه کرده است

براس ساخت منو ابتدا باید کد های زیر را در قسمت body قرار دهید:

<ul>
	<li><a href="#">خانه</a></li>
    <li><a href="#">اخبار</a></li>
    <li class="dropdown">
    <a href="#" class="dropbtn">منو بازشو</a>
    <div class="dropdown-content">
    <a href="#">تماس باما</a>
    <a href="#">درباره ما</a>
    <a href="#">خدمات</a>
    </div>
    </li>
</ul>

در کد های بالا ما ۴ مجموعه تعریف کردیم که منو باز شو خود شامل ۳ مجموعه است.

بعد از کد های بالا برای مرتب سازی و ظاهر سازی کد های زیر را در head وارد کنید:

<style>
ul{
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
	background:#333;
}
li{
	float:right;
}
li a, .dropbtn{
	display:inline-block;
	color:#fff;
	text-align:center;
	padding:14px 16px;
	text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn{
	background:red;
}
li.dropdown{
	display:inline-block;
}
.dropdown-content{
	right:123px;
	display:none;
	position:absolute;
	background:#f9f9f9;
	min-width:160px;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:1;
}

.dropdown-content a{
	color:black;
	padding:12px 16px;
	text-decoration:none;
	display:block;
	text-align:right;
}
.dropdown-content a:hover{background:#f1f1f1;}
.dropdown:hover .dropdown-content{
	display:block;
}
</style>

کار آموزش ساخت منو کرکره ای (dropdown) در اینجا تمام است
برای مشاهده جزئیات و آموزش تصویری می توانید ویدیو این آموزش همراه سورس کد را از باکس دانلود دریافت نمایید.