Hướng dẫn từng bước với 5 mẫu thanh bên [cập nhật vào năm 2021] – cố định thanh bên trái bootstrap

Hôm nay tôi muốn hướng dẫn bạn cách tạo điều hướng thanh bên HTML có thể thu gọn bằng Bootstrap 4 với một số CSS và jQuery. Kể từ Bootstrap 4…

Bạn đang xem: fixed sidebar bootstrap

Đã xuất bản: 1.9. Năm 2021 | Cập nhật lần cuối: 17.1.2022

Hôm nay tôi muốn hướng dẫn bạn cách tạo điều hướng thanh bên HTML có thể thu gọn bằng cách sử dụng Bootstrap 4 với một số CSS và jQuery.

Vì Bootstrap 4 và Bootstrap 3 không cung cấp bất kỳ menu thanh bên nào nên chúng tôi sẽ xây dựng 5 giải pháp riêng biệt . Mỗi người trong số họ sẽ có các tính năng và thiết kế hơi khác nhau, vì vậy bạn có thể chọn một trong số đó phục vụ nhu cầu của bạn.

Trong mỗi phần của hướng dẫn, tôi sẽ hướng dẫn bạn từng bước qua tất cả các bước cần thiết trong HTML, CSS và JavaScript.

Bootstrap Sidebar

Chúng tôi sẽ xây dựng 5 thanh bên như thế này.

Đây là những gì chúng tôi sẽ xây dựng:

Nguồn tải xuống

Bản trình diễn số 1 Bản trình diễn số 2 < / span> Bản trình diễn số 3 Bản trình diễn số 4 < / span> Demo – Phần thưởng

Ban đầu, tôi đã xuất bản hướng dẫn này cho Bootstrap 3 vào năm 2017.

Vào năm 2018, Tôi đã nâng cấp nó lên Bootstrap 4 và thực hiện các cải tiến bổ sung dựa trên phản hồi của bạn vào năm 2020. Tuy nhiên, phiên bản Bootstrap 3 cũng là một phần của quá trình tải xuống, trong trường hợp bạn cần nó. .

Tệp cơ bản

Trước khi tìm hiểu kỹ về mã hóa, trước tiên chúng ta nên thiết lập mẫu ban đầu với tất cả các tệp cần thiết.

Trong tất cả bốn mẫu thanh bên mà chúng ta sẽ xem xét hôm nay, chúng ta sẽ cần tệp Bootstrap 4 CSS và JS, thư viện jQuery và biểu định kiểu tùy chỉnh của chúng tôi.

Ngoài ra, tôi bao gồm Font Awesome 5 sẽ được sử dụng trên các nút và các mục menu trong một ví dụ.

Vì vậy, đánh dấu khởi động của chúng tôi sẽ như sau:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;

& lt; đầu & gt;
    & lt; meta charset = "utf-8" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;

    & lt; title & gt; Thanh bên có thể thu gọn bằng Bootstrap 4 & lt; / title & gt;

    & lt;! - Bootstrap CSS CDN - & gt;
    & lt; link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" "liêm sỉ
    & lt;! - CSS tùy chỉnh của chúng tôi - & gt;
    & lt; link rel = "stylesheet" href = "style.css" & gt;

    & lt;! - Font Awesome JS - & gt;
    & lt; script defer src = "https://use.fontawesome.com/releases/v5.0.13/js/solid.js" Liêm = "sha384-tzzSw1 / Vo + 0N5UhStP3bvwWPq + uvzCMfrN1fEFe + xBmv1C / AtVX5K0uZtmc ẩn danh crossorigin / AtVX5K0uZtmc "& gt; & lt; / script & gt;
    & lt; script defer src = "https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" Liem = "sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf / q2myIUVO0VsqaGHJs / 0R & lori" cross-script
& lt; / head & gt;

& lt; body & gt;


    & lt;! - jQuery CDN - Phiên bản mỏng (= không có AJAX) - & gt;
    & lt; script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" Liem = "sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo" hiddent; / script & gt;
    & lt;! - Popper.JS - & gt;
    & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" "liêm sỉ "ẩn danh" & gt; & lt; / script & gt;
    & lt;! - Bootstrap JS - & gt;
    & lt; script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" Integrity = "sha384-uefMccjFJAIv6A + rW + L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKIt65" ẩn danh crossorigin / 6nm "ẩn danh crossorigin / 6nm" & lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;  

Bạn đang tìm kiếm một mẫu Bootstrap 4 hoàn chỉnh với điều hướng thanh bên Bootstrap thú vị? Xem Trang tổng quan Bootstrap 4 hoặc Quản trị viên tài liệu Bootstrap của tôi. Cả hai mẫu đều được tải xuống và sử dụng miễn phí.

1. Menu thanh bên có thể thu gọn tĩnh

Trong phần này, chúng tôi sẽ xây dựng thanh bên đáp ứng Bootstrap 4 đơn giản có thể cuộn theo chiều dọc cùng với trang.

HTML

Cấu trúc tài liệu cơ bản

Chúng tôi sẽ gói mọi thứ trong .wrapper div để tận dụng thuộc tính CSS flex .

Trong trường hợp này, chúng tôi sẽ cung cấp cho .wrapper thuộc tính CSS align-items: stretch .

Bằng cách làm này, điều hướng thanh bên sẽ chiếm chiều cao của nội dung trang. Khi nội dung tăng lên, chiều cao thanh bên cũng tự động tăng.

  & lt; div class = "wrapper" & gt;

    & lt;! - Thanh bên - & gt;
    & lt; nav id = "thanh bên" & gt;
        ...
    & lt; / nav & gt;

    & lt;! - Nội dung Trang - & gt;
    & lt; div id = "content" & gt;
        & lt;! - Chúng tôi sẽ điền vào phần này bằng nội dung giả - & gt;
    & lt; / div & gt;

& lt; / div & gt;  

Menu thanh bên và nội dung của nó

Bây giờ, hãy lấp đầy thanh bên của chúng ta với một số nội dung.

Tôi sẽ đặt ở đó một menu điều hướng thanh bên sẽ chứa một số liên kết điều hướng demo và cả menu thả xuống Bootstrap 4.

Lưu ý rằng chúng tôi cũng đã thêm một lớp .active vào mục đầu tiên để đánh dấu rằng nó là mục menu hiện đang hoạt động, tức là trang trên trang web.

  & lt; div class = "wrapper" & gt;
    & lt;! - Thanh bên - & gt;
    & lt; nav id = "thanh bên" & gt;
        & lt; div class = "sidebar-header" & gt;
            & lt; h3 & gt; Thanh bên Bootstrap & lt; / h3 & gt;
        & lt; / div & gt;

        & lt; ul class = "list-unstyled components" & gt;
            & lt; p & gt; Tiêu đề giả & lt; / p & gt;
            & lt; li class = "hoạt động" & gt;
                & lt; a href = "# homeSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt; Trang chủ & lt; / a & gt;
                & lt; ul class = "sập danh sách-unstyled" id = "homeSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Giới thiệu & lt; / a & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "# pageSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt; Trang & lt; / a & gt;
                & lt; ul class = "thu gọn danh sách-unstyled" id = "pageSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Danh mục đầu tư & lt; / a & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Liên hệ & lt; / a & gt;
            & lt; / li & gt;
        & lt; / ul & gt;
    & lt; / nav & gt;

