آموزش ایجاد منوهای بازشو Dropdown در css

بازدید: 768 بازدید
آموزش منو بازشو

منوهای بازشو Dropdown یکی دیگر از امکانات css در زیباسازی سایت است.

منوهای بازشو Dropdown علاوه بر زیباتر کردن ظاهر سایت، دسترسی ساده تر کاربر به منوها و زیر منوها را فراهم می کند.

در ادامه سری آموزش های css، امروز قصد داریم نحوه ساخت این منوها را با هم مرور کنیم.
در این آموزش همراه ما باشید.

با سلام خدمت همراهان همیشگی سایت پرنیان طرح

در ادامه سری آموزش های css، امروز نحوه کار با منوهای بازشو Dropdown را با هم مرور خواهیم کرد.

منوهای بازشو یکی دیگر از امکانات css در زیباسازی سایت است.

منوهای بازشو علاوه بر زیباتر کردن ظاهر سایت، دسترسی ساده تر کاربر به منوها و زیر منوها را فراهم می کند.

این منوها به کاربران در دسترسی ساده تر به زیرمنوها و امکانات اصلی سایت کمک می کنند.

و جذابیت و کارایی سایت را بهبود می بخشند.

همراه ما باشید تا نحوه کدنویسی و طراحی این منوها را با هم مرور کنیم.

 

ایجاد یک منوی بازشو ساده (اصلی و ابتدایی)

در مثال زیر یک منوی بازشو ساده را طراحی خواهیم کرد. این منو با رد شدن ماوس از روی آن و بدون نیاز به کلیک، زیر منوها را برای کاربر به نمایش خواهد گذاشت.

[php]

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

توضیحات بیشتر برای مثال

HTML:  میتوانیم از هر عنصری برای باز کردن یک محتوای بازشو استفاده کنیم. به عنوان مثال المان  <span>, یا <button>.

از یک عنصر والد (نگهدارنده) مانند عنصر <div> برای ایجاد یک محتوای بازشو استفاده میکنیم. و سپس محتوای دلخواه خود را به آن  اضافه میکنیم.

عنصر <div> را درون یک <div> دیگر بسته بندی میکنیم تا بتوانیم محتوای دلخواه را به درستی توسط css در آن جای گذاری کنیم.

css: کلاس Dropdown از ویژگی position:relative استفاده می کند، که برای زمانی که میخواهیم محتوای بازشو درست در زیر دکمه یا لینک مربوط به آن قرار بگیرد، لازم است.با استفاده از position:absolute).

کلاس .dropdown-content محتوای اصلی منوبازشو را نگه می دارد. که به طور پیشفرض پنهان است و تنها زمانی که ماوس از روی ان حرکت کند، نمایش داده می شود. دقت داشته باشید که min-width روی 160پیکسل تنظیم شده است. شما میتوانید این مقدار را به دلخواه تغییر دهید.

نکته: اگر میخواهید عرض محتوای بازشونده، برابر با عرض دکمه کشویی باشد، باید ویژگی width را با 100% مقداردهی کنید.( و همچنین ویژگی overflow را با auto مقدار دهید تا در صفحه های کوچک قابلیت اسکرول یا پیمایش داشته باشد.)

برای اینکه منو بازشو مانند یک “card” دیده شود باید به جای استفاده از مرزborder، از ویژگی box-shadow در css استفاده کنید.

از انتخابگر hover: نیز برای نمایش منوی کشویی زمانی که ماوس از روی آن رد می شود می توانید استفاده کنید.

منو بازشو Dropdown Menu

ایجاد محتوای بازشو با تراز راست چین

اگر میخواهید منوی بازشو، به جای اینکه از راست به چپ باشد، (به جای اینکه از چپ به راست باشد) مانند نوشتن به زبان فارسی، ویژگی ;right=0 را اضافه کنید.

مثال:

[php]
.dropdown-content {
right: 0;
}
[/php]

مثال های بیشتر

تصویر بازشو

در این مثال می بینید که چطور یک تصویر یا محتواهای دیگر را درون یک جعبه یا کادر کشویی اضافه کنیم.

در این مثال، با رد شدن ماوس از روی تصویر، تصویر در سایز بزرگتر نمایش داده می شود.

[php]

<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class=”dropdown”>
<img src=”*.jpg” alt=”Cinque Terre” width=”100″ height=”50″>
<div class=”dropdown-content”>
<img src=*.jpg” alt=”Cinque Terre” width=”300″ height=”200″>
<div class=”desc”>Beautiful Cinque Terre</div>
</div>
</div>

</body>
</html>

[/php]

نکته: به جای *.jpg نام و آدرس تصویر مورد نظر خود را وارد کنید.

مثال نمونه را از اینجا ببینید.

نوار ناوبری بازشو

در این مثال نیز نحوه اضافه کردن یک منوی بازشو درون نوارناوبری navigation bar را میبینید.

در این مثال با رد شدن ماوس از روی منوی مورد نظر، به صورت کشویی باز خواهد شد. و زیر منوها برای کاربر نمایش داده خواهد شد.

[php]

<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: 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: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li class=”dropdown”>
<a href=”javascript:void(0)” class=”dropbtn”>Dropdown</a>
<div class=”dropdown-content”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
</li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the “Dropdown” link to see the dropdown menu.</p>

</body>
</html>

[/php]

 

نتیجه را از اینجا مشاهده کنید.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.