Menu hamburger trong HTML là gì?

Question

        
            

                        
                        
                          
                            
                              
                                
 Nội dung chính Show
 Thực đơn hamburger là gì?
3 dòng được gọi trên một trang web là gì?
một chiếc bánh hamburger trong mã hóa là gì?
Làm cách nào để sử dụng menu hamburger trong JavaScript?
 
                              
                            
                          
                          
                            

                              Link 1
                              Link 2
                              Link 3
                            
                          











Link 1
Link 2
Link 3












Link 1
Link 2
Link 3

        
            
                        /* Icon 1 */

                        .animated-icon1,
                        .animated-icon2,
                        .animated-icon3 {
                        width: 30px;
                        height: 20px;
                        position: relative;
                        margin: 0px;
                        -webkit-transform: rotate(0deg);
                        -moz-transform: rotate(0deg);
                        -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                        -webkit-transition: .5s ease-in-out;
                        -moz-transition: .5s ease-in-out;
                        -o-transition: .5s ease-in-out;
                        transition: .5s ease-in-out;
                        cursor: pointer;
                        }

                        .animated-icon1 span,
                        .animated-icon2 span,
                        .animated-icon3 span {
                        display: block;
                        position: absolute;
                        height: 3px;
                        width: 100%;
                        border-radius: 9px;
                        opacity: 1;
                        left: 0;
                        -webkit-transform: rotate(0deg);
                        -moz-transform: rotate(0deg);
                        -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                        -webkit-transition: .25s ease-in-out;
                        -moz-transition: .25s ease-in-out;
                        -o-transition: .25s ease-in-out;
                        transition: .25s ease-in-out;
                        }

                        .animated-icon1 span {
                        background: #2d7ef7;
                        }

                        .animated-icon2 span {
                        background: #e3f2fd;
                        }

                        .animated-icon3 span {
                        background: #f3e5f5;
                        }

                        .animated-icon1 span:nth-child(1) {
                        top: 0px;
                        }

                        .animated-icon1 span:nth-child(2) {
                        top: 10px;
                        }

                        .animated-icon1 span:nth-child(3) {
                        top: 20px;
                        }

                        .animated-icon1.open span:nth-child(1) {
                        top: 11px;
                        -webkit-transform: rotate(135deg);
                        -moz-transform: rotate(135deg);
                        -o-transform: rotate(135deg);
                        transform: rotate(135deg);
                        }

                        .animated-icon1.open span:nth-child(2) {
                        opacity: 0;
                        left: -60px;
                        }

                        .animated-icon1.open span:nth-child(3) {
                        top: 11px;
                        -webkit-transform: rotate(-135deg);
                        -moz-transform: rotate(-135deg);
                        -o-transform: rotate(-135deg);
                        transform: rotate(-135deg);
                        }

                        /* Icon 3*/

                        .animated-icon2 span:nth-child(1) {
                        top: 0px;
                        }

                        .animated-icon2 span:nth-child(2),
                        .animated-icon2 span:nth-child(3) {
                        top: 10px;
                        }

                        .animated-icon2 span:nth-child(4) {
                        top: 20px;
                        }

                        .animated-icon2.open span:nth-child(1) {
                        top: 11px;
                        width: 0%;
                        left: 50%;
                        }

                        .animated-icon2.open span:nth-child(2) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        }

                        .animated-icon2.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        }

                        .animated-icon2.open span:nth-child(4) {
                        top: 11px;
                        width: 0%;
                        left: 50%;
                        }

                        /* Icon 4 */

                        .animated-icon3 span:nth-child(1) {
                        top: 0px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3 span:nth-child(2) {
                        top: 10px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3 span:nth-child(3) {
                        top: 20px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3.open span:nth-child(1) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        top: 0px;
                        left: 8px;
                        }

                        .animated-icon3.open span:nth-child(2) {
                        width: 0%;
                        opacity: 0;
                        }

                        .animated-icon3.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        top: 21px;
                        left: 8px;
                        }

        
            
                        document.querySelector('.first-button').addEventListener('click', function () {

                        document.querySelector('.animated-icon1').classList.toggle('open');
                        });
                        document.querySelector('.second-button').addEventListener('click', function () {

                        document.querySelector('.animated-icon2').classList.toggle('open');
                        });
                        document.querySelector('.third-button').addEventListener('click', function () {

                        document.querySelector('.animated-icon3').classList.toggle('open');
                        });

Thực đơn hamburger là gì?

Menu hamburger là một biểu tượng được sử dụng trên trang web và trong các ứng dụng mà khi được nhấp hoặc chạm vào, sẽ mở menu bên hoặc ngăn điều hướng . Nó được gọi là “thực đơn hamburger” vì nó có dạng bánh sandwich nổi tiếng.

3 dòng được gọi trên một trang web là gì?

Liệu sự lựa chọn thiết kế này thực sự có ý nghĩa? . Ba dòng xếp chồng lên nhau, thường ở góc trên cùng bên trái hoặc bên phải của trang web, mọi người có thể nhấp vào các dòng này để xem menu các trang trên trang web

một chiếc bánh hamburger trong mã hóa là gì?

Biểu tượng bánh hamburger, trong thiết kế giao diện người dùng (UI), là biểu tượng điều hướng bao gồm ba đường ngang xếp chồng lên nhau cho biết vị trí của menu ẩn. The icon got its name from the fact that its structure resembles a burger in a bun in a simplified graphic.

Nó hoạt động như thế nào trong JavaScript? . truy vấnSelector(). Nó tạo một thanh điều hướng bằng cách chọn một lớp div từ mã HTML, đồng thời, nó cũng làm cho thanh điều hướng chuyển đổi bằng cách chọn thêm một lớp div từ mã HTML. based on querySelector(), addEventListener() and toggle() functions. querySelector(): It creates a navigation bar by selecting a div class from HTML code and, also it makes the navigation bar to toggle by selecting one more div class from HTML code.

programming html

Menu hamburger trong HTML là gì?

Thực đơn hamburger là gì?

3 dòng được gọi trên một trang web là gì?

một chiếc bánh hamburger trong mã hóa là gì?

Làm cách nào để sử dụng menu hamburger trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội