گروه مقاله : CSS
تاريخ انتشار : 1396/03/22 - 13:19
كد :7627
در این مقاله انواع منوی شناور متنی و تصویری را آموزش میدهیم این آموزش بر پایه Css است و از جاوا در ایجاد کد استفاده نشده است.
آموزش طراحی سایت منوی شناور
در این آموزش نحوه ایجاد منوی شناور در Css را آموزش میدهیم
مقدمات منوی شناور
یک جعبه شناور ایجاد کنید که هنگامیکه موس را روی آن قرار میدهد المانی را به نمایش بگذارد.
مثال:
<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);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
مشاهده نتیجه
توضیح مثال
Html : میتواند از هر المانی برای ایجاد یک محتوای شناور استفاده کند.بعنوان مثال المان هایی مانند a , span , button
از یک المان نگهدارنده مانند <div> برای ایجاد یک محتوای شناور استفاده کنید و المان های دیگر را درون آن قرار دهید.
تگ <div> را در روی المان های دیگر قرار دهید تا بتوانید به محتوای شناور استایل و مکان درستی بدهید.
Css: کلاس dropdown. از ویژگی position:relative استفاده میکند، این ویژگی هنگامی کاربرد دارد که بخواهیم محتوای شناور بلافاصله بعد از دکمه شناور قرار گیرد (استفاده از position:absolute).
کلاس dropdown-content. محتوای شناور را در خود نگه میدارد. این محتوا بطور پیشفرض مخفی است و با قرار دادن موس روی دکمه به نمایش در می آید. نکته ویژگی min-width که بر روی 160px تنظیم شده است میتواند بصورت اختیاری تغییر کند. نکته : اگر شما میخواهید که عرض محتوای شناور به اندازه دکمه شناور باشد ویژگی width را مساوی 100% و overflow:auto را برای صفحه های کوچک اضافه کنید.
بجای استفاده از بردار و قاب ما از ویژگی CSS3 به نام box-shadow استفاده کرده ایم تا منوی شناور مانند یک کارت به نظر برسد.
ویژگی hover: که به عنوان شبه کلاس میشناسیم برای نمایش محتوای شناور در هنگام قرار دادن موس روی دکمه شناور به کار میرود.
منوی شناور
ایجاد یک منوی شناور که به کاربران اجازه انتخاب میان گزینه های موجود در لیست را میدهد:
مثال زیر مانند مثال بالا است با این تفاوت که ما لیستی از لینک ها را داخل منوی شناور قرار داده ایم و به آنها استایل مناسب برای هم اندازه بودن با دکمه شناور را اضافه کرده ایم.
مثال:
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
مشاهده نتیجه
اگر میخواهید که منوی شناور از راست به چپ باشد. بجای اینکه از چپ به راست باشد از ویژگی ;right: 0 استفاده کنید:
مثال:
.dropdown-content {
right: 0;
}
مشاهده نتیجه
مثال های بیشتر
تصاویر شناور
چگونگی افزودن یک عکس و دیگر محتواها درون یک منوی شناور
مشاهد کد
ایجاد منوی شناور
نحوه افزودن منوی شناور درون نوار منو
مشاهده کد
تهیه و تنظیم توسط شرکت طراحی سایت سارگون با ما در تماس باشید.