& lt; / div & gt;  

Làm cho trình đơn thả xuống hoạt động

  1. Để làm cho menu thả xuống

    có thể thu gọn

    , bạn nên thêm data-toggle = "sập" vào liên kết giữ menu thả xuống.

  2. Lưu ý rằng tôi cũng đã thêm class = "dropdown-toggle" – lớp này thêm một hình tam giác nhỏ ở bên cạnh và giúp người dùng hiểu chức năng của nó.
  3. Thuộc tính href của liên kết phải chứa id của trình đơn thả xuống trước dấu thăng. Trong trường hợp này, tôi đã sử dụng #homeSubmenu .
  4. Bản thân menu thả xuống cũng phải có lớp .collapse .
  & lt; a href = "# pageSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt; Trang & lt; / a & gt;
& lt; ul class = "thu gọn danh sách-unstyled" id = "pageSubmenu" & gt;
    & lt; li & gt;
        & lt; a href = "#" & gt; Trang 1 & lt; / a & gt;
    & lt; / li & gt;
    & lt; li & gt;
        & lt; a href = "#" & gt; Trang 2 & lt; / a & gt;
    & lt; / li & gt;
    & lt; li & gt;
        & lt; a href = "#" & gt; Trang 3 & lt; / a & gt;
    & lt; / li & gt;
& lt; / ul & gt;  

Đảm bảo thêm aria-expand vào phần tử điều khiển của trình đơn thả xuống & lt; a & gt; .

Thuộc tính này xác định rõ ràng trạng thái hiện tại của phần tử có thể thu gọn sang trình đọc màn hình và các công nghệ hỗ trợ tương tự.

Nếu phần tử có thể thu gọn được đóng theo mặc định, phần tử đó phải có giá trị là aria-expand = "false" . Nếu bạn đã đặt phần tử có thể thu gọn là mở, theo mặc định bằng cách sử dụng lớp .in , hãy đặt aria-expand = "true" trên điều khiển thay thế.

Bằng cách nhấp vào liên kết, trình đơn thả xuống sẽ trượt lên hoặc trượt xuống theo giá trị aria-expand = "" .

Nút chuyển đổi thanh bên

Bây giờ đã đến lúc thêm nút chuyển đổi thanh bên . Nút này sẽ xử lý việc mở và đóng thanh bên.

Chúng tôi sẽ đặt nó bên ngoài thanh bên . Không quan trọng nó nằm ở đâu trong nội dung của bạn, miễn là nó nằm ngoài thanh bên, tức là hiển thị mọi lúc.

Hãy đặt nó vào Bootstrap navbar trong div nội dung.

  & lt; div id = "content" & gt;
    & lt; nav class = "navbar navbar-expand-lg navbar-light bg-light" & gt;
        & lt; div class = "container-chất lỏng" & gt;

            & lt; button type = "button" id = "sidebarCollapse" class = "btn btn-info" & gt;
                & lt; i class = "fas fa-align-left" & gt; & lt; / i & gt;
                & lt; span & gt; Chuyển đổi Thanh bên & lt; / span & gt;
            & lt; / nút & gt;

        & lt; / div & gt;
    & lt; / nav & gt;
& lt; / div & gt;  

CSS

Bây giờ, cuối cùng đã đến lúc áp dụng một số kiểu cho thanh bên của chúng ta.

Điều quan trọng nhất đối với phương pháp này là sử dụng thuộc tính flex cho div .wrapper . Như tôi đã đề cập ở trên, giá trị stretch sẽ cân bằng cả nội dung trang và chiều cao thanh bên.

 . wrapper {
    hiển thị: flex;
    chiều rộng: 100%;
    align-items: kéo dài;
}  

Sau đó, chúng tôi sẽ cung cấp cho thanh bên có chiều rộng cố định là 250px.

Do sử dụng thuộc tính flexbox, nội dung trang #content sẽ chiếm chiều rộng còn lại của .wrapper . (miễn là chúng tôi không sử dụng thuộc tính flex-wrap: wrap )

Sau đó, chúng tôi sẽ sử dụng chiều rộng của thanh bên để đẩy phần tử ra khỏi màn hình khi chúng tôi không cần. Hành vi này sẽ được áp dụng khi thanh bên có lớp .active .

Xin lỗi, tôi đã không nghĩ ra một tên lớp tốt hơn khi tôi viết hướng dẫn này vào năm 2017.

Trên máy tính để bàn , # sidebar.active sẽ có nghĩa là thanh bên bị ẩn và chỉ #sidebar mới hiển thị.

Nó sẽ có hành vi ngược lại trên điện thoại di động trong đó # sidebar.active là khi thanh bên hiển thị và #sidebar bị ẩn. < / p>

Lớp .active có giá trị margin-left âm bằng với chiều rộng thanh bên.

Sau này, chúng tôi cũng sẽ sử dụng lớp này trong phần JavaScript.

 . wrapper {
    hiển thị: flex;
    align-items: kéo dài;
}

# thanh bên {
    chiều rộng tối thiểu: 250px;
    chiều rộng tối đa: 250px;
}

# sidebar.active {
    margin-left: -250px;
}  

chúng tôi không biết liệu nội dung có lấp đầy toàn bộ màn hình theo chiều dọc hay không , chúng tôi sẽ đặt chiều cao tối thiểu của thanh bên thành 100vh . vh là một đơn vị CSS đề cập đến chiều cao của khung nhìn.

Điều này có nghĩa là chiều cao ban đầu của thanh bên sẽ ít nhất bằng chiều cao màn hình . Ngoài ra, chiều cao của nó sẽ tăng khi nội dung trang tăng lên.

  # thanh bên {
    chiều rộng tối thiểu: 250px;
    chiều rộng tối đa: 250px;
    chiều cao tối thiểu: 100vh;
}  

Trình đơn thả xuống tạo kiểu

Chỉ cần một chút chạm vào trình đơn thả xuống Bootstrap 4 .

Chúng tôi đang sử dụng lớp Bootstrap 4 tiêu chuẩn .dropdown-toggle .

Lớp này thêm một hình tam giác nhỏ bên cạnh các liên kết thả xuống.

Để thống nhất giao diện của các liên kết, chúng tôi sẽ di chuyển hình tam giác, thường nằm bên cạnh văn bản, sang phần bên phải của thanh bên với mã CSS sau.

  a [data-toggle = "sập"] {
    chức vụ: thân nhân;
}

.dropdown-toggle :: sau {
    hiển thị: khối;
    vị trí: tuyệt đối;
    top: 50%;
    bên phải: 20px;
    biến đổi: translateY (-50%);
}  

Truy vấn phương tiện

Chúng tôi sẽ cần hoạt động hơi khác một chút cho thanh bên trên màn hình nhỏ hơn .

Thay vì xuất hiện theo mặc định, nó sẽ bị ẩn và chỉ xuất hiện sau khi nhấp vào nút chuyển đổi.

Như vậy, chúng tôi sẽ tiết kiệm không gian quý giá cho nội dung của bạn và chỉ hiển thị điều hướng cho người dùng khi cần.

Về cơ bản, những gì chúng ta cần làm ở đây là đảo ngược kiểu .active :

  @ media (max-width: 768px) {
    # thanh bên {
        margin-left: -250px;
    }
    # sidebar.active {
        lề trái: 0;
    }
}  

Tạo kiểu bổ sung

Đây là tất cả những gì liên quan đến kiểu CSS cần thiết cần thiết để làm cho thanh bên của bạn hoạt động.

Để làm cho nó trông lạ mắt hơn, tôi đã tạo kiểu cho nó nhiều hơn một chút.

Tất cả đều được bao gồm trong gói tải xuống, vì vậy tôi sẽ chỉ đề cập nhanh ở đây mà không có bất kỳ bình luận nào thêm.

  / *
    PHONG CÁCH DEMO BỔ SUNG, KHÔNG QUAN TRỌNG ĐỂ LÀM NHỮNG VIỆC LÀM VIỆC NHƯNG LÀM CHO NÓ THÀNH BIT NICER :)
* /
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


thân hình {
    font-family: 'Poppins', sans-serif;
    nền: #fafafa;
}

P {
    font-family: 'Poppins', sans-serif;
    cỡ chữ: 1.1em;
    font-weight: 300;
    chiều cao dòng: 1,7em;
    màu: # 999;
}

a, a: hover, a: focus {
    màu sắc: kế thừa;
    văn bản-trang trí: không có;
    chuyển tiếp: tất cả 0,3s;
}

# thanh bên {
    / * cũng đừng quên thêm tất cả các phong cách đã đề cập trước đó ở đây * /
    nền: # 7386D5;
    màu: #fff;
    chuyển tiếp: tất cả 0,3s;
}

#sidebar .sidebar-header {
    đệm: 20px;
    nền: # 6d7fcc;
}

#sidebar ul.components {
    đệm: 20px 0;
    border-bottom: 1px solid # 47748b;
}

#sidebar ul p {
    màu: #fff;
    đệm: 10px;
}

#sidebar ul li a {
    đệm: 10px;
    cỡ chữ: 1.1em;
    hiển thị: khối;
}
#sidebar ul li a: hover {
    màu: # 7386D5;
    nền: #fff;
}

#sidebar ul li.active & gt; a, a [aria-expand = "true"] {
    màu: #fff;
    nền: # 6d7fcc;
}
ul ul a {
    font-size: 0.9em! important;
    padding-left: 30px! important;
    nền: # 6d7fcc;
}  

JavaScript

Ý tưởng ở đây là chuyển lớp .active sang thanh bên khi nhấp vào nút bật tắt.

Theo mặc định, thanh bên sẽ xuất hiện, tức là nó chưa có lớp .active .

Sau khi nhấp vào nút chuyển đổi, thanh bên sẽ được cấp một lớp .active và được đẩy ra khỏi màn hình. Nội dung trang cũng sẽ có chiều rộng toàn màn hình.

Nhấp lại vào nút chuyển đổi sẽ xóa lớp .active và thanh bên sẽ xuất hiện trở lại. Và như vậy.

Hãy xem mã:

  $ (document) .ready (function () {

    $ ('# sidebarCollapse'). on ('click', function () {
        $ ('# sidebar'). toggleClass ('hoạt động');
    });

});  

Điều này hoàn thành ví dụ đầu tiên của chúng tôi, hãy xem những gì chúng tôi đã xây dựng.

Xem bản trình diễn

2. Đã cố định thanh bên có thể cuộn được định vị

Trong phần này, chúng tôi sẽ tạo một thanh bên tương tự nhưng nó sẽ được sửa. Điều này có nghĩa là nó sẽ không cuộn theo trang nhưng nó sẽ cố định ở cùng một vị trí. Điều này sẽ chỉ áp dụng cho các thiết bị lớn hơn có chiều rộng khung nhìn là 768px +. Toàn bộ trang cũng sẽ phản hồi.

HTML

Cách tiếp cận trong ví dụ này tương tự như cách điều hướng thanh bên trước đó, do đó chúng tôi có thể sử dụng lại mã trước đó.

Đánh dấu của chúng tôi phải như sau:

 & lt; div class = "wrapper" & gt;
    & lt;! - Thanh bên - & gt;
    & lt; nav id = "thanh bên" & gt;
        & lt; div class = "sidebar-header" & gt;
            & lt; h3 & gt; Thanh bên Bootstrap & lt; / h3 & gt;
        & lt; / div & gt;

        & lt; ul class = "list-unstyled components" & gt;
            & lt; p & gt; Tiêu đề giả & lt; / p & gt;
            & lt; li class = "hoạt động" & gt;
                & lt; a href = "# homeSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt; Trang chủ & lt; / a & gt;
                & lt; ul class = "sập danh sách-unstyled" id = "homeSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Giới thiệu & lt; / a & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "# pageSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt; Trang & lt; / a & gt;
                & lt; ul class = "thu gọn danh sách-unstyled" id = "pageSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Danh mục đầu tư & lt; / a & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Liên hệ & lt; / a & gt;
            & lt; / li & gt;
        & lt; / ul & gt;

    & lt; / nav & gt;
    & lt;! - Nội dung Trang - & gt;
    & lt; div id = "content" & gt;

        & lt; nav class = "navbar navbar-expand-lg navbar-light bg-light" & gt;
            & lt; div class = "container-chất lỏng" & gt;

                & lt; button type = "button" id = "sidebarCollapse" class = "btn btn-info" & gt;
                    & lt; i class = "fas fa-align-left" & gt; & lt; / i & gt;
                    & lt; span & gt; Chuyển đổi Thanh bên & lt; / span & gt;
                & lt; / nút & gt;
            & lt; / div & gt;
        & lt; / nav & gt;
    & lt; / div & gt;
& lt; / div & gt;  

CSS

Vì chúng tôi cần một thanh bên có chiều cao cố định, chúng tôi sẽ loại bỏ thuộc tính align-items kéo dài các mục theo chiều dọc.

