Mega Dropdown Menu

Səhifələrinizi kodlayarkən istifadə etmək üçün çox vaxt hazır menular axtarırsınız yəqin ki. Paylaşacağım menu CSSJS ilə hazırlanmış mega dropdown menu nümunəsidir. Çox məqsədli menu kimi birçox səhifələrdə istifadəyə uyğundur. Ən əsası pulsuz nümunədir :).  Ancaq pul qazanmaq üçün hazırladığınız saytlarda istifadə etmək üçün EXTENDED LICENSE almalısınız. Əks halda nümunə sahibinin sizin haqqınızda şikayet etmə hüququ var.

Nümunəyə gəldikdə isə paylaşacağım səhifədə nümunəni necə istifadə edəcəyiniz və nümunənin hazır versiyası mövcuddur.

Nümunəni endirmək və demo versiyasına baxmaq üçün buraya klikləyin.

 

jQuery Slider, jQuery Carousel tövsiyyəsi

Web səhifələr hazırlayarkən çox istifadə etdiyiniz bəzən bəlkə də çox əziyyət çəkdiyiniz bölümlərdən biri də slider bölümləridir yəqin ki :). Bu paylaşımımla istədim bu mövzuda az da olsa bir köməklik edim. İki ədəd istifadəyə çox uyğun jquery nümunəsi tövsiyyə edirəm.

Bunlar bxSliderowlcarousel qoşmalarıdır.
Bu qoşmaları bəyənməyimin əsas səbəbi həm istifadələrinin rahat və problemsiz olması, həm də responsive (mobil cihazlara uyumlu) olmalarıdır.

bxSlider nümunələrinə buradan baxa bilərsiniz.

bxslider

OWL Carousel nümunələrinə isə buradan baxa bilərsiniz.

Owl Carousel

Ümid edirəm işinizə yarayar.

jQuery və CSS ilə rəy sistemi – Testimonials Carousel

client-testimonials-carousel-featured
Xüsusilə xidmət satan web səhifələrinin çox istifadə etdiyi müşətri rəylərini göstərən maraqlı bir tətbiqi paylaşmaq istəyirəm. Hazır tətbiq CSS və JQuery ilə hazırlanıb.

Tətbiqin hazır versiyasına buaradan baxa bilərsiniz.

Tətbiqi endirmək üçün buraya daxil olaraq download düyməsini sıxın.

Onu da qeyd edim ki, tətbiq eyni zamanda mobil cihazlar üçün də nəzərdə tutulub. Yəni responsive olaraq hazırlanıb.

Remodal jQuery plugin – necə istifadə edilir?

Günümüzdə veb səhifələr hazırlayarkən mütləq jQuery javascript kitabxanasından istifadə edirik. jQuery kitabaxanasını istifadə edən qoşmalardan birini bu yazımda tanıdaraq, istifadə qaydasını göstərəcəm.

Deməli istifadə edəcəyimiz jQuery qoşmasının adı Remodal`dır. Müxtəlif səhifələrdə yəqin ki, müvafiq bağlantıya kliklədikdə səhifənin qaralıb yeni bir mesajın vəya səhifənin çıxdığını müşahidə etmisiniz. Bu qoşma da elə həmin əməliyyatı yerinə yetirmək üçün istifadə edilir.

Remodal jquery plugin istifadə qaydası

Keçək istifadə qaydasına.

Əvvəla remodal adlı bir qovluq açıb içərisind index.html adlı fayl açıb aşağıdaki kodları addım addım əlavə edək:

1. Addım: HTML səhifəmizi hazırlayaq

 

 
Kodlar bölməsində qeyd etdiyim başlıq, gövdə, alt hissə bölmələri şərhdir. Bu tip kodlar istifadəçiyə göstərilmir. Sadəcə asanlıq olsun deyə qeyd etmişəm. Çünki əlavə edəcəyimiz kodlar bu şərhlərin altına əlavə edilməlidir.
 
2.addım: Səhifəmizə jQuery kitabxanasını əlavə edək. Jquery kitabxanasını səhifəmizin body təqləri arasında ən alta body təqini bağlamadan əvvəl “alt hissə” şərhinin altına əlavə etməliyik.
 

 
3.addım: Remodal qoşmasının rəsmi səhifəsinə gedərək lazımı paketi endirməliyik. Bunun üçün bu linkdən istifadə edə bilərsiniz. Açılan səhifədə Downloads bölməsində Source Code (zip) faylını endirə bilərsiniz.
 
4.addım: Endirdiyiniz zip faylı içərisində src qovluğundakı jquery.remodal.cssjquery.remodal.js fayllarını 1. addımda açdığımız remodal qovluğuna atmalıyıq.
 
5.addım: Qovluğa atdığımız bu iki faylı index.html səhifəmizdəki kodlara əlavə etməliyik. jquery.remodal.css faylını “başlıq” şərhindən sonra, jquery.remodal.js faylını isə “alt hissə” şərhindən sonra əlavə etdiyimiz jQuery kitabxanasından sonra əlavə etməliyik. Əlavə edəcəyimiz kodlar belədir:

jquery.remodal.css üçün:

jquery.remodal.js üçün:

 

Və son olaraq aşağıdaki kofları “gövdə” şərhindən sonra səhifəmizə əlavə etməliyik:

Deməli bütün kodları bir araya yığsaq index.html faylı aşağıdaki kimi olmalıdır:

Yazdığımız kodları aşağıda RESULT bölməsində hazır formada incələyə bilərsiniz:

Səhifəni üfüqi hərəkət etdirmək – Scroll Page Horizontally

Səhifəni aşağı-yuxarı (şaquli istiqamətdə) doğru hərəkət etdirmək üçün hər hansı əlavə bir kod yazmağa ehtiyac olmadığını bilirik. Səhifəmizdəki məlumatlar nə qədər çox olarsa səhifəmiz sağ tərəfdəki scroll çubuğu ilə aşağı-yuxarı doğru hərəkət etdirilir.

Əslində səhifənin sağa-sola (üfüqi istiqamətdə) hərəkəti üçün də əlavə hər hansı koda ehtiyac yoxdur. Bu tamamilə səhifənin genişliyi ilə əlaqədardır. Genişlik istifadə etdiyimiz kompyuterin çözünürlüyü (resulation – motirodakı pixel sayı) ilə əlaqəlidir. Adətən səhifələrin genişliyini sağdan və soldan boşluqlarla kodlaşdırırıq ki istifadəçi əziyyət çəkməsin. Müasir frameworklərdə isə artıq bunu avtomatik tətbiq etmək mümükündür. Yəni səhifələrin hər istifadəçinin minotoruna uyğun şəkildə göstərilməsi artıq mümkündür.

 
Ancaq bəzi xüsusi səhifələr var ki onlarda standart qaydalara əməl etmək əvəzinə bəzi qeyri adi dizaynlara üstünlük verilir. Bu yazımda paylaşacağım kodlar da belə istifadə üçün nəzərdə tutulub. Belə ki, səhifəmizdəki mətnlərin aşağı doğru deyil avtomatik olaraq sağa doğru davam etməsini və mouse`un diyircəyi ilə səhifəni sağa sola doğru hərəkət etdirməyi göstərməyə çalışacam.

