Làm Dropmenu hình ảnh đẹp với theme Flatsome

Để làm được menu hình ảnh đẹp thì cũng có nhiều cách và cũng có nhiều code, plugin hỗ trợ việc này khá tốt nhưng đối với theme Flatsome mọi người thường dùng để làm website bán hàng thì nó đã được tích hợp sẵn nhưng mình thấy khá ít người sử dụng, cũng không biết sao nữa nhưng hôm nay mình sẽ viết bài hướng dẫn để mọi người có thể tạo được một Dropmenu hình ảnh đẹp với Flatsome mà không cần phải dùng plugin cho nó nhẹ nhàng.

Trên đây là hình ảnh demo của menu khi làm xong. Hình ảnh này mình chỉ lấy demo trên trang web đó và làm tương tự thôi nhé .

Hướng dẫn tạo Drop Menu Hình Ảnh với theme Flatsome

Bước 1 tạo Menu chính

Truy cập Giao diện >> Menu , và tạo các menu cấp 1 và cấp 2 dạng như sau :

Các trường bạn cần phải thiết lập để có thể có được Sub Menu Drop hình ảnh như trên là :

• Lớp css (tùy chọn) : Bắt buộc phải điền là image-column , ở bất cứ submenu nào bạn muốn hiển thị hình ảnh thì bạn phải có class css này ở submenu đó.
• Mô tả : Ở phần này chúng ta sẽ điền vào url hình ảnh muốn hiển thị.

Nếu trong menu bạn không hiển thị 2 trường thuộc tính css và mô tả thì bạn sẽ hiển thị nó ra như sau :

Ở phần menu bạn kéo lên trên cùng và bấm vào tùy chọn hiển thị, sẽ hiển thị như trên và bạn check chọn vào các ô Lớp css , Mô tả như hình nhé.

Như vậy đã xong phần hiển thị cho hình ảnh trong Drop Menu ở Flatsome .

Việc tiếp theo là mình sẽ css chút để làm sao cho nó đẹp hơn theo ý mình , bởi css mặc định của phần này trong Flatsome khá xấu.

Bước 2 : Css cho Menu đẹp hơn.

Mình sẽ lấy đúng css để làm được menu như demo trong hình, còn các bạn muốn làm khác như thế nào thì tự css lại nhé.

@media only screen and (min-width: 769px){
.nav-left{position: initial;}
.nav-left li{position: initial;}
.nav-left li ul.sub-menu{width: 100%;text-align: center;border: none;
    border-radius: 0;
    margin-top: 63px;background-color: rgba(0,0,0,0.8) }
.nav-left li ul.sub-menu li{display: inline-block;min-width: 225px;width: 225px;}
.nav-left li ul.sub-menu li a:hover{background: rgba(255,255,255,0.3); border-radius: 0;}
.nav-left li.current-dropdown>.nav-dropdown-full, .nav-left li.has-dropdown:hover>.nav-dropdown-full{position: absolute!important; left: 0!important; transform:initial; max-width: 100%!important; display: initial!important;}
}

Bởi vì menu này chỉ nên hiển thị trên Desktop nên mới có đoạn @media nhé .
Css thì các bạn chắc biết là phải copy vào đâu rồi nên mình không nhắc ở đây nữa.
Đến lúc này thì bạn đã hoàn thành 1 menu y như hình rồi nhé . Hi vọng bài viết này sẽ giúp ích cho nhiều bạn.
Nếu thấy bài viết này hay và có ích hãy chia sẽ giúp mình.