Tuy nhiên, nội dung mở rộng, thanh bên vẫn sẽ chiếm toàn bộ chiều cao của khung nhìn. Đối với điều này, chúng tôi sẽ thay thế min-height: 100vh bằng height: 100vh .

 . wrapper {
    hiển thị: flex;
    chiều rộng: 100%;
}

# thanh bên {
    chiều rộng: 250px;
    vị trí: cố định;
    đầu: 0;
    trái: 0;
    chiều cao: 100vh;
    z-index: 999;
    nền: # 7386D5;
    màu: #fff;
    chuyển tiếp: tất cả 0,3s;
}  

Tại thời điểm này, chúng tôi đã hoàn thành tất cả các sửa đổi CSS.

Chúng tôi sẽ thêm hai thủ thuật bổ sung trong JavaScript, hãy xem chúng ngay bây giờ.

JavaScript

Mẹo đầu tiên là tôi sẽ thay thế thanh cuộn mặc định của trình duyệt trong menu bên bằng một thanh tùy chỉnh.

Chúng tôi sẽ cần thanh cuộn xuất hiện trong trường hợp điều hướng quá cao để vừa với chế độ xem.

Vì mục đích này, tôi sẽ sử dụng cuộn nội dung tùy chỉnh jQuery .

Trước tiên, hãy thêm tệp JS của nó vào tệp HTML của chúng ta.

  & lt;! - jQuery CDN - Phiên bản mỏng (= không có AJAX) - & gt;
    & lt; script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" Liem = "sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo" hiddent; / script & gt;
    & lt;! - Popper.JS - & gt;
    & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" "liêm sỉ "ẩn danh" & gt; & lt; / script & gt;
    & lt;! - Bootstrap JS - & gt;
    & lt; script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" Integrity = "sha384-uefMccjFJAIv6A + rW + L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKIt65" ẩn danh crossorigin / 6nm "ẩn danh crossorigin / 6nm" & lt; / script & gt;
    & lt;! - jQuery Custom Scroller CDN - & gt;
    & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js" & gt; & lt ;/ script & gt;

& lt; / body & gt;
& lt; / html & gt;  

Và tệp biểu định kiểu của nó cho phần tử & lt; head & gt; :

 & lt;! - CSS Tùy chỉnh của chúng tôi - & gt;
& lt; link rel = "stylesheet" href = "style2.css" & gt;
& lt;! - CSS tùy chỉnh của thanh cuộn - & gt;
& lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" & gt;  

Bây giờ, hãy khởi chạy plugin và sử dụng một số tùy chọn của nó

  $ (document) .ready (function () {

    $ ("# sidebar"). mCustomScrollbar ({
         chủ đề: "tối thiểu"
    });

    $ ('# sidebarCollapse'). on ('click', function () {
        $ ('# sidebar'). toggleClass ('hoạt động');
    });

});  

Thủ thuật thứ hai mà chúng tôi sẽ sử dụng là tôi sẽ giảm thiểu các menu thả xuống đang mở khi thanh bên đóng lại.

Lý do cho điều này là để giữ mọi thứ nhất quán và luôn mở một thanh điều hướng có trình đơn thả xuống đóng.

  $ (document) .ready (function () {

    $ ("# sidebar"). mCustomScrollbar ({
         chủ đề: "tối thiểu"
    });

    $ ('# sidebarCollapse'). on ('click', function () {
        // mở hoặc đóng thanh điều hướng
        $ ('# sidebar'). toggleClass ('hoạt động');
        // đóng trình đơn thả xuống
        $ ('. sập.in'). toggleClass ('trong');
        // và cũng điều chỉnh các thuộc tính mở rộng aria mà chúng tôi sử dụng cho các mũi tên mở / đóng
        // trong CSS của chúng tôi
        $ ('a [aria-expand = true]'). attr ('aria-expand', 'false');
    });

});  

Để làm rõ những gì chúng tôi đã làm ở đây:

Lớp .in chịu trách nhiệm mở trình đơn thả xuống. Nếu có một menu thả xuống, nó sẽ mở, nếu không, nó sẽ đóng.

Chúng tôi đã nói với JavaScript của mình rằng nếu lớp này hiện diện, vui lòng xóa nó. Ngoài ra, vui lòng thay đổi giá trị aria-expand từ true thành false để mũi tên quay trở lại hướng logic của nó.

Điều này làm cho điều hướng thanh bên cố định của chúng tôi hoàn tất. Hãy xem những gì chúng tôi đã xây dựng.

Xem bản trình diễn

3. Đã sửa lỗi menu thanh bên có thể cuộn với lớp phủ nội dung

Theo cách tiếp cận này, chúng tôi sẽ tạo một thanh điều hướng bên tương tự như thanh điều hướng mà Google sử dụng cho thanh điều hướng trên máy tính bảng và điện thoại di động trong Material design .

Thanh bên sẽ che phần bên trái của nội dung trang khi nó mở ra và phần còn lại của nội dung sẽ được bao phủ bởi một lớp phủ tối trong suốt.

HTML

Chúng tôi sẽ sử dụng cùng một đánh dấu ở trên và thêm nút #dismiss vào thanh bên . Nút này sẽ chịu trách nhiệm đóng thanh bên khi nó đang mở.

Và vì chúng tôi sẽ áp dụng một lớp phủ trong suốt, hãy chèn một div .overlay ở cuối trang của chúng tôi cho mục đích đó.

 & lt; div class = "wrapper" & gt;
    & lt;! - Thanh bên - & gt;
    & lt; nav id = "thanh bên" & gt;

        & lt; div id = "loại bỏ" & gt;
            & lt; i class = "fas fa-arrow-left" & gt; & lt; / i & gt;
        & lt; / div & gt;

        & lt; div class = "sidebar-header" & gt;
            & lt; h3 & gt; Thanh bên Bootstrap & lt; / h3 & gt;
        & lt; / div & gt;

        & lt; ul class = "list-unstyled components" & gt;
            & lt; p & gt; Tiêu đề giả & lt; / p & gt;
            & lt; li class = "hoạt động" & gt;
                & lt; a href = "# homeSubmenu" data-toggle = "sập" aria-expand = "false" & gt; Trang chủ & lt; / a & gt;
                & lt; ul class = "sập danh sách-unstyled" id = "homeSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Giới thiệu & lt; / a & gt;
                & lt; a href = "# pageSubmenu" data-toggle = "sập" aria-expand = "false" & gt; Trang & lt; / a & gt;
                & lt; ul class = "thu gọn danh sách-unstyled" id = "pageSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Danh mục đầu tư & lt; / a & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt; Liên hệ & lt; / a & gt;
            & lt; / li & gt;
        & lt; / ul & gt;
    & lt; / nav & gt;

    & lt;! - Nội dung Trang - & gt;
    & lt; div id = "content" & gt;

        & lt; nav class = "navbar navbar-expand-lg navbar-light bg-light" & gt;
            & lt; div class = "container-chất lỏng" & gt;

                & lt; button type = "button" id = "sidebarCollapse" class = "btn btn-info" & gt;
                    & lt; i class = "fas fa-align-left" & gt; & lt; / i & gt;
                    & lt; span & gt; Chuyển đổi Thanh bên & lt; / span & gt;
                & lt; / nút & gt;
            & lt; / div & gt;
        & lt; / nav & gt;
    & lt; / div & gt;
    & lt;! - Phần tử Lớp phủ Tối - & gt;
    & lt; div class = "overlay" & gt; & lt; / div & gt;
& lt; / div & gt;  

CSS

Thanh bên sẽ có vị trí cố định ở phần bên trái của màn hình và nội dung sẽ chiếm toàn màn hình mọi lúc .

Theo mặc định , thanh bên sẽ bị ẩn .

Khi nút chuyển đổi được nhấp , cả .overlay thanh bên sẽ xuất hiện phía trên nội dung .

Hãy tưởng tượng nó như các lớp.

Nội dung trang sẽ là lớp sau , .overlay sẽ là lớp giữa với màu đen trong suốt.

Lớp phủ sẽ bao phủ nội dung của trang để mắt người dùng dễ dàng tập trung vào chính thanh bên.

Cuối cùng, thanh bên sẽ là lớp trước .

Để đạt được hành vi phân lớp này, chúng tôi chỉ cần sử dụng thuộc tính z-index .

Như đã đề cập trước đây, chúng tôi cũng sẽ thêm nút #dismiss vào thanh bên.

Nó sẽ được đặt hoàn toàn ở vị trí trên cùng bên phải của nó.

 . wrapper {
    hiển thị: khối;
}

# thanh bên {
    chiều rộng tối thiểu: 250px;
    chiều rộng tối đa: 250px;
    chiều cao: 100vh;
    vị trí: cố định;
    đầu: 0;
    trái: 0;
    / * lớp trên cùng * /
    z-index: 9999;
}

. overlay {
    không trưng bày;
    vị trí: cố định;
    /* toàn màn hình */
    chiều rộng: 100vw;
    chiều cao: 100vh;
    / * màu đen trong suốt * /
    nền: rgba (0, 0, 0, 0,7);
    / * lớp giữa, tức là xuất hiện bên dưới thanh bên * /
    chỉ số z: 998;
    độ mờ: 0;
    / * tạo hiệu ứng chuyển đổi * /
    chuyển tiếp: dễ dàng trong 0,5 giây;
}
/ * hiển thị. overlay khi nó có lớp .active * /
.overlay.active {
    hiển thị: khối;
    độ mờ: 1;
}

#bỏ qua {
    chiều rộng: 35px;
    chiều cao: 35px;
    vị trí: tuyệt đối;
    / * góc trên cùng bên phải của thanh bên * /
    đầu trang: 10px;
    phải: 10px;
}  

JavaScript

Trong hai thanh bên trước, chức năng của nút bật tắt là để mở / đóng thanh bên.

Ở đây, chúng tôi đã chèn một nút đóng vào thanh bên của mình, vì vậy, chức năng nút bật tắt chỉ để mở thanh bên.

Để làm rõ cơ chế, bằng cách nhấp vào nút chuyển đổi, cả lớp phủ và thanh bên đều xuất hiện và bằng cách nhấp vào nút đóng thanh bên, cả lớp phủ và thanh bên đều biến mất.

 & lt; script type = "text / javascript" & gt;
    $ (tài liệu) .ready (function () {
        $ ("# sidebar"). mCustomScrollbar ({
            chủ đề: "tối thiểu"
        });

        $ ('# remove, .overlay'). on ('click', function () {
            // ẩn thanh bên
            $ ('# sidebar'). removeClass ('hoạt động');
            // ẩn lớp phủ
            $ ('. overlay'). removeClass ('active');
        });

        $ ('# sidebarCollapse'). on ('click', function () {
            // mở thanh bên
            $ ('# sidebar'). addClass ('hoạt động');
            // mờ dần trong lớp phủ
            $ ('. overlay'). addClass ('hoạt động');
            $ ('. sập.in'). toggleClass ('trong');
            $ ('a [aria-expand = true]'). attr ('aria-expand', 'false');
        });
    });
& lt; / script & gt;  

Đây là nó.

Đã đến lúc kiểm tra bản trình diễn.

Xem bản trình diễn

4. Thu gọn một phần thanh bên Bootstrap tĩnh

Trong ví dụ này, chúng tôi sẽ thay vì tạo một thanh bên có thể thu gọn hoàn toàn, hãy tạo một Thanh điều hướng bên thu gọn một phần . Menu bên sẽ tự chuyển đổi thành phiên bản nén sau khi nhấp vào nút bật tắt.

Hãy sử dụng đánh dấu của các ví dụ đầu tiên làm điểm khởi đầu.

HTML

Để nâng cao hơn nữa, chúng tôi sẽ chèn một biểu tượng vào mỗi liên kết điều hướng.

Chúng tôi sẽ sử dụng Font Awesome cho các biểu tượng trong menu bên.

  & lt; div class = "wrapper" & gt;
    & lt;! - Thanh bên - & gt;
    & lt; nav id = "thanh bên" & gt;
        & lt; div class = "sidebar-header" & gt;
            & lt; h3 & gt; Thanh bên Bootstrap & lt; / h3 & gt;
            & lt; mạnh & gt; BS & lt; / strong & gt;
        & lt; / div & gt;

        & lt; ul class = "list-unstyled components" & gt;
            & lt; li class = "hoạt động" & gt;
                & lt; a href = "# homeSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt;
                    & lt; i class = "fas fa-home" & gt; & lt; / i & gt;
                    Nhà
                & lt; / a & gt;
                & lt; ul class = "sập danh sách-unstyled" id = "homeSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang chủ 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
            & lt; li & gt;
                & lt; a href = "#" & gt;
                    & lt; i class = "fas fa-cặp táp" & gt; & lt; / i & gt;
                    Về
                & lt; / a & gt;
                & lt; a href = "# pageSubmenu" data-toggle = "sập" aria-expand = "false" class = "dropdown-toggle" & gt;
                    & lt; i class = "fas fa-copy" & gt; & lt; / i & gt;
                    Các trang
                & lt; / a & gt;
                & lt; ul class = "thu gọn danh sách-unstyled" id = "pageSubmenu" & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 1 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 2 & lt; / a & gt;
                    & lt; / li & gt;
                    & lt; li & gt;
                        & lt; a href = "#" & gt; Trang 3 & lt; / a & gt;
                    & lt; / li & gt;
                & lt; / ul & gt;
            & lt; / li & gt;
        & lt; / ul & gt;

    & lt; / nav & gt;

    & lt;! - Nội dung Trang - & gt;
    & lt; div id = "content" & gt;

        & lt; nav class = "navbar navbar-expand-lg navbar-light bg-light" & gt;
            & lt; div class = "container-chất lỏng" & gt;

                & lt; button type = "button" id = "sidebarCollapse" class = "btn btn-info" & gt;
                    & lt; i class = "fas fa-align-left" & gt; & lt; / i & gt;
                    & lt; span & gt; Chuyển đổi Thanh bên & lt; / span & gt;
                & lt; / nút & gt;
            & lt; / div & gt;
        & lt; / nav & gt;
    & lt; / div & gt;
& lt; / div & gt;  

CSS

Thay vì đẩy hoàn toàn thanh bên ra khỏi màn hình , chúng tôi sẽ chỉ thu nhỏ chiều rộng của nó định dạng lại nội dung của nó để vừa với chiều rộng mới này .

Kiểu của phiên bản nén sẽ được thêm vào lớp .active .

Ví dụ: chúng tôi sẽ giảm kích thước phông chữ của văn bản neo, căn chỉnh nó vào giữa và làm cho nó hiển thị bên dưới biểu tượng.

Ngoài ra, chúng tôi sẽ di chuyển mũi tên đến cuối mỗi mỏ neo hoặc điều chỉnh phần đệm xung quanh các liên kết thả xuống.

Mã sẽ như sau:

 / * Thu nhỏ thanh bên từ 250px xuống 80px và căn giữa nội dung của nó * /
# sidebar.active {
    chiều rộng tối thiểu: 80px;
    chiều rộng tối đa: 80px;
    text-align: center;
}

/ * Chuyển đổi nội dung tiêu đề thanh bên, ẩn tiêu đề lớn [h3] và hiển thị tiêu đề nhỏ [strong] và ngược lại * /
#sidebar .sidebar-header strong {
    không trưng bày;
}
# sidebar.active .sidebar-header h3 {
    không trưng bày;
}
# sidebar.active .sidebar-header mạnh mẽ {
    hiển thị: khối;
}

#sidebar ul li a {
    text-align: left;
}

# sidebar.active ul li a {
    đệm: 20px 10px;
    text-align: center;
    cỡ chữ: 0,85em;
}

# sidebar.active ul li a i {
    margin-right: 0;
    hiển thị: khối;
    cỡ chữ: 1.8em;
    margin-bottom: 5px;
}

/ * Các liên kết thả xuống giống nhau padding * /
# sidebar.active ul ul a {
    padding: 10px! important;
}

/ * Thay đổi vị trí mũi tên thành vị trí dưới cùng chính giữa,
   translateX (50%) hoạt động với bên phải: 50%
   để căn giữa chính xác mũi tên * /
# sidebar.active .dropdown-toggle :: after {
    đầu trang: tự động;
    dưới cùng: 10px;
    đúng: 50%;
    -webkit-biến đổi: translateX (50%);
    -ms-biến đổi: translateX (50%);
    biến đổi: translateX (50%);
}
 

Truy vấn phương tiện

Trên các màn hình nhỏ hơn, chúng tôi sẽ giữ phiên bản nén làm trạng thái hoạt động mặc định của thanh bên. Tức là phiên bản không nén sẽ hoàn toàn không được sử dụng trên điện thoại di động và phiên bản nén sẽ hiển thị sau khi nhấp vào nút chuyển đổi.

Để đạt được điều này, chúng tôi chỉ có thể sao chép các kiểu từ .active vào truy vấn phương tiện di động của chúng tôi @media (max-width: 768px) và thêm margin-left chức năng cho nó.

Đối với điện thoại di động, thanh bên # sidebar.active sẽ có lề trái âm (nó sẽ nằm ngoài canvas) và #sidebar không có .active Lớp sẽ có margin-left được đặt thành 0.

  @ media (max-width: 768px) {
    / * 80px và nội dung của nó được căn chỉnh cho chính giữa. Đẩy nó ra khỏi màn hình bằng
       lề trái âm
    * /
    # sidebar.active {
        chiều rộng tối thiểu: 80px;
        chiều rộng tối đa: 80px;
        text-align: center;
        margin-left: -80px! important;
    }


    / * Xuất hiện lại thanh bên khi nhấp vào nút bật tắt * /
    # thanh bên {
        lề trái: 0;
    }


    / * Chuyển đổi nội dung tiêu đề thanh bên,
       ẩn tiêu đề lớn [h3] và hiển thị tiêu đề nhỏ [mạnh] và ngược lại
    * /
    #sidebar .sidebar-header strong {
        không trưng bày;
    }
    # sidebar.active .sidebar-header h3 {
        không trưng bày;
    }
    # sidebar.active .sidebar-header mạnh mẽ {
        hiển thị: khối;
    }

    / * Giảm kích thước phông chữ của các liên kết điều hướng * /
    # sidebar.active ul li a {
        đệm: 20px 10px;
        cỡ chữ: 0,85em;
    }

    # sidebar.active ul li a i {
        margin-right: 0;
        hiển thị: khối;
        cỡ chữ: 1.8em;
        margin-bottom: 5px;
    }

    / * Điều chỉnh đệm liên kết thả xuống * /
    # sidebar.active ul ul a {
        padding: 10px! important;
    }

    / * Thay đổi vị trí mũi tên thành vị trí dưới cùng chính giữa,
      translateX (50%) hoạt động với bên phải: 50%
      để căn giữa chính xác mũi tên * /
    .dropdown-toggle :: sau {
        đầu trang: tự động;
        dưới cùng: 10px;
        đúng: 50%;
        -webkit-biến đổi: translateX (50%);
        -ms-biến đổi: translateX (50%);
        biến đổi: translateX (50%);
    }
}  

JavaScript

Chúng tôi sẽ không bao gồm bất kỳ dòng JavaScript bổ sung nào và chúng tôi sẽ chỉ sử dụng cùng một chức năng đã được sử dụng trong thanh bên đầu tiên.

  $ (document) .ready (function () {

    $ ('# sidebarCollapse'). on ('click', function () {
        $ ('# sidebar'). toggleClass ('hoạt động');
    });

});  

Đó sẽ là tất cả bây giờ. Chúng ta sẽ có một thanh bên thu gọn một phần hoạt động tốt.

Hãy xem kết quả.

Xem bản trình diễn

Cải tiến thêm

Luôn có chỗ cho những cải tiến và chỉnh sửa hơn nữa.

Phần thưởng, tôi muốn hướng dẫn bạn cách chuẩn bị biểu tượng menu bánh hamburger hoạt hình cho nút bật tắt và cũng như cách thêm hoạt ảnh bắt mắt để mở và đóng thanh bên bảng điều khiển.

HTML

Một lần nữa, Tôi sẽ sử dụng thanh bên đơn giản từ ví dụ đầu tiên làm cơ sở .

Nhưng thay vì sử dụng Glyphicon cho nút bật tắt, hãy đặt ba span s ở đó thay vào đó. Mỗi cái sẽ đại diện cho một thanh của menu hamburger và chúng tôi sẽ tạo kiểu cho chúng bằng CSS sau này.

< / p>

  & lt; div class = "wrapper" & gt;

        & lt; nav id = "thanh bên" & gt;
            & lt;! - Tiêu đề Thanh bên - & gt;
            & lt; div class = "sidebar-header" & gt;
                & lt; h3 & gt; Thanh bên có thể thu gọn & lt; / div & gt;
            & lt; / div & gt;

            & lt;! - Liên kết Thanh bên - & gt;
            & lt; ul class = "list-unstyled components" & gt;
                & lt; li class = "active" & gt; & lt; a href = "#" & gt; Trang chủ & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt; a href = "#" & gt; Giới thiệu & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt;! - Liên kết với các mục thả xuống - & gt;
                    & lt; a href = "# homeSubmenu" data-toggle = "sập" aria-expand = "false" & gt; Trang & lt; / a & gt;
                    & lt; ul class = "sập danh sách-unstyled" id = "homeSubmenu" & gt;
                        & lt; li & gt; & lt; a href = "#" & gt; Trang & lt; / a & gt; & lt; / li & gt;
                        & lt; li & gt; & lt; a href = "#" & gt; Trang & lt; / a & gt; & lt; / li & gt;
                        & lt; li & gt; & lt; a href = "#" & gt; Trang & lt; / a & gt; & lt; / li & gt;
                    & lt; / ul & gt;
                & lt; li & gt; & lt; a href = "#" & gt; Danh mục đầu tư & lt; / a & gt; & lt; / li & gt;
                & lt; li & gt; & lt; a href = "#" & gt; Liên hệ & lt; / a & gt; & lt; / li & gt;
            & lt; / ul & gt;
        & lt; / nav & gt;

        & lt; div id = "content" & gt;
            & lt; button type = "button" id = "sidebarCollapse" class = "navbar-btn" & gt;
                & lt; span & gt; & lt; / span & gt;
                & lt; span & gt; & lt; / span & gt;
                & lt; span & gt; & lt; / span & gt;
            & lt; / nút & gt;
        & lt; div & gt;

& lt; / div & gt;  

CSS

Tạo hoạt ảnh cho nút chuyển đổi

Trước tiên, hãy thêm một số kiểu vào nút và các thanh của nó.

Sẽ có ba thanh nằm dưới nhau và chúng tôi sẽ tạo cho chúng một chuyển đổi lạ mắt với chuyển tiếp khối-bezier . Tôi thường sử dụng công cụ hoạt hình CSS này để tạo ra các chuyển đổi thú vị, bạn có thể chọn từ một số chuyển đổi trước khi tạo hoặc dễ dàng tạo chuyển đổi tùy chỉnh của bạn.

  # sidebarCollapse {
    chiều rộng: 40px;
    chiều cao: 40px;
    nền: # f5f5f5;
}

#sidebarCollapse span {
    chiều rộng: 80%;
    chiều cao: 2px;
    margin: 0 auto;
    hiển thị: khối;
    nền: # 555;
    chuyển tiếp: tất cả 0,8s khối-bezier (0,810, -0,330, 0,345, 1,375);
}  

Khi thanh bên được mở , nút chuyển đổi các thanh sẽ bị gạch chéo . Khi nó nằm ngoài canvas , các thanh sẽ song song với nhau.

Theo mặc định, thanh bên sẽ mở, vì vậy trạng thái ban đầu của các thanh phải được gạch chéo. Chúng tôi sẽ sử dụng thuộc tính convert để đạt được điều đó.

Thanh đầu tiên sẽ được xoay 45 độ , thanh cuối cùng sẽ được xoay 45 độ theo hướng ngược lại. Thanh thứ hai sẽ bị ẩn tại thời điểm này.

  # sidebarCollapse span: first-of-type {
    / * xoay cái đầu tiên * /
    biến đổi: xoay (45deg) dịch (2px, 2px);
}
#sidebarCollapse span: nth-of-type (2) {
    / * cái thứ hai không hiển thị * /
    độ mờ: 0;
}
#sidebarCollapse span: last-of-type {
    / * xoay cái thứ ba * /
    biến đổi: xoay (-45deg) dịch (1px, -1px);
}  

Bằng cách nhấp vào nút, các thanh sẽ chuyển thành trạng thái song song. Để đạt được điều đó, chúng tôi sẽ sử dụng jQuery để chuyển đổi .active class trên nút. Lớp này đặt lại vòng quay của các thanh và hiển thị tất cả chúng.

  # sidebarCollapse.active span {
    / * không quay * /
    biến đổi: không có;
    / * tất cả các thanh đều hiển thị * /
    độ mờ: 1;
    margin: tự động 5px;
}  

Tạo hoạt ảnh cho thanh bên

Bây giờ, hãy thêm hoạt ảnh 3D CSS vào thanh bên .

Chúng tôi sẽ tạo hoạt ảnh mở cửa khi người dùng đóng hoặc mở thanh bên .

Trước hết, chúng ta nên thêm phối cảnh thuộc tính vào vùng chứa.

Vùng chứa của chúng tôi, trong trường hợp này, là .wrapper . Thuộc tính perspective xác định số lượng pixel mà một phần tử 3D được đặt từ chế độ xem và cho phép bạn thay đổi góc nhìn về cách các phần tử 3D được xem.

Sau đó, chúng tôi sẽ xoay thanh bên theo chiều dọc 100 độ trong khi thu gọn bằng thuộc tính biến đổi .

Thuộc tính convert-origin cho phép bạn thay đổi vị trí của các phần tử được chuyển đổi. Tại đây, chúng tôi sẽ xoay thanh bên từ phía giữa bên trái.

 . wrapper {
    hiển thị: flex;
    align-items: kéo dài;
    phối cảnh: 1500px;
}

# thanh bên {
    chiều rộng tối thiểu: 250px;
    chiều rộng tối đa: 250px;
    nền: # 7386D5;
    màu: #fff;
    chuyển tiếp: tất cả 0,6s khối-bezier (0,945, 0,020, 0,270, 0,665);
    biến đổi-origin: trung tâm bên trái; / * Đặt vị trí đã chuyển đổi của thanh bên sang giữa bên trái. * /
}

# sidebar.active {
    margin-left: -250px;
    biến đổi: xoayY (100deg); / * Xoay thanh bên theo chiều dọc 100 độ. * /
}  

Truy vấn phương tiện

Trên màn hình nhỏ hơn , thanh bên sẽ được thu gọn theo mặc định.

