Sidebar là một phần của trang web giúp bạn có thể dễ dàng đặt các đường dẫn điều hướng hay hiển thị một số thông tin quan trọng giúp khách hàng tìm kiếm một cách dễ dàng. Ngoài ra nó cũng cải thiện được diện tích sử dụng cho trang web. Nào bây giờ chúng ta hãy cùng nhau tìm hiểu những sidebar được sử dụng phổ biến trong năm 2020 nhé!
Các Ví Dụ Sidebar Trong Thiết Kế Web
Trước khi đi vào ví dụ sidebar thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Thiết Kế Sidebar CSS
Kết quả bạn xem bên dưới nhé:
See the Pen PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic (@plavookac) on CodePen.
Thiết Kế UI Sidebar Menu CSS
Kết quả bạn xem bên dưới nhé:
See the Pen UI with UX improvements with only CSS by Twikito (@Twikito) on CodePen.
Cách Tạo Javascript Sidebar Navigation Menu
Kết quả bạn xem bên dưới nhé:
See the Pen CSS sidebar toggle by Silvestar Bistrović (@CiTA) on CodePen.
Thiết Kế Jquery Sidebar Menu
Kết quả bạn xem bên dưới nhé:
See the Pen Responsive sidebar revealed on click and key press by Antonija Šimić (@tonkec) on CodePen.
Cách Tạo Sidebar Bootstrap
Kết quả bạn xem bên dưới nhé:
See the Pen Bootstrap Hidden Sidebar + Nav Icons by David Pennington (@Xeoncross) on CodePen.
Cách Tạo Sidebar Transitions CSS
Kết quả bạn xem bên dưới nhé:
See the Pen Sidebar Transitions by kyunwang (@kyunwang) on CodePen.
Tổng Hợp Hiệu Ứng Sidebar Animation Bằng CSS3 Javascript
Kết quả bạn xem bên dưới nhé:
See the Pen Off-canvas Navigation Variants (Sidebar) by foxeisen (@foxeisen) on CodePen.
Thiết Kế Responsive Sidebar Bootstrap
Kết quả bạn xem bên dưới nhé:
See the Pen Collapsible Sidebar by Rémi Cauchon (@rcauchon) on CodePen.
Thiết Kế Sidebar Javascript
Kết quả bạn xem bên dưới nhé:
See the Pen Sidebar Interaction by Siddharth Parmar (@Siddharth11) on CodePen.
Cách Tạo Bootstrap Sidebar Menu
Kết quả bạn xem bên dưới nhé:
See the Pen Bootstrap 4 sidebar nav by Gilles Migliori (@migli) on CodePen.
Cách Tạo Flat CSS Sidebar
Kết quả bạn xem bên dưới nhé:
See the Pen Flat CSS Sidebar by Maz (@maziarzamani) on CodePen.
Thiết Kế Bootstrap Sidebar Menu Collapse
Kết quả bạn xem bên dưới nhé:
See the Pen Bootstrap SideBar by goodywebs (@goodywebs) on CodePen.
Tạo Hiệu Ứng Sidebar Smooth Transition
Kết quả bạn xem bên dưới nhé:
See the Pen Sidebar with smooth transition by Antonija Šimić (@tonkec) on CodePen.
Tạo Hiệu Ứng Sidebar Với SVG
Kết quả bạn xem bên dưới nhé:
See the Pen Sidebar Nav Animation by magnificode (@magnificode) on CodePen.
Thiết Kế Sidebar HTML5
Kết quả bạn xem bên dưới nhé:
See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.
Hiệu Ứng Hover Sidebar Menu CSS
Kết quả bạn xem bên dưới nhé:
See the Pen Fixed nav hover effect by Terence Devine (@tdevine33) on CodePen.
Thiết Kế Fixed Sidebar CSS
Kết quả bạn xem bên dưới nhé:
See the Pen Fixed Hover Navigation by Vince Brown (@vincebrown) on CodePen.
Thiết Kế Transparent Sidebar CSS
Kết quả bạn xem bên dưới nhé:
See the Pen Hidden Sidebar Menu by Michael Ambrozaitis (@mambroz) on CodePen.
Cách Tạo Left Sidebar CSS
Kết quả bạn xem bên dưới nhé:
See the Pen Off-Canvas Menu by Ryan Morr (@ryanmorr) on CodePen.
Thiết Kế Responsive Sidebar HTML5 CSS3
Kết quả bạn xem bên dưới nhé:
See the Pen Responsive Sidebar (Only with CSS) by Eliezer Pujols (@wideckop) on CodePen.
Thiết Kế Sidebar Theo Kiểu Material
Kết quả bạn xem bên dưới nhé:
See the Pen Pure CSS Material Design Sidebar by Sean Free (@seanfree) on CodePen.
Thiết Kế Twitter Sidebar Javascript
Kết quả bạn xem bên dưới nhé:
See the Pen Twitter Sidebar by Aaron Iker (@aaroniker) on CodePen.
Thiết Kế Sidebar Dark Và Light Mode
Kết quả bạn xem bên dưới nhé:
See the Pen Sidebar by Ryan (@ryanparag) on CodePen.
Ví Dụ Về Sidebar Bootstrap
Ví Dụ Về Sidebar Background Gradient Bootstrap
Ví Dụ Về Menu Sidebar Bootstrap
Ví Dụ Về Sidebar Menu Navigation
Ví Dụ Về Sidebar Email Form
Ví Dụ Về Sidebar Cho website
Thiết Kế Sidebar Navigation
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ sidebar hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!