آموزش ساخت منو کشویی با css
آموزش ساخت منو کشویی با css همراه با مثال عملی. از این سورس کد می توانید در پروژه طراحی قالب سایت خود استفاده کنید. کد کامل را می توانید در یک فایل html ذخیره و اجرا نمایید. توضیحات بیشتر در بخش پایین.
در این بخش از آموزش css از تاپ سایت 98 به سراغ ساخت منوی کشویی می رویم.
آموزش منوی بازشو :
آموزش منوی باز شو یا کشویی ، همراه با سورس کد و بصورت عملی.
برای ساخت منوی کشویی یا منوی بازشو بایستی با html , css آشنا باشید.
در زیر یک منوی بازشو یا منو کشویی زیبا را آموزش می دهیم.
کد html منوی بازشو یا کشویی :
در قسمت زیر کد html منوی بازشو یا منوی کشویی را مشاهده می کنید.
برای ایجاد منو بازشو از تگ ul استفاده کرده ایم. برای بخش کشویی از کلاس dropdown استفاده کرده ایم.
در یک li چندین تگ a قرار داده ایم . با کلیک روی کلمه Dropdown یک منو باز می شود که شامل 3 لینک یا تگ a می باشد.
در اکثر سایت ها منوی کشویی وجود دارد.
<li><a href="https://topsite98.com/">Home</a></li>
<li><a href="https://topsite98.com/">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="https://topsite98.com/">Link 1</a>
<a href="https://topsite98.com/">Link 2</a>
<a href="https://topsite98.com/">Link 3</a>
</div>
</li>
</ul>
کد css منوی بازشو یا کشویی :
کد css منوی بازشو یا کشویی شامل چندین کلاس مختلف میباشد. منوی بازشو کمی پیچیده است و افراد مبتدی باید حتما با دستورات css آشنا باشند.
چند دستور مهم را توضیح می دهیم.
با تگ ul منو را ایجاد می کنیم با دستور list-style-stype دایره لیست را حذف میکنیم.
با دستور float عناصر را در کنار هم قرار می دهیم.
لینک ها را با دستور text-align در وسط قرار می دهیم و با color رنگ آنها را تغییر می دهیم. با text-decoration خط زیر لینک را حذف می کنیم.
برای زیر منوها از کلاس dropdown-content استفاده کرده ایم. برای حالت اولیه باید منوها دیده نشوند پس از دستور display استفاده کرده ایم.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {display: block;}
</style>
کد کامل منوی باز شو :
کد کامل منوی باز شو را در قسمت زیر می بینید. کد زیر تست شده میباشد و می توانید از آن استفاده کنید.
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {display: block;}
</style>
</head>
<body>
<ul>
<li><a href="https://topsite98.com/">Home</a></li>
<li><a href="https://topsite98.com/">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="https://topsite98.com/">Link 1</a>
<a href="https://topsite98.com/">Link 2</a>
<a href="https://topsite98.com/">Link 3</a>
</div>
</li>
</ul>
<h1>TopSite98.com</h1>
<p>TopSite98.com</p>
<p>TopSite98.com</p>
<p>TopSite98.com</p>
</body>
</html>
امیدواریم این آموزش برای شما مفید باشد.
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید