Html css jquery cho thanh topmenu

loading...

Chào bạn đã quay trở lại với dự án ebook hướng dẫn thiết kế theme wordpress của tôi, hôm nay chung ta sẽ đi làm phần thanh menutop, như thường lệ là mã của nó

html css jquery cho thanh top menu

Phần html:

Phần code:

Phần luận: menu cần một div để bao ngoài và một danh sách mà danh sách thì sử dụng gì bạn như hôm trước tôi có nói để tạo danh sách chúng ta thường sử dụng ul li và đây có thêm phần liên kết nên chúng ta sử dụng thêm a

Phần css:

Phần code:

Phần luận: đối với css cho thanh menu này những vấn đề mà tôi đã nói như backgroud, width, height… thì tôi sẽ không nói lại. Hôm nay trong phần css chúng ta cần nhớ gì nào?

1.Padding đây là thuộc tính dùng để đẩy các đối tượng nằm trong nó, điều này thì rất hữu ích khi ta tạo một khung chứa văn bản nếu padding:0 thì văn bản sẽ nằm sát khung như vậy thì về mặc thẩm mỹ sẽ không đẹp tý nào.

Cú pháp của padding: top px right px bottom px left px, bạn cũng có thể xài padding-top, padding-righ, padding-bottom, padding-left, cũng tùy trường hợp mà bạn áp dụng cho phụ hợp, ví dụ như khi bạn cần đẩy ở bên phải chẳng hạn thì chỉ cần xài padding-right: bao nhiêu px, nhưng khi bạn cần đẩy ở trên và bên trái nếu bạn xài padding-top, padding-left thì quá dài đúng không, như thế sẽ không tối ưu, trong trường hợp này ban nên xài padding: đẩy bao nhiêu px 0 0 đẩy bao nhiêu px

2.margin: là cách chúng ta tự đẩy các đối tượng so với đối tượng bên cạnh

Cú pháp: margin: top right bottom left và tương tự như padding thì bạn cũng có thể xài margin-top, margin-right, margin-bottom, margin-left

Bạn có thể xem hình dưới đây để hiểu thêm

padding va margin

Phần jquery:

Phần code:

Phần luận:

Jquery là gì? hãy xem lại bài tảng mạn về jquery

$(document).ready(function(){

Các lệnh jquery

});

$(‘.topmenu .main_menu .top_menu a’).click(function(){

Các lệnh con nằm trong này

});khi người dùng click vào menu thì thực hiện các lệnh con trong này

$(‘.topmenu .main_menu .top_menu a’).removeClass(‘active’): remove tất cả các class active

$(this).addClass(‘active’): thêm class active vào menu vừa được click

Hi vọng sẽ giúp được bạn một phần nhỏ trên con đường làm chủ kiến thức html, css, jquery

Hẹn gặp lại bạn ở phần tiếp theo của dự án này

Cập nhật bài viết mới qua Email


Theo dõi tôi
Đăng ký nhận tin mới
đăng ký nhận tin mới

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress