academyIT
February 13th, 2017, 12:51
امروز در این مقاله می خواهیم نحوه ی ساخت هدر ثابت ( در زمان اسکرول کردن ) که در حال حاضر خیلی هم پر کاربرد هستند رو یاد بدیم.
یکی از دلیل استفاده از این نوه هدر ها اینکه که دیگه کمتر برای کاربرامون مزاحمت ایجاد می کنه و در اصطلاح خیلی کاربر پسند یا User Friendly تر هستند.
ما ابتدا برای آموزش بهتر از یه ساختار ساده ای شروع می کنیم و بعد کارمون رو رو با css و javascript به طور پیچیده تر و حرفه ای تر پیاده سازی می کنیم. قبل از اینکه بحث رو ببندیم ، ما به طور مختصر در هنگام حل این مشکل کد هامون رو به طور بهینه شده می نویسیم و تغییرات را اعمال می کنیم.
کد های HTML
ما این تمرین خودمون رو با تگ های header , nav , ... و دیگر تگ های تو در تو پیش می بریم.
Logo (http://academyit.net/articles/69)
About (http://academyit.net/articles/69)
Services (http://academyit.net/articles/69)
Portfolio (http://academyit.net/articles/69)
Contact (http://academyit.net/articles/69)
☰تگ nav که قسمتی از header است داری 3 المان می باشد . logo , main menu , و همچنین از یه button هم برای این که برای ما منو رو در هنگام ریسپانسیو شدن نمایش دهد استفاده می کنیم.(below 1061px)
CSS اولیه
ابتدا اجازه بدین تا نگاهی به کد های CSS بندازیم تا کمی بیشتر وارد داستان بشیم:
header {
position: fixed;
top: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
background: #DD3543;
}
nav {
display: flex;
align-items: flex-end;
justify-content: space-between;
transition: align-items .2s;
}
.logo {
font-size: 2rem;
display: inline-block;
padding: 20px 30px;
background: #F35B66;
color: #fff;
margin: 50px 0 0 50px;
transition: all .2s;
}
ul {
display: flex;
margin: 50px 50px 0 0;
padding: 0;
transition: margin .2s;
}
li:not(:last-child) {
margin-right: 20px;
}
li a {
display: block;
padding: 10px 20px;
}
.toggle-menu {
display: none;
font-size: 2rem;
color: #fff;
margin: 10px 10px 0 0;
transition: margin .2s;
}
main {
display: block;
padding: 0 20px;
}
در اینجا با مختصری از مهم ترین قوانین آشنا می شیم:
پوزیشن برای تگ header ما fix می باشد. (position:fixed)
ما برای طراحی تگ nav از flexbox استفاده کرده ایم.
لوگو ما margin-top:50px و margin-left:50px دارد.و علاوه بر اون ما به اوگو خودمون ویژگی padding: 20px 30px هم داده ایم.
دکمه ای که برای ریسپانسیو بودن ترتیب داده ایم هم hidden می باشد.و هنگاهی نمایش داده می شود که اندازه ی صفحه ی ما کمتر از 1061px باشد. (یعنی هنگامی که با تغییر دادن اندازه صفحه پنجره ی ما 1061px شود ) علاوه بر اون هم به دکمه ی موردنظر که در هنگام ریسپانسیو شدن نمایش داده می شود هم margin-top:10px و margin-right:10px داده ایم.
ما به المان هایی که مقدار خصوصیت آن ها در اینده تغییر می کنه هم transition داده ایم. با این کار ما بین حالت اولیه و حالت نهایی خود از یک transition ظریفی استفاده کرده ایم.
با اعمال تغییرات بالا صفحه ما به شکل زیر در می آید:
http://academyit.net/uploads/2016/09/1474518303Menu_Initial_State.png
Header - تحرک دادن به هدر
تا الان ما یه ساختار ساده ای از چیزی که میخواستیم رو درست کردیم. خب حالا وقتشه که بریم سراغ مرحله ی بعد:
کار اول االمان main دقیقا باید در زیر header قرار بگیرد. به خاطر داشته باشیم که ما به header پوزیشن fix داده بودیم.(position:fixed) ازین رو پوزیشن آن بالای main ما می باشد.
وکار دوماینه کهHeader ما زمانی که به پایین صفحه scroll می کنیم باید حرکت کند.برای حل کردن مسئله اول ما خصوصیت padding-top رو به المان main خود اضافه می کنیم.
مقداری که برای این خصوصیت در نظر می گیریم باید به میزان ارتفاع ای که برای header در نظر گرفته ایم باشه. در این مورد ما ارتفاع به خصوصی رو خب برای header خود در نظر نگرفته ایم بنابراین ما از javascript برای محاسبه آن کمک گرفته و سپس مقدار به دست آمده رو عیناً برای مقدار padding خود قرار می دهیم.
برای حل مسئله دوم خود باید کار های زیر انجام گیرد:
میزانی که صفحه ی ما تا به حال به پایین اسکرول (scroll down) شده رو باز می یابیم.
اگر مقداری که به دست می آید از 150px بیشتر باشد ، ما کلاس scroll را به header خود نسبت می دهیم.
JavaScript – جاوا اسکریپت
کد های جاوا اسکریپتی که ما به آن ها نیاز داریم رو برای شما آماده کرده ایم و شما در تصویر زیر مشاهده می کنید.
ما با معرفی یک سری متغیر ها کار رو شروع کرده ایم ، میزان ارتفاع header رو محاسبه کرده ایم و سپس این مقداری که با کمک جاوا اسکریپت محاسبه کردیم رو به خصوصیت padding-top که برای المان main در نظر گرفته بودیم اضافه می کنیم.
ادامه مطلب http://academyit.net/articles/69
یکی از دلیل استفاده از این نوه هدر ها اینکه که دیگه کمتر برای کاربرامون مزاحمت ایجاد می کنه و در اصطلاح خیلی کاربر پسند یا User Friendly تر هستند.
ما ابتدا برای آموزش بهتر از یه ساختار ساده ای شروع می کنیم و بعد کارمون رو رو با css و javascript به طور پیچیده تر و حرفه ای تر پیاده سازی می کنیم. قبل از اینکه بحث رو ببندیم ، ما به طور مختصر در هنگام حل این مشکل کد هامون رو به طور بهینه شده می نویسیم و تغییرات را اعمال می کنیم.
کد های HTML
ما این تمرین خودمون رو با تگ های header , nav , ... و دیگر تگ های تو در تو پیش می بریم.
Logo (http://academyit.net/articles/69)
About (http://academyit.net/articles/69)
Services (http://academyit.net/articles/69)
Portfolio (http://academyit.net/articles/69)
Contact (http://academyit.net/articles/69)
☰تگ nav که قسمتی از header است داری 3 المان می باشد . logo , main menu , و همچنین از یه button هم برای این که برای ما منو رو در هنگام ریسپانسیو شدن نمایش دهد استفاده می کنیم.(below 1061px)
CSS اولیه
ابتدا اجازه بدین تا نگاهی به کد های CSS بندازیم تا کمی بیشتر وارد داستان بشیم:
header {
position: fixed;
top: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
background: #DD3543;
}
nav {
display: flex;
align-items: flex-end;
justify-content: space-between;
transition: align-items .2s;
}
.logo {
font-size: 2rem;
display: inline-block;
padding: 20px 30px;
background: #F35B66;
color: #fff;
margin: 50px 0 0 50px;
transition: all .2s;
}
ul {
display: flex;
margin: 50px 50px 0 0;
padding: 0;
transition: margin .2s;
}
li:not(:last-child) {
margin-right: 20px;
}
li a {
display: block;
padding: 10px 20px;
}
.toggle-menu {
display: none;
font-size: 2rem;
color: #fff;
margin: 10px 10px 0 0;
transition: margin .2s;
}
main {
display: block;
padding: 0 20px;
}
در اینجا با مختصری از مهم ترین قوانین آشنا می شیم:
پوزیشن برای تگ header ما fix می باشد. (position:fixed)
ما برای طراحی تگ nav از flexbox استفاده کرده ایم.
لوگو ما margin-top:50px و margin-left:50px دارد.و علاوه بر اون ما به اوگو خودمون ویژگی padding: 20px 30px هم داده ایم.
دکمه ای که برای ریسپانسیو بودن ترتیب داده ایم هم hidden می باشد.و هنگاهی نمایش داده می شود که اندازه ی صفحه ی ما کمتر از 1061px باشد. (یعنی هنگامی که با تغییر دادن اندازه صفحه پنجره ی ما 1061px شود ) علاوه بر اون هم به دکمه ی موردنظر که در هنگام ریسپانسیو شدن نمایش داده می شود هم margin-top:10px و margin-right:10px داده ایم.
ما به المان هایی که مقدار خصوصیت آن ها در اینده تغییر می کنه هم transition داده ایم. با این کار ما بین حالت اولیه و حالت نهایی خود از یک transition ظریفی استفاده کرده ایم.
با اعمال تغییرات بالا صفحه ما به شکل زیر در می آید:
http://academyit.net/uploads/2016/09/1474518303Menu_Initial_State.png
Header - تحرک دادن به هدر
تا الان ما یه ساختار ساده ای از چیزی که میخواستیم رو درست کردیم. خب حالا وقتشه که بریم سراغ مرحله ی بعد:
کار اول االمان main دقیقا باید در زیر header قرار بگیرد. به خاطر داشته باشیم که ما به header پوزیشن fix داده بودیم.(position:fixed) ازین رو پوزیشن آن بالای main ما می باشد.
وکار دوماینه کهHeader ما زمانی که به پایین صفحه scroll می کنیم باید حرکت کند.برای حل کردن مسئله اول ما خصوصیت padding-top رو به المان main خود اضافه می کنیم.
مقداری که برای این خصوصیت در نظر می گیریم باید به میزان ارتفاع ای که برای header در نظر گرفته ایم باشه. در این مورد ما ارتفاع به خصوصی رو خب برای header خود در نظر نگرفته ایم بنابراین ما از javascript برای محاسبه آن کمک گرفته و سپس مقدار به دست آمده رو عیناً برای مقدار padding خود قرار می دهیم.
برای حل مسئله دوم خود باید کار های زیر انجام گیرد:
میزانی که صفحه ی ما تا به حال به پایین اسکرول (scroll down) شده رو باز می یابیم.
اگر مقداری که به دست می آید از 150px بیشتر باشد ، ما کلاس scroll را به header خود نسبت می دهیم.
JavaScript – جاوا اسکریپت
کد های جاوا اسکریپتی که ما به آن ها نیاز داریم رو برای شما آماده کرده ایم و شما در تصویر زیر مشاهده می کنید.
ما با معرفی یک سری متغیر ها کار رو شروع کرده ایم ، میزان ارتفاع header رو محاسبه کرده ایم و سپس این مقداری که با کمک جاوا اسکریپت محاسبه کردیم رو به خصوصیت padding-top که برای المان main در نظر گرفته بودیم اضافه می کنیم.
ادامه مطلب http://academyit.net/articles/69