HTML Markup
Chúng ta sẽ bắt đầu bài tập này với những điều sau đây đánh dấu-một tiêu đề, có chứa một <nav> và một vài phần tử lồng nhau khác:
<header>
<nav>
<h1>
<a href="" class="logo">Logo</a>
</h1>
<ul>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
<button class="toggle-menu" aria-label="Responsive Navigation Menu">☰</button>
</nav>
</header>
<main>
<!-- content here -->
</main>
Các yếu tố nav là một phần của tiêu đề, bao gồm ba yếu tố; các biểu tượng, các menu chính, và một nút giữ chỗ để kích hoạt một đơn đáp ứng (dưới 1061px).
Lưu ý : Nếu bạn nhấn vào nút này, không có gì nhiều sẽ xảy ra. Tạo menu ứng là vượt ra ngoài phạm vi của hướng dẫn này.
Các mã JavaScript
Đoạn mã trên sẽ thực hiện một số biến, tính toán kích thước của header thêm các giá trị padding-top với yếu tố main
var m = document.querySelector("main"),
h = document.querySelector("header"),
hHeight;
function setTopPadding() {
hHeight = h.offsetHeight;
m.style.paddingTop = hHeight + "px";
}
Hỗ trợ trình duyệt
Hiệu ứng này làm việc trong hầu hết các trình duyệt và các thiết bị gần đây. Tuy nhiên, kinh nghiệm không phải là lý tưởng trong tất cả các thiết bị di động (ví dụ như các thiết bị iOS). Điều này xảy ra bởi vì các cuộn kiện xử khác nhau trên các trình duyệt máy tính để bàn so với các thiết bị di động.
0 Komentar