Xin chào các bạn, sau một thời gian học hỏi trên website, giờ mình đã có tương đối đủ kiến thức cơ bản để chập chững vào nghề, tiện đang lúc nông nhần không ai thuê mướn, lên đây viết tút và một số kiến thức đã học được cho mọi người, mong được ủng hộ :)

Bài viết này sử dụng jquery, và chỉ một câu lệnh đơn giản nhất của nó là .toggleClass, với nó bạn sẽ làm quen được các sử dụng jquery cơ bản và phương thức thay đổi Class nhằm tạo ra các hiệu ứng đẹp mắt 

Để ẩn menu khỏi website có rất nhiều cách, từ việc bạn thay đổi z-index cho đến việc để display:hidden đều có thể được. Ở đây mình sử dụng position, thay đổi vị trí của menu so với website. Do đặc tính của một slide menu thông thường là nằm cố định ở một trong các vị trí trái phải ( thường thất) hay trên dưới (hiếm thấy), có chiều dài hoặc rộng toàn màn hình nên việc sử dụng position trở nên khá dễ dàng.

Đầu tiên ta tiết lập các thẻ cơ bản, như đoạn code demo dưới đây gồm có một thẻ open button, một thẻ chứa menu và close button,  và một thẻ “fog-hover” trống có tính năng như một nút close menu

See the Pen simple slide menu begin by mcmillant (@mcmillant) on CodePen.

Tiếp theo ca style menu, các đặc điểm nổi bật của một slide-menu là có vị trí cố định ở bên trái- phải (thường thấy) và trên dưới (hiếm thấy) nên việc để position:fixed; height:100%; là các câu lệnh không thể thiếu.

See the Pen slidêmnu + css by mcmillant (@mcmillant) on CodePen.

Các bạn chú ý yếu tố z-index, do menu sẽ hiện chèn lên toàn bộ website nên chúng sẽ có giá trị cao nhất.

Tiếp đó phần quan trọng nhất là right:0px; đây là vị trí khi menu hiện ra, ở đoạn code tiếp theo đây chúng ta sẽ ẩn menu đi bằng cách thay đổi giá trị của right:-300px; (menu sẽ cách rìa bên phải website với khoảng cách bằng độ rộng của nó), kết quả ta được như sau.

See the Pen ngqsz by mcmillant (@mcmillant) on CodePen.

Công việc cuối cùng khi làm việc với Css đó là các Class phụ, các class này chỉ được thêm vào khi open button được click nhờ jquery.

Sự kiện ở đây sẽ là : khi open button được click -> Class “slide-menu-show” sẽ được thêm vào để đưa vị trí của menu tờ -300px thành 0px – Class “fog” sẽ được thêm vào để tạo hiệu ứng sương mờ nhằm thông báo cho người dùng rằng họ đang làm việc với menu. Kết quả bạn được đoạn code như sau.

See the Pen <a href=’http://codepen.io/mcmillant/pen/stAfH’>stAfH</a> by mcmillant (<a href=’http://codepen.io/mcmillant’>@mcmillant</a>) on <a href=’http://codepen.io’>CodePen</a>.

Các bạn chưa thấy có gì thay đổi vì ta chưa có jquery để thêm Class vào. Bước tiếp theo là tạo file jquery và gọi chúng ra, mình dùng .toggleClass(); , câu lệnh này nhằm thêm mới Class vào đối tượng nếu chúng chưa có sẵn hoặc xóa bỏ đối tượng khi chúng đã có. Để người dùng có thể đóng menu ngay cả khi ấn chuột hoặc trỏ tay ở vùng ngoài menu (bây giờ lớp sương mờ đang ở đó) ta chỉ việc togglClass tương tự với thẻ “fog-hover”. Và đây là kết quả

See the Pen simple slide menu by mcmillant (@mcmillant) on CodePen.

Vậy là xong, các bước cơ bản cũng chỉ có thế, việc sử dụng toggleClass, addClass và removeClass là các công cụ cơ bản để các bạn tạo khá nhiều hiệu ứng đẹp, không quá phức tạp, chúc các bạn vui vẻ với bài hướng dẫn này <(“).