Trạng thái mặc định của menu hamburger sẽ được trả về trạng thái song song. Để đạt được điều này, chúng ta nên chuyển các quy tắc CSS từ chế độ xem chuẩn.

  @ media (max-width: 768px) {
    / * Đảo ngược hoạt động của thanh bên:
       nó sẽ được xoay theo chiều dọc và ngoài canvas theo mặc định,
       thu gọn vào khi nhấp vào nút bật tắt với việc loại bỏ
       sự quay dọc. * /
    # thanh bên {
        margin-left: -250px;
        biến đổi: xoayY (100deg);
    }
    # sidebar.active {
        lề trái: 0;
        biến đổi: không có;
    }

    / * Đảo ngược hoạt động của các thanh:
       Loại bỏ vòng quay từ lần đầu tiên,
       thanh cuối cùng và xuất hiện lại thanh thứ hai ở trạng thái mặc định,
       và tạo cho chúng một lề dọc * /
    #sidebarCollapse span: first-of-type,
    #sidebar
    #sidebarCollapse span: last-of-type {
        biến đổi: không có;
        độ mờ: 1;
        margin: tự động 5px;
    }

    / * Loại bỏ lề dọc và làm cho thanh đầu tiên và thanh cuối cùng xoay lại khi thanh bên đang mở, ẩn thanh thứ hai * /
    # sidebarCollapse.active span {
        margin: 0 auto;
    }
    # sidebarCollapse.active span: first-of-type {
        biến đổi: xoay (45deg) dịch (2px, 2px);
    }
    # sidebarCollapse.active span: nth-of-type (2) {
        độ mờ: 0;
    }
    # sidebarCollapse.active span: last-of-type {
        biến đổi: xoay (-45deg) dịch (1px, -1px);
    }
}  

JavaScript

Chúng tôi sẽ sử dụng jQuery để chuyển đổi the .active class để chuyển đổi giữa các trạng thái chéo và song song .

  $ (document) .ready (function () {
    $ ('# sidebarCollapse'). on ('click', function () {
        $ ('# sidebar'). toggleClass ('hoạt động');
        $ (this) .toggleClass ('hoạt động');
    });
});  

Hãy xem kết quả.

Xem bản trình diễn

Kết luận

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu cách thêm thanh bên Bootstrap vào dự án của mình. Nếu bạn thích bài viết - hãy cho bạn bè của bạn biết về nó.

Nếu bạn thích hướng dẫn Bootstrapious này, hãy xem hướng dẫn của tôi về Cách tạo biểu mẫu liên hệ hoặc Bootstrap navbar .

Cảm ơn bạn đã đọc 🙂

< / p>


Xem thêm những thông tin liên quan đến chủ đề cố định thanh bên trái bootstrap

Bootstrap 5 Navbar Tutorial

alt

  • Tác giả: A Designer Who Codes
  • Ngày đăng: 2021-02-27
  • Đánh giá: 4 ⭐ ( 1777 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Here's how to setup your navigation with Bootstrap 5 using the navbar class. I'll walk you through how to set it up along with ensuring the navigation is ADA accessible per the W3C.

    ** Be sure to stick around until the end to see how ADA accessibility works and how to check your site with Chrome's inspect. **

    Download the source code:
    https://adesignerwhocodes.ck.page/cd61e59ce5

    More Bootstap 5 Goodness:
    https://youtube.com/playlist?list=PL8arivBPQWw0i4I0ktXulVlsTHaolOtGD

    In this video I'll cover how to:
    - Build a basic nav bar
    - Move the navigation to the right
    - & Add a logo

    Thanks!
    Haydn

    // COURSES THAT WILL HELP YOU BUILD BETTER WEBSITES
    ○ Bootstrap Bootcamp (for Bootstrap 5): https://adesignerwhocodes.gumroad.com/l/DjOao
    ○ Gatsby Demystified: https://bit.ly/3xf2yyQ

    // Premium Gatsby Starter Template
    ○ Ultimate Gatsby Starter: https://adesignerwhocodes.gumroad.com/l/CQcrp

    // Helpful YouTube Playlists:
    http://bit.ly/3rrHj9D Bootstrap for Web Designers & Developers
    http://bit.ly/36HEYPZ React Bootstrap & Gatsby
    http://bit.ly/3twVn3C Gatsby for Web Designers

    🛠 THE TOOLS & SERVICES I USE:
    ○ Where I buy my domain names (GoDaddy) - https://bit.ly/3v2GV2N
    ○ Email provider, lead generation and more! (ConvertKit) - https://bit.ly/3xbqwup
    ○ Graphic Design Tools, stock images and more (Canva Pro) - http://bit.ly/canva-pro-adwc
    ○ Website Hosting (Netlify) - https://www.netlify.com

    ► Join ADWC Nation on Discord
    https://discord.gg/aeZnfk9Hg2

    DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

    Hi there! Haydn Adams, BFA. I'm all about helping web developers and web designers build better websites, through code. Yes, coding and be difficult at first. But I'm here to demystify that. To make coding easy so that you can ultimately build a better website.

    Got a question for me?
    https://adesignerwhocodes.com/contact/

Hướng dẫn tạo thanh menu cố định (Sticky menu) khi cuộn trang

  • Tác giả: www.tranbadat.com
  • Đánh giá: 3 ⭐ ( 7189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Làm cách nào để tạo menu thanh bên trái cố định bằng bootstrap 3?

  • Tác giả: vie.fitforlearning.org
  • Đánh giá: 4 ⭐ ( 5250 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi muốn tạo một menu thanh dính bên trái với bootstrap 3 như: http://getbootstrap.com/getting-started/ Tôi đã đọc tài liệu đã cho http://getbootstrap.com/javascript/#affix mà tôi đã thử. tình ...

Cách tạo thanh điều hướng trong Bootstrap

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 2513 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tao thanh dieu huong trong bootstrap, Cách tạo thanh điều hướng trong Bootstrap

Top 10 Bootstrap Sidebar đẹp và miễn phí nhất năm 2022

  • Tác giả: socialmediablogster.com
  • Đánh giá: 5 ⭐ ( 9870 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 2: Tìm hiểu về Container trong Bootstrap 5

  • Tác giả: quantrimang.com
  • Đánh giá: 4 ⭐ ( 5711 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Container là một phần không thể thiếu trong Bootstrap. Container được sử dụng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng với bố cục của bạn. Container chứa phần tử row và row là container của column (còn được gọi là hệ thống lưới).

Sử dụng Container trong Bootstrap

  • Tác giả: levunguyen.com
  • Đánh giá: 3 ⭐ ( 5137 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong lập trình web Bootstrap, để thiết lập độ dài cố định cho nội dung các phần tử trong website, các lập trình viên sẽ dùng thuộc tính Container. Bài viết này sẽ giúp các bạn hiểu được 2 loại thuộc tính Container trong Bootstrap gồm container và container-fluid là gì? Và hướng dẫn cách để các bạn sử dụng được Container trong lập trình web thông qua các hình ảnh ví dụ minh hoạ kèm theo như thiết lập độ dài cố định, độ dài tràn màn hình, cấu hình padding, border, color, responsive cho container.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Result and Error Codes - error 522