وبلاگ با برنامه
» ساختن menu با استفاده از float: left
ساختن menu با استفاده از float: left
سلام و درود! چالشی که اینبار پیش روی ماست، ساخت یک منوی ساده با استفاده از float است. اینبار از display استفاده نمیشود. همچنین میخواهیم این منو طوری باشد که نویگیشن هم انجام دهد. برای اطلاعات بیشتر بقیه مقاله را بخوانید! لذت ببرید!
پیشنیاز
کافیست با html css اشنا باشید. باید بدانید که float دادن باعث میشود مقدار position برابر با relative شود. و تفاوت position: relative با position:absolute را بدانید! اگر هم بدانید position:static یا position:fixed چیست چه بهتر!
کدهای نهایی این باید بشود!
بیایید قبل از شروع کدنویسی یک نگاه به نتیجه بیندازیم! تصویر زیر نتیجه کدنویسی های ماست. کدهای ان را میتوانید در قالب فایل zip ازاینجا دانلود کنید! شما در تصویر منویی تمام صفحه میبینید.
بررسی کدهای index.html
در قسمتی از صفحه این قطعه کد را مشاهده می نمایید!
<nav class="dis"> <a href="#home">home</a> <a href="#good">good</a> <a href="#shop">shop</a> <a href="#about">about</a> </nav>
برای ایجاد یک منوی ساده با html میتوان از ul استفاده کرد. اینجا از nav استفاده شده است. داخل ان تگ های a قرار دادیم. داخل href هشتگ هایی قرار دادیم که دقیقا نامش را از id های دیو های پایینی اوردیم. این قابلیت باعث میشود وقتی در بروزر به روی منو کلیک میشود به همان قسمت از صفحه برود که همان id را دارد. مثلا وقتی روی منو در گزینه shop کلیک میشود، بلافاصله بروزر کمی پایین تر رفته و در قسمت div که id=shop دارد می ایستد و همان را به شما نشان میدهد.
بررسی کدهای style.css
جالب است که با این تعداد کم از خط کدها میتوان چنین منوی خوبی طراحی کرد.
body>div{padding-top: 50px}
/* این کد نوشته شد تا منو کمی با محتوا فاصله بگیرد */
این قطعه کد باعث میشود منو با محتواییکه نشان میدهد کمی فاصله بگیرد تا عنوان ان که با تگ h2 کمی ضخیم تر از بقیه متن نوشته شده خوب دیده شود و زیر منو باقی نماند. اینجا یک padding-top دادیم. میتوانید این قطعه کد را یکبار برای تست کردن حذف کنید و نتیجه اش را در بروزر ببینید! تغییر را از نزدیک احساس کنید!
html{ box-sizing: border-box }
* , *:after, *:before{ box-sizing: inherit }
در قسمتی از کدهایی که دانلود کردید و از حالت زیپ خارج کردید، در فایل style.css قطعه کد بالا را ببینید! این درباره box-sizing است. این قطعه کد برای محکم کاری همیشه در همه پروژه های کوچک و بزرگ در بالا برگه استایل نوشته شود. باعث میشود باکس ها یا همان دیو ها بدون فاصله داشتن از هم کنار هم بنشینند. به هم چسبیده و تمیز دیده شوند. Layout را تنظیم میکند.
.dis{
background-color: lightgray;
text-align: center;
position: fixed;top: 0;left:0;right:0;
/* میخواهیم منو در بروزر فیکس نمایش داده شود */
}
همه کد ها را احتمالا میدانید فقط انجا که نوشته display:fixed برای فیکس کردن منو در بالای بروزر است. باعث میشود حتی وقتی بروزر را به پایین صفحه اسکرول میکنید همچنان در همان جا فیکس شده بماند و نشان داده شود. شما با کلیک بر ایتم های منو به راحتی بین محتوای این صفحه جا به جا میشوید! با استفاده از جاوااسکریپت یا قابلیت های جدید css3 نیز میتوان کاری کرد که این حرکت بین محتوای یک صفحه بصورت انیمیشن و ارام صورت گیرد. به عنوان تمرین این کار را خودتان در گوگل سرچ کنید و انجام دهید!
.dis a{
text-decoration: none;
background-color: skyblue;
padding: 10px;
float: left; width: 25%;
}
این قطعه کد ها با استفاده از float کاری کرده است که ایتم ها داخل تگ nav که مادر انها محسوب میشود کاملا جای بگیرند. میتوانید این فلوت را بردارید و به بروزر بروید تا تغییر را حس کنید. انگاه ایتم ها کمی از کادر ابی رنگی که داخلش قرار دارند بیرون زده میشوند.
پدینگی که به ان داده شده است باعث میشود محتوا در مرکز قرار گیرد. بجای پدینگ تاکنون به height فکر کرده اید؟ مثلا اگر ارتفاع دهیم به همین اندازه میشود اما متن در بالای جعبه قرار میگیرد. اما حالا که پدینگ دادیم از بالا و پایین و چپ و راست به یک اندازه فاصله دارد و کاملا در مرکز وسط قرار گرفته است. پس بجای height از padding استفاده میکنیم!
از اینکه این مقاله را خواندید سپاسگدارم!
