صفحه بندی یکی از موارد ضروری در طراحی سایت است که اغلب نادیده گرفته می شود. بخصوص برای وبلاگ ها و سایت های پرمحتوا ، وسیله مهمی برای پیمایش بین صفحات فراهم می کند. یک وب سایت با صفحه های خوش ساخت می تواند کاربران را ترغیب کند تا بیشتر از آنچه که دنبالش بوده اند در وبسایت شما دست به اکتشاف بزنند.
در اینجا نگاهی به چند کد CSS و JavaScript خلاقانه می اندازیم که البته می توانید برای بهبود صفحه بندی در وب سایت شما به صورت رایگان مورد استفاده قرار گیرد.
صفحه بندی ساده و بصری با جلوه های شناور
اولین مثال ما نشان می دهد که چگونه برخی از افکت های شناور می توانند صفحه بندی استاندارد را بسیار بهبود بخشند. تجربه بصری بسیار سیالی ایجاد می کند. یک روش ساده برای کمک به تجربه کاربران سایت شما.
شمارش صفحات بصورت زنده
یکی از ناامیدکننده ترین قسمتهای صفحه بندی می تواند نحوه مدیریت تعداد زیاد صفحه ها باشد. این کد jQuery برای نشان دادن شماره صفحه های مجاور هنگام کلیک استفاده می شود.
شمارش صفحات سیال
رابط کاربری صفحه بندی زیر که به صورت پاسخگو و رسپانسیو طراحی شده است و شامل چندین روش حرکت و تغییر صفحات است - از جمله از طریق صفحه کلید. نوار نشانگر صفحه در بالا به وضوح صفحه فعلی را برچسب گذاری می کند و یک نمای کلی از همه صفحات موجود را ارائه می دهد.
.
من به شخصه این نوع صفحه بندی را دوست دارم
صفحه بندی پیشرفته برای صفحه های موبایل
در صفحه های کوچکتر ، استفاده از صفحه بندی بسیار دشوار است. ابزار ناوبری اغلب بسیار کوچک و و ناخوانا هستند. این کد گزینه بسیار خوبی برای دستگاه های تلفن همراه است.
صفحه بندی بدون شماره
بعضی اوقات ، نیازی نیست که هر مورد را در صفحه بندی شماره گذاری کنیم. می توانیم از چند نقطه این یک راه حل خوب برای نمایش اسلایدها یا پیمایش چندین صفحه محتوا است.
صفحه بندی موبایل فرندلی
رابط کاربری تلفن همراه وقتی به لمس کاربر واکنش نشان می دهد بهترین عملکرد را دارد در اینجا صفحه بندی داریم که به کاربر امکان می دهد با کشیدن انگشت خود به مورد بعدی یا مورد قبلی برسد.
ترکیب صفحه بندی با پیمایش بی نهایت