منوی واکنشگرا (Responsive menu)

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

اسکریپت ستون کشویی کنار صفحه

این اسکریپت یک ستون در سمت راست صفحه ایجاد می کند که با کلیک روی یک دکمه به صورت کشویی وارد صفحه شده و محتوای اصلی صفحه به سمت چپ منتقل می کند. این ستون محل مناسیب برای قرار دادن لینک های صفحه، توضیحات و … می باشد. جهت استفاده از این اسکریپت، فایل ضمیمه را دانلود نمایید. جهت افزایش یا کاهش پهنای ستون عدد ۲۷۰ را در فایل js و css تغییر دهید.

اسکریپت نمایش درختی (tree view)

با استفاده از این اسکریپت ساده می توانید دسته بندی ها، فایل ها، گروه ها و سایر موارد مشابه را به صورت درختی نمایش دهید. این اسکریپت مطابق کد نمونه در دو بخش head و body قرار می گیرد. آیکن های استفاده شده از آیکن های fontawesome بوده که به صورت CDN در قسمت head صفحه فراخوانی شده است.

اسکریپت شمارنده کاهشی (Countdown)

این اسکریپت امروزه در بسیاری از سایت ها، بویژه سایت های حراجی و فروشگاهی کاربرد زیادی دارد. شمارنده کاهشی مدت زمان باقیمانده به یک اتفاق و رویداد را برای کاربر نمایش میدهد. مانند زمان باقیمانده به پایان حراجی، یا شروع حراجی و…

این اسکریپت بسیار ساده و کاربردی بوده و با آشنایی خیلی مختصر با CSS می توانید ظاهر آن را طبق سلیقه خود تغییر دهید.

تغییر شکل پیشفرض radio و checkbox (بدون اسکریپت)

شکل ظاهری پیشفرض مرورگرها برای radio و checkbox چندان جذاب و زیبا نیست و ممکن است با سایر عناصر یک فرم هماهنگی لازم را نداشته باشند.در اینجا صرفا با استفاده از CSS به راحتی می توانید شکل ظاهری مورد نظر خود را برای radio و checkbox مورد نظر خود ایجاد نمایید. در این مطلب شکل پیشفرض این دو عنصر پرکاربرد تغییر کرده اند و شما به آسانی و با تغییرات در استایل های آنها می توانید تغییرات و رنگ بندی مورد نظر خود را انجام دهید.

اسکریپت Tab Menu

از مهمترین عناصر مورد استفاده در صفحات وب، تب منوها هستند. از مهمترین ویژگی های یک تب منو می توان به نمایش حجم بالایی از مطالب در فضایی نسبتا محدود اشاره کرد، و به طور کلی صرفه جویی در فضا از ویژگی های یک تب منو است. همچنین در تقسیم بندی مطالب یا زیر مجموعه یک مطلب اصلی، تب منوها از ابزار پرکاربرد هستند. در این اینجا یک تب منوی ساده و کاربردی و با قابلیت ریسپانسیو بودن را به شما معرفی می کنیم.

اسکریپت منوی تمام صفحه

این اسکریپت یک منوی تمام صفحه که کل فضای صفحه را می پوشاند ایجاد می کند. این منو برای استفاده در صفحه اول سایت و نیز برای معرفی بخش های داخلی سایت می تواند کاربرد داشته باشد. استفاده از این اسکریپت بسیار ساده بوده و با آشنایی خیلی ابتدایی به CSS و HTML می توانید تغییرات مورد نظر خود را روی آن اعمال نمایید. این اسکریپت از jQuery و Fontawesome استفاده می کند که در صفحه فراخوانی شده است.

اسکریپت منوی آکاردئونی

منوی آکاردئونی از روش های کاربردی نمایش اطلاعات در صفحه است. این منو به صورت آکاردئونی محتوای مورد نظر را با کلیک روی عنوان مربوطه، نمایش میدهد. این نوع منو برای نمایش محتوای طولانی، صفحات پرسش و پاسخ، ویژگی های محصول و موارد مشابه کاربرد دارد.

این اسکریپت را مطابق کد نمونه زیر در دو بخش head و body در صفحه قرار دهید.

منوی کشویی کنار صفحه

با استفاده از این منو می توانید لینک های مهم و مورد نظر خود را کنار صفحه نمایش دهید. این منو کنار صفحه به صورت عمودی قرار می گیرد و به طور پیشفرض با رفتن ماوس روی آن باز می شود. در ساخت این منو، از jQuery استفاده شده و همچنین برای آیکن های آن از سایت fontawesome استفاده شده است که فایل آن به صورت cdn در صفحه فراخوانی شده است.

اسکریپت شمارنده افزایشی

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