یادگرفتن تشکیل داد مگا منو با CSS (کدنویسی)

زهره 
  بازدید : 33
چهارشنبه 30 مهر 1404 زمان : 16:44 


1
2
3
4
5

یادگرفتن تشکیل داد مگا منو با CSS (کدنویسی)
فعلا که تا حدودی متوجه گردیده‌اید مگا منو چیست و تئوری مورد برای شما پر‌نور شد، خوب میباشد مشاجره را کمی کاربردی‌خیس کرده و در شغل با کدنویسی به یادگرفتن ایجاد کرد مگا منو با CSS بپردازیم. در‌این قسمت ما به یاری فولدر‌های html و css و کدهای باطن آن ها به پیاده سازی یک مگا منوی معمولی میپردازیم. اما که محتوای باطن این منو بایستی با اعتنا به وبسایت شما جایگزین شود. همینطور ممکن میباشد وبسایت شما از لهجه نرم‌افزار‌نویسی دیگری استعمال نماید، به عنوان مثال چنانچه از گویش php استعمال می کنید، توصیه میکنیم زمان فراگیری لهجه php مقدماتی را هم طراحی سایت نظارت بفرمایید!

اضافه کردن کد html
خب برای آغاز بعداز ساخت فولدر‌های html و css در فولدر دلخواه، بایستی کدهای html که ساختار مگا منو را صورت می دهند، وارد کنیم. همه کدهای html که برای این نمونه مایحتاج دارید، در پایین مشاهده می کنید.

"logo

Home
News
Contact
About Us
Privacy Policy

Books

Main categories

mathematics

hmble Pi
distribution theory
companion to mathematics

programming

python crash course
learning SQL
learning php, mysql

web design

javaScript from frontend to backend
basics of web design
javaScript the definitive guide

Mega Menu tutorial

Hover over the "Books" link to see the mega menu.

همچنان که در کدهای فوق مشاهده میکنید، ساختار آن را می‌قدرت به یک‌سری قسمت تقسیم کرد. بخش مرتبط با محتوای مگا منو در باطن یک تگ div با کلاس dropdown قرار داده گردیده‌اند.

درین بخش ما از یک تگ button با کلاس dropbtn به کارگیری کرده‌ایم که واژه و کلمه Books را در خویش مکان داده میباشد. قرار میباشد زمانی استفاده کننده ماوس خویش را روی این دکمه در منوی وب سایت میاورد، محتوای جانور در باطن تگ div با کلاس dropdown-content به اکران درآید. این محتوا به عبارتی محتوای مگا منو وب سایت میباشد که درین نمونه مجموعه‌بندی‌های کتاب‌های مو جود درین تارنما را علامت خواهد بخشید. البته کیفیت اکران و محوشدن آن با تکان موشواره استفاده کننده، به یاری CSS قابلیت و امکان‌پذیر خواهد بود!

استایل‌دهی اول با CSS
بعداز تولید ساختار و محتوای مگا منو آغاز به استایل‌دهی آن به یاری CSS میکنیم. در صدر در پوشه css خویش کدهای تحت را وارد نمائید.

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* defining width and margins for better styling */
body {
margin: 0;
}

.logo-container {
background-color: rgb(27,52,42);
width: 80%;
margin: 0 auto;
}

.content-part {
width: 80%;
margin: 0 auto;
padding-top: 16px;
}

.navbar {
width: 80%;
margin: 0 auto;
overflow: hidden;
background-color: rgb(27,52,42);
font-family: Arial, Helvetica, sans-serif;
}
این کدها فقطً برای ساخت‌و‌ساز استایل‌های اول و بعدها منوی ناوبری و محتوای تارنما مستعمل‌اند. به عبارتی‌طور که مشاهده میکنید، کوشش گردیده منو و محتوا عرضی درتوان ۸۰ درصد ورقه داشته و مارجین و پدینگ مطلوب بدست آورند.

استایل‌ مطلوب به مورد‌های منو
با اعتنا به اینکه معمولاً در منوی ناوبری وبسایت‌ها، لینک و پیوند صفحه ها و مورد‌های داخل منو به طور افقی در کنار یکدیگر قرار می گیرند، نیاز میباشد که به امداد خصوصیت‌ها و امکان‌های CSS این فعالیت را اجرا دهیم.

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: rgb(20, 200, 83);
}
در کد فوق مراعات می کنید که چهت نیل بدین مقصود از خصوصیت float: left مستعمل میباشد. با این عمل تگ‌های a جان دار در منو و همینطور مورد پایانی که کلمه و واژه Books را در خویش مکان داده بود، به طور افقی در منوی ناوبری وب سایت ظواهر می شوند.