Əvvəla yeni bir səhifə hazırlamalıyıq. Bunun üçün səhifəmizdə aşağıdaki kodlar yer almalıdır:

Boş səhifəmizi hazırladıqdan sonra səhifəmizə istifadə edəcəyimiz javascript kitabxanalarını əlavə etməliyik. Bunun üçün biz jquery kitabxanasını və səhifəni üfüqi istiqamətdə hərəkət etdirmək üçün jquery.mousewheel kitabxanasını əlavə edəcəyik. Bu kitabxanaları səhifəmizdə head etiketləri içərisinə daxil etməliyik. Kodlar aşağıdaki şəkildə olacaq:

Jquery kitabxanalarını əlavə etdikdən sonra səhifəmizə məlumatlarımızı əlavə edək. Məlumatları əlavə edərkən xüsusi formadan istifadə edəcəyik. Belə ki, məlumatlarımız page-wrap id`li div içərisində post sinifi onun içərisində də h2 etiketi ilə başlıq və p etiketi ilə mətn şəklində daxil edilməlidir. Bunun səbəbi isə bir sonraki addımlarda açıqlanacaq. Məlumatımız aşağıdaki formada body etiketləri arasına əlavə edilməlidir:

Məlumatlarımızı bu formada bir neçə dəfə əlavə etməliyik ki, səhifədə məlumat çox görünsün ki, sağa sola doğru hərəkət əmələ gəlsin.
Bu şəkildə məlumatlarımızı əlavə etdikdən sonra post sinifi içərisindəki məlumatlara bir genişlik vermək lazımdır. Bu genişliyi verməkdə məqsəd isə səhifənin sağa doğru genişlənməsini istəməyimizdir. Ancaq səhifməzi sağa doğru genişləndiyi zaman səhifəmizin alt hissəsində scroll çubuğu əmələ gələcək. Bu da xoş bir görüntü olmayacaq. Ona görə də body bölməsində css kodlarından istifadə edərək scroll çubuğunu görünməz etməliyik. Bunu da overflow-x kodu ilə edə bilərik. Nəticədə kodlarımız aşağıdaki şəkildə olacaq:

Bu stil kodlarını səhifəmizdə head etiketi arasına daxil etməliyik.
 

İndi isə yuxarıda əlavə etdiyimiz məlumatları avtomatik olaraq javascript kodları ilə cədvəl şəklində göstərməliyik. Yəni post-wrap id`li div`imiz cədvəl, post sinifi`miz isə cədvəldəki sütunlar olmalıdır. Hansı ki yuxarıda css kodları ilə genişliyini 500px dəyərində qeyd etmişdik. Nəticədə cədvəlin sütunları sağa doğru genişlənəcək və məlumatlar səhifənin altına yox sağına doğru genişlənəcək. Bunun üçün aşağıdaki kodları səhifəmizə əlavə etdiyimiz jquery kitabxanalarından sonra əlavə etməliyik:

NƏTİCƏ:

Nəticəni ayrı səhifədə buradan yoxlaya bilərsiniz.

Tətbiqi buradan endirim incələyə bilərsiniz.

Qaynaq: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/