Thực đơn
trang chủMạng xã hội

Menu thích ứng sử dụng CSS. Menu thích ứng cho trang đích

Không phải tất cả các dự án đều yêu cầu các hiệu ứng không cần thiết, điều này có thể tải trang đáng kể, đặc biệt là khi có bố cục thích ứng, nơi người dùng có thể xem trang web trên điện thoại thông minh hoặc máy tính bảng. Hầu hết các hiệu ứng này được tạo bằng JavaScript, vì vậy, để làm ví dụ, tôi quyết định chỉ ra cách bạn có thể tạo một trong những thành phần quan trọng nhất của trang web, cụ thể là menu điều hướng, thực tế mà không cần dùng đến JS mà chủ yếu chỉ sử dụng CSS. Hoàn toàn không thể từ chối sử dụng JS vì lý do trên thiết bị di động và máy tính hoặc máy tính xách tay thông thường, nhiều sự kiện khác nhau và nếu trên máy tính có CSS, chúng ta có thể sử dụng thuộc tính một cách an toàn :bay lượn, thì nó sẽ không hoạt động trên máy tính bảng theo cách chúng ta mong muốn. Người thiếu kiên nhẫn nhất có thể ngay lập tức ( trong ví dụ, thay đổi độ rộng của cửa sổ trình duyệt).

Vì vậy, chúng tôi đặt ra nhiệm vụ sau: tạo một menu có chiều rộng linh hoạt, chuyển sang phiên bản di động, trong đó menu sẽ là menu thả xuống khi di chuột hoặc nhấn nút. Cấu trúc HTML là điển hình cho các thành phần như vậy, ngoại trừ việc chúng tôi thêm một thành phần nữa - nút để mở rộng/ẩn menu trong phiên bản di động:

≡

CSS không hoàn toàn chuẩn. Chúng ta sẽ làm cho menu của mình hoạt động như thể chúng ta đang sử dụng một cái bàn. Tôi muốn nhấn mạnh ngay rằng không phải tất cả các trình duyệt đều hỗ trợ các thuộc tính mà chúng tôi sẽ sử dụng. Sự cố có thể xảy ra với các phiên bản IE thấp hơn phiên bản 8 ( mặc dù đã đến lúc ngừng tập trung vào chúng) và có một số khó khăn nhỏ với IE8, nhưng tôi sẽ viết bên dưới cách giải quyết chúng.

* ( lề: 0; phần đệm: 0; ) tiêu đề ( màu nền: #C0C0C0; ) #menu ( hiển thị: bảng; /* mô tả bên dưới */ width: 100%; border-collapse: thu gọn; -webkit-box- định cỡ: hộp viền; /* mô tả bên dưới */ -moz-box-sizing: hộp viền; /* mô tả bên dưới */ kích thước hộp: hộp viền; /* mô tả bên dưới */ ) #menu ul ( display: hàng bảng; /* mô tả bên dưới */ màu nền: #FFFFFF; list-style: none; ) #menu ul li ( display: table-cell; /* mô tả bên dưới */ border: 1px Solid #999999; ) # menu ul li a ( display: inline-block; width: 100%; Height: 50px; line-height: 50px; font-size: 1.2em; text-align: center; ) #menu ul li a:hover ( nền- màu: #990000; màu: #FFFFFF; ) #nav_button ( display: none; chiều rộng: 50px; chiều cao: 50px; cỡ chữ: 2,5em; căn chỉnh văn bản: giữa; màu nền: #FFFFFF; đường viền: 1px #949494; con trỏ: con trỏ; ) @media screen và (độ rộng tối đa: 600px) ( /* mô tả bên dưới */ #menu ( display: inline-block; vị trí: tương đối; chiều rộng: tự động; ) #menu ul ( display: không có; vị trí: tuyệt đối; trên cùng: 0; chiều rộng: 100%; chỉ số z: 20; ) #menu ul li ( display: list-item; border-top: none; ) #nav_button ( display: inline-block; ) #menu:hover, #menu.open_nav ( width: 100%; -webkit-user-select : không có; /* mô tả bên dưới */ -moz-user-select: none; /* mô tả bên dưới */ -webkit-touch-callout: none; /* mô tả bên dưới */ ) #menu:hover ul, #menu.open_nav ul (hiển thị: khối; lề trên: 50px; ) )

Một số phong cách không cần phải chú ý đến; màu nền, cỡ chữ, v.v. - đây chỉ là mục đích trình diễn. Và chúng ta nên quan tâm đến các thuộc tính sau với giá trị của chúng:

Hiển thị: bảng; Cho biết phần tử sẽ hoạt động tương tự như phần tử

hiển thị: hàng bảng; Phần tử sẽ hoạt động như thế nào hiển thị: ô bảng; Phần tử sẽ hoạt động như thế nào
hoặc box-sizing: border-box; (và với tiền tố của nhà cung cấp) Khi tính chiều rộng và chiều cao của một phần tử, thuộc tính chiều rộng và chiều cao sẽ bao gồm các giá trị lề ( phần đệm) và ranh giới ( ranh giới). Điều này là cần thiết để tránh hiện tượng cuộn ngang, bởi vì không có thuộc tính này, với chiều rộng menu là 100%, độ dày của đường viền cũng sẽ được thêm vào và nếu có thì phần đệm cũng sẽ được thêm vào. -webkit-user-select: không có; và -moz-user-select: không có; Ngăn chặn việc chọn một phần tử hoặc văn bản. Cần thiết cho phiên bản di động để tránh sự thiếu nhất quán khi người dùng vuốt qua các mục menu thay vì nhấp vào. -webkit-touch-callout: không có; Vô hiệu hóa chú giải công cụ bật lên khi bạn chạm và giữ một phần tử. Chỉ hoạt động trong Chrome và Safari. Giống như thuộc tính trước, nó được sử dụng để hủy các hành động không mong muốn khi làm việc với một phần tử. @media (truy vấn phương tiện) Chủ đề này khá rộng, nhưng tóm lại, nó cho trình duyệt biết những thuộc tính nào cần sử dụng cho một số loại phương tiện hoặc thông số kỹ thuật của thiết bị. Trong trường hợp của chúng tôi, hãy sử dụng nó cho màn hình (màn hình giám sát) và max-width: 600px (nếu chiều rộng cửa sổ trình duyệt nhỏ hơn 600px).

Điều thú vị nhất là chúng ta có thể chấm dứt điều này nếu chúng ta không tính đến điện thoại thông minh, máy tính bảng và tự tin nói rằng menu được làm hoàn toàn bằng HTML và CSS. Nhưng bạn sẽ phải nhờ đến sự trợ giúp của JS/jQuery và trong trường hợp này, vì người ta đã quyết định thực hiện điều đó với JavaScript thuần túy, tải ít nhất.

Var d = document, navBut = d.getElementById("nav_button"), // nút bật menu navMenu = d.getElementById("menu"); // menu thả xuống // hàm xác định sự hiện diện của phần tử cha bằng ID function hasParent(el, sId)( while(el) ( if (el.id == sId) return true; el = el.parentNode; ) return false; ) / / bằng cách chạm vào nút, thêm một lớp menu, // tương ứng với thuộc tính trong css "#menu:hover" // và mở rộng menu navBut.addEventListener("touchstart", function(e) ( e.preventDefault(); navMenu.classList .add("open_nav" ), false); // khi chạm vào tài liệu, // nếu sự kiện không có trên bất kỳ thành phần menu nào (được xác định bằng hàm "hasParent"), // xóa lớp "open_nav" khỏi menu, dẫn đến việc nó đóng d.addEventListener( "touchstart ", function(e) ( if(!hasParent(e.target, "menu")) navMenu.classList.remove("open_nav"); ), false);

Chúng tôi viết mã này trong một tệp js riêng biệt và đặt nó ở cuối trang, trước thẻ đóng. Bây giờ là một vài lời về khả năng tương thích giữa nhiều trình duyệt... Nếu bạn đang tính trên Internet Explorer dưới phiên bản thứ chín, thì để hoạt động chính xác, bạn cần kết nối hai tập lệnh sửa lỗi bên trong thẻ:

Cái đầu tiên cho phép các trình duyệt cũ hơn nhận biết đầy đủ các thẻ HTML5 và cái thứ hai cho phép “truy vấn phương tiện” mà chúng cũng không thân thiện. Mặt khác, mặc dù các trình duyệt như vậy không được sử dụng trên thiết bị di động và thẻ tương tự có thể được thay thế bằng . Do đó, việc có nên sử dụng những tập lệnh này hay không tất nhiên là quyết định cá nhân của bạn, nhưng tôi cho rằng chúng là dư thừa. Bây giờ menu đã sẵn sàng để sử dụng trên mọi thiết bị.

Rất thường xuyên, đặc biệt là những người mới bắt đầu, khi theo đuổi vẻ đẹp tưởng tượng của trang web, hãy lấp đầy nó bằng những đồ họa, kịch bản không cần thiết, khi thực hiện một số hành động nhỏ, đôi khi nặng hơn toàn bộ trang. Đừng đi quá xa và nghĩ về những người dùng có thể truy cập bạn không chỉ từ các thiết bị khác nhau mà còn thông qua kết nối Internet tốc độ thấp. Chúc may mắn! ;)

