Fixed menu có thể hiểu là 1 menu cố định và thắt chặt tại một địa điểm của trang, những fixed họ thường gặp gỡ là fixed đứng đầu menu, fixed bottom menu, fixed right menu, fixed left menu miêu tả vị trí mà các menuđược nạm định.

Bạn đang xem: Cố định menu khi cuộn trang

*


*

Trong bài bác này mình sẽ hướng dẫn các bạn tạo ra một menu thế định.

1. Xây dựng đồ họa hiển thị

Bước thứ nhất là xây dừng giao diện, chúng ta tạo tệp tin index.html tiếp nối tạo phần nội dung trang bởi đoạn mã bên dưới đây:


photoworld.com.vn hướng dẫn chế tạo Fixed đứng đầu Menu PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là 1 trong những ngôn ngữ lập

trình kịch bạn dạng hay một loại mã lệnh hầu hết được dùng để làm phát triển các

vận dụng viết mang lại máy chủ, mã nguồn mở, cần sử dụng cho mục đích tổng quát.

Nó vô cùng thích phù hợp với web và hoàn toàn có thể dễ dàng nhúng vào trang HTML.

bởi vì được tối ưu hóa cho các ứng dụng web, vận tốc nhanh, nhỏ gọn,

cú pháp giống như C và Java, dễ học và thời gian xây dựng thành phầm

tương đối ngắn lại so với những ngôn ngữ khác cần PHP đã nhanh chóng

phát triển thành một ngôn từ lập trình web thông dụng nhất gắng giới.

Xem thêm: Xem Tử Vi Tuổi Ất Sửu Năm 2017, Xem Tử Vi Tuổi Sửu Năm 2017

Thẻ sẽ đánh đấu sự ban đầu và sự chấm dứt của phần

mã PHP qua đó máy chủ biết để xử trí và dịch mã mang đến đúng.

Đây là một điểm khá thuận lợi của PHP hỗ trợ cho việc viết mã PHP

trở nên khá trực quan liêu và dễ dãi trong việc xây dựng phần

giao diện vận dụng HTTP. Ngôn ngữ, những thư viện, tài liệu nơi bắt đầu của PHP được thi công

bởi xã hội và bao gồm sự đóng góp góp rất cao của Zend Inc.,

doanh nghiệp do các nhà cải tiến và phát triển cốt lõi của PHP lập nên nhằm mục tiêu tạo ra

một môi trường bài bản để đưa PHP cách tân và phát triển ở đồ sộ doanh nghiệp.


Đều là những mã nguồn khá đơn giản và dễ dàng phải không nào, cùng đưa sang bước tiếp sau nhé!

Bài viết này được đăng tại

2. Thêm CSS để định dạng các thành phần


Trong cách này chúng ta sẽ định dạng các thành phần tất cả trong trang bằng CSS, chúng ta thêm đoạn mã CSS dưới đây và vào thẻ style:


Code RUN
.container width:50%; margin: auto;.navbar overflow: hidden; background-color: #333; position: fixed; top: 0; width: 50%;.navbar a float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;.main padding: 16px; margin-top: 30px; height: 1500px;

Trong đoạn mã trên, các bạn cần xem xét giúp mình hai điểm quan liêu trọng:

Trong phần định dạng mang đến class navbar, mình sử dụng thuộc tínhtop: 0; để thiết lập vị trí bỏ phần menu nằm phía bên trên cùng của trang, kế tiếp mình thực hiện thuộc tínhposition: fixed; để cố định phần menu ở trong phần đó lúc cuộn chuột.Trong phần định dạng cho classmain mình sử dụng thuộc tínhheight: 1500px; mục đích là để xuất hiện thêm thanh scroll để các bạn thấy rõ được hiệu ứng của fixed menu lúc cuộn chuột.

Có một để ý khi áp dụng fixed vị trí cao nhất menu là thanh menu sẽ sở hữu được thểđè lên các phần ngôn từ của trang, để khắc phục điều này chúng ta sử dụng nằm trong tính margin-top bỏ phần nội dung.

3. Lời kết

Vậy mình đã cũng chúng ta xây dựng hoàn thành một fixed top menu đơn giản, các chúng ta có thể áp dụng nhằm xây dựng gần như fixed menu ở các vị trí các bạn mong muốn. Qua bài bác này thì mình hi vọng các bạn đã có thêm sự chọn lựa trong vấn đề hiển thị các menu trên website của mình. Hẹn gặp lại chúng ta trong các nội dung bài viết tiếp theo trên photoworld.com.vn.