Xin chào các bạn, đồng nghiệp! Bạn dạo này thế nào? Tôi hy vọng mọi người đang làm tốt :) Hôm nay chúng tôi sẽ tạo một menu thích ứng đơn giản cho trang đích của mình. Mọi người hỏi về vấn đề này ngày càng thường xuyên hơn, và tôi viết ra những câu hỏi như vậy và cố gắng viết bài về những chủ đề này vào thời gian rảnh.

Cảm ơn bạn đã cho tôi những ý tưởng mới theo cách này và giúp phát triển blog. Nhân tiện, bạn muốn đọc bài viết tiếp theo về chủ đề gì? Hãy viết bình luận nhé, điều này rất quan trọng với tôi. Bây giờ, hãy bắt đầu...

Cách tạo menu đáp ứng cho trang web

Google đã xác nhận rằng bắt đầu từ giữa tháng 4, khả năng phản hồi của trang web dành cho thiết bị di động sẽ trở thành một trong những yếu tố xếp hạng. Về vấn đề này, tất cả tài liệu về cách làm cho trang đích của bạn thích ứng đều phù hợp hơn bao giờ hết. Hôm nay tôi sẽ không giải thích bất cứ điều gì phức tạp mà ngược lại, tôi sẽ mách bạn cách tạo một menu thích ứng rất đơn giản với thời gian tối thiểu.

Về cơ bản nó sẽ là html + css, nhưng bạn sẽ cần một đoạn script rất nhỏ để xử lý cú nhấp chuột. Vì thế…

Menu ngang đáp ứng

Hãy bắt đầu với html. Trước hết, hãy kết nối thư viện jquery. Có thể bạn đã sử dụng nó trong một thời gian dài, vì vậy hãy đảm bảo bạn không kết nối nó lần thứ hai:

Bây giờ là dấu hiệu. Một danh sách không có thứ tự thông thường và một div nhỏ chứa biểu tượng menu. Nó sẽ chỉ hiển thị ở độ phân giải thấp.

  • Giá tải về
  • Liên lạc
  • Đánh giá

    • Như bạn thấy, nó không phức tạp, tôi nghĩ bạn có thể tự cải thiện nó khi cần thiết.
    Bây giờ hãy thêm phong cách:

    #menu ( nền: #2ba9c0; chiều rộng: 100%; đệm: 10px 0; căn chỉnh văn bản: giữa; ) #menu a ( color: #fff; text-trang trí: none; đệm: 12px 12px; ) #menu a: di chuột ( border-bottom: 4px Solid #fff; nền: #078ecb; ) .itemsMenu li ( display:inline; đệm-phải: 35px; width:100%; lề: 0 auto; ) .itemsMenu li img( Vertical-align : middle; lề phải: 10px; .iconMenu ( color: #fff; con trỏ: con trỏ; display: none; ) .showitems ( display:block !important; ) @media screen và (max-width: 600px) ( # menu a( đệm-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; đệm:10px 0 ; ) )

    Bây giờ khi thu nhỏ cửa sổ trình duyệt bạn sẽ thấy hình ảnh sau:

    Tôi thực sự không muốn mô tả từng dòng vì blog không phải là về bố cục như vậy. Hãy để tôi cố gắng giải thích.

    Đầu tiên, chúng ta đặt thuộc tính display:inline cho các phần tử li để làm cho chúng xuất hiện cạnh nhau theo chiều ngang. Tôi có thể sử dụng float:left, nhưng tôi quyết định làm theo cách này. Và ẩn biểu tượng menu bằng thuộc tính display:none. Khi độ phân giải màn hình nhỏ hơn 600 pixel, hãy xóa nội tuyến khỏi các phần tử li, ẩn chúng và hiển thị biểu tượng. Tóm lại - vâng.

    Bây giờ chúng ta cần một tập lệnh đơn giản để xử lý một cú nhấp chuột vào biểu tượng menu và hiển thị các thành phần của nó:

    $(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

    Như thế này. Tôi đặt nó vào một tệp riêng biệt và đặt nó trước thẻ đóng nội dung.

    Đó là tất cả. Bằng cách này, bạn có thể nhanh chóng tạo một menu thích ứng đơn giản cho trang đích của mình.

    Tất nhiên, có những nhược điểm. Thụt lề được chỉ định bằng pixel nhưng bạn cũng có thể đặt tất cả khoảng cách dưới dạng phần trăm. Nó chỉ là không cần thiết. Nếu đây là một trang web chính thức thì tôi sẽ sử dụng biểu tượng phông chữ hoặc svg, không phải png và tôi sẽ tính toán lại mức thụt lề theo tỷ lệ phần trăm. Và vì vậy, đó là một chút ngẫu hứng :) Tôi hy vọng mọi thứ đều rõ ràng? Tạm biệt.

    Xin chào các bạn thân mến. Hôm nay tôi sẽ hướng dẫn bạn cách tạo menu phản hồi cho trang web. Chúng tôi sẽ tạo một menu ngang thích ứng với màn hình của thiết bị di động. Và tính linh hoạt của nó nằm ở chỗ, bất kể công nghệ tạo trang web của bạn là gì, menu này sẽ hoạt động trên bất kỳ trang web nào. Tức là chỉ cần sửa lại các liên kết, tên các mục menu và điều chỉnh kiểu dáng cho phù hợp với thiết kế của bạn là đủ.

    Trước đây, tôi đã xuất bản một bài viết mà tôi đã chia sẻ. Và hôm nay chúng ta sẽ xem xét một cách khác.

    Giao diện menu thông thường cho màn hình máy tính và màn hình lớn sẽ trông như thế này:

    Trên thiết bị di động, menu mở rộng sẽ xuất hiện như sau:

    Nguyên tắc xây dựng menu thích ứng phổ quát.

    Vì vậy, để tạo một menu như vậy, bạn sẽ cần:

  • Tạo khung html.
  • Áp dụng phong cách css.
  • Kết nối trình xử lý tập lệnh.

    • Tất nhiên, bạn có một menu trên trang web của mình và bạn muốn làm cho nó có tính thích ứng. Bạn có hai cách, cách thứ nhất là điều chỉnh menu hiện có và cách thứ hai là tạo menu thích ứng mới.

    Trên hầu hết các trang web được tạo trên CMS, việc tạo menu mới sẽ dễ dàng hơn là làm lại menu cũ. Vì bản thân việc xây dựng menu được triển khai thông qua PHP và các truy vấn cơ sở dữ liệu, nên các kiểu css nằm rải rác trong nhiều kiểu khác. Nhìn chung, toàn bộ quá trình thiết kế lại menu này là một công việc khá tốn nhiều công sức và công sức.

    Trên các trang web tự viết sẽ ít công việc chỉnh sửa hơn, nhưng bạn vẫn phải mày mò.

    Trong mọi trường hợp, bạn có thể sử dụng các kiểu và tập lệnh từ bài viết này và điều chỉnh menu của mình.

    Và để tạo một menu thích ứng mới, bạn sẽ cần rất ít thời gian. Ban đầu, một menu được tạo dựa trên thẻ ul và li, sau đó các kiểu css được thêm vào và tập lệnh được kết nối. Menu này tải và phản hồi nhanh hơn vì nó hoạt động mà không cần truy vấn cơ sở dữ liệu.

    Các kiểu CSS, để thuận tiện, được bao gồm trong các tệp riêng biệt. Mặc dù chúng có thể được bao gồm trong các kiểu trang web chính. Tôi sẽ đưa ra một ví dụ về cách kết nối các kiểu thông qua các tệp riêng biệt.

    Quá trình tạo menu thích ứng Bước 1. Tạo cấu trúc menu html.

    Bước đầu tiên là quyết định nơi menu sẽ được hiển thị. Để làm điều này, bạn cần phân tích các tệp mẫu của mình. Theo quy định, menu được hiển thị trong tiêu đề hoặc thanh trang web. Các tệp header.php và sidebar.php chịu trách nhiệm về các khối chính này của mẫu. Chính trong đó, bạn cần tìm nơi để chèn menu hoặc thay thế menu cũ. Đối với mỗi mẫu, đây là một quy trình riêng lẻ.

    Sau khi quyết định vị trí chèn menu mới, bạn cần đặt khung html này vào vị trí này và thay đổi các mục menu cũng như liên kết của riêng bạn.

    Kinh doanh trên Internet

    Lưu ý: Tôi đã sử dụng màu cam để biểu thị các thành phần bạn chỉnh sửa cho trang web của mình. Các mục menu có thể được thêm và xóa. Tôi sẽ chỉ cho bạn cách thực hiện việc này trong video hướng dẫn. Mã này chịu trách nhiệm về mũi tên menu thả xuống: . Nếu bạn có nhiều mục menu thả xuống, hãy sử dụng mã này.

    Bước 2. Kết nối các kiểu css.

    Để đơn giản hóa quy trình và không bị nhầm lẫn với , chúng tôi sẽ bao gồm các kiểu ở dạng tệp riêng biệt. Các file style được bao gồm trong file header.php giữa các thẻ …. Ít nhất đây là trường hợp của hầu hết các mẫu hiện đại.

    Nhiệm vụ của bạn là tìm nơi kết nối tệp kiểu chính style.css và bên dưới nó để kết nối các kiểu menu thích ứng.

    Nhưng trước tiên, bạn phải tải xuống các tệp có kiểu và tập lệnh. Sau đó, sao chép các tệp bootstrap.css và menu.css vào thư mục chủ đề của bạn. Và sau đó trong tệp header.php, giữa các thẻ HED, thêm các dòng kết nối sau:

    Bước 3. Kết nối thư viện jQuery và tập lệnh xử lý.

    Và để hoàn tất việc điều chỉnh menu, bạn cần thêm kết nối của thư viện jQuery và một tập lệnh sẽ mở menu khi được nhấp vào.

    Và mặc dù rất có thể bạn đã kết nối thư viện jQuery nhưng bạn sẽ thấy nó giữa các thẻ HED trong tệp header.php, để đề phòng, tôi sẽ chỉ cho bạn cách kết nối nó. Và đồng thời chúng tôi sẽ kết nối tập lệnh xử lý mà bạn đã tải xuống trong kho lưu trữ.

    Trong cùng một tệp header.php, trước khi đóng thẻ, hãy chèn các dòng mã sau:

    Lưu ý: tệp bootstrap.min.js, cùng với các kiểu, cũng cần được sao chép vào thư mục chủ đề trên trang web của bạn. Có lẽ chủ đề của bạn có thư mục JS, sau đó sao chép tệp này vào đó và đưa tệp này vào đường dẫn tệp.

    Vì vậy, mọi thứ đã sẵn sàng, bạn có thể kiểm tra kết quả. Truy vấn phương tiện được xây dựng ở điểm 768 px; ngay khi màn hình trình duyệt trở nên nhỏ hơn giá trị này, menu sẽ điều chỉnh. Bạn có thể thay đổi điểm truy vấn phương tiện trong tệp kiểu.

    Và bây giờ, như một ví dụ rõ ràng về cách hoạt động của menu phản hồi và cách cài đặt nó trên trang web, tôi khuyên bạn nên xem video hướng dẫn.

    Đó là tất cả đối với tôi hôm nay, chúc bạn thành công và hẹn gặp lại trong các bài viết và video hướng dẫn mới!

    Cổng thông tin với các menu phức tạp. Chúng tôi quyết định chỉ viết kịch bản nếu không tìm thấy thứ mình cần trên mạng. Một số điều hướng khác nhau với các tính năng khác nhau đã được hình thành. Thật may mắn cho chúng tôi, hầu hết mọi thứ đều được tìm thấy ngoại trừ một thứ. Tuy nhiên, ngay trước khi bắt đầu viết menu này, chúng tôi vẫn tìm được thứ mình cần.
    Chúng tôi đã thử khá nhiều menu thích ứng. Trong chủ đề này, tôi quyết định lựa chọn những thứ đáng giá và thú vị nhất mà chúng tôi phải thử. Tất cả các menu thích ứng không giống nhau và được thiết kế dành riêng cho các tác vụ cụ thể.
    Vì thế. Dưới đây là 5 menu thích ứng cho mọi dịp.

    flexMenu Đây chính xác là menu rất khó tìm và chức năng mà chúng tôi sắp bắt đầu viết.
    flexMenu - một menu phù hợp với các trang web có chiều rộng thay đổi linh hoạt. Tính năng chính và độc đáo của nó là bổ sung mục “Thêm” và chuyển vào danh sách thả xuống các mục không vừa với chiều rộng của toàn bộ điều hướng. Tức là nếu nhìn vào màn hình lớn, chúng ta sẽ thấy hết các điểm. Ngay khi chúng tôi bắt đầu thu nhỏ cửa sổ trình duyệt, mục “Thêm” sẽ xuất hiện ở cuối menu và các mục không vừa khi cửa sổ thu nhỏ sẽ được tự động chuyển đến danh sách thả xuống của nó. Như vậy, chúng ta sẽ có một menu có chiều cao cố định và chiều rộng “đang chơi”.
    Trong khi làm việc với flexMenu, chúng tôi gặp phải một vấn đề. Trong trường hợp của chúng tôi, bên phải là logo có float: left;, bên phải là menu này cũng có float: left; và bên phải có float: right; có một khối khác. Khi thay đổi kích thước cửa sổ trình duyệt, hóa ra khối bên phải nhảy xuống dưới menu, sau đó tất cả những thứ này nhảy xuống dưới logo và sau đó chức năng nén menu được kích hoạt. Cách xử lý tính năng bố cục này sẽ được thảo luận trong các chủ đề tiếp theo. Hãy theo dõi. Viết mã cho Menu điều hướng đáp ứng Một ví dụ tuyệt vời về menu điều hướng. Khi chúng ta thay đổi kích thước cửa sổ trình duyệt, chúng ta sẽ thấy các mục chồng lên nhau và được căn chỉnh theo chiều rộng. Trông rất gọn gàng. Quan trọng nhất, menu thích ứng này sẽ trông tuyệt vời trên thiết bị di động và quan trọng hơn là nó thuận tiện khi sử dụng trên các thiết bị có màn hình cảm ứng.

    Menu phẳng đa cấp - điều hướng thích ứng Menu phẳng đa cấp là một menu đa cấp thích ứng, hoạt động bằng thư viện Jquery. Trên màn hình máy tính để bàn, chúng ta thấy menu ngang quen thuộc. Trên thiết bị di động, điều hướng ngang chuyển thành danh sách thả xuống.
    Menu phẳng đa cấp là sự lựa chọn tuyệt vời nếu bạn cần tiết kiệm không gian trên trang.