Home-theater-designers
Không nghi ngờ gì nữa, bạn có thể tạo menu di động có thể chuyển đổi bằng cách sử dụng các khung CSS như TailWind hoặc BootStrap.
Nhưng khái niệm đằng sau nó là gì? Và làm thế nào bạn có thể tạo một cái từ đầu mà không phụ thuộc vào các khung CSS này?
Tự mình thực hiện những điều trên cung cấp cho bạn toàn quyền kiểm soát tùy chỉnh. Vì vậy, không cần biết thêm, đây là cách tạo menu di động có thể chuyển đổi bằng ngôn ngữ lập trình ưa thích của bạn.
Cách tạo Menu di động có thể chuyển đổi của bạn
Nếu bạn chưa làm như vậy, hãy mở thư mục dự án và tạo các tệp dự án của bạn (HTML, CSS và JavaScript).
Dưới đây, bạn sẽ thấy các ví dụ về mã bạn cần cho cả ba loại. Và nếu bạn chưa có, hãy xem xét tải xuống những ứng dụng này để học mã trước khi đọc tiếp.
Chúng tôi sẽ bắt đầu với HTML:
Mobile Navigation Menu
Home
About
Contact
CSS:
/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}
Thêm JavaScript:
màn hình cảm ứng bóng ma hp không hoạt động
var toggler = document.getElementById('toggle-container');
var toggleContents = document.getElementById('toggle-content');
document.addEventListener('click', function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle('displayed');
});
Đây là cách đầu ra hoạt động trông như thế nào khi bạn nhấp vào thanh menu:
Menu có thể chuyển đổi, vì vậy việc nhấp lại vào thanh — hoặc bất kỳ nơi nào trong trang — sẽ ẩn các điều hướng.
Có liên quan: Tạo kiểu cho các phần tử trang web với một nền CSS Gradient
Trình duyệt của bạn có thể không hỗ trợ ẩn nội dung khi bạn nhấp vào bất kỳ đâu trong trang web của mình. Bạn có thể cố gắng thực hiện điều này bằng cách sử dụng mục tiêu sự kiện và vòng lặp JavaScript. Bạn có thể làm điều đó bằng cách thêm khối mã sau vào JavaScript của mình:
//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName('toggle-content');
//Hide the navigations by looping through each of them:
for (var i = 0; i var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}
Vì vậy, đây là bản tóm tắt về những gì bạn vừa làm: Bạn đã tạo ba dòng bằng cách sử dụng div thẻ của HTML. Bạn đã điều chỉnh chiều cao và chiều rộng của chúng và định vị chúng trong DOM của mình. Sau đó, bạn đã cung cấp cho các sự kiện nhấp chuột này bằng JavaScript.
Có liên quan: Cách tạo trang web: Dành cho người mới bắt đầu
Bạn đặt hiển thị ban đầu của các điều hướng của mình thành không ai để ẩn chúng khi tải trang. Sau đó nhấp chuột sự kiện trên ba dòng chuyển đổi các điều hướng này dựa trên một lớp được mô tả bằng JavaScript ( hiển thị ). Cuối cùng, bạn đã sử dụng lớp mới này để hiển thị các điều hướng bằng CSS và JavaScript toggleContents phương pháp.
Liên quan: Xu hướng thiết kế Neumorphic trong HTML, CSS và JavaScript
Tuy nhiên, phần còn lại của CSS phụ thuộc vào sở thích của bạn. Nhưng đoạn mã trong đoạn mã CSS ví dụ ở đây sẽ cung cấp cho bạn ý tưởng về cách tạo kiểu của bạn.
Sáng tạo hơn khi xây dựng trang web của bạn
Tạo một trang web hấp dẫn trực quan đòi hỏi một số sáng tạo. Và một trang web thân thiện với người dùng có nhiều khả năng chuyển đổi đối tượng của bạn hơn là một trang web nhạt nhẽo.
Mặc dù chúng tôi đã hướng dẫn bạn cách tạo menu điều hướng tùy chỉnh ở đây, bạn vẫn có thể vượt qua điều này và làm cho nó hấp dẫn hơn. Ví dụ: bạn có thể tạo hoạt ảnh cho màn hình điều hướng, tạo màu nền cho chúng và hơn thế nữa. Và cho dù bạn làm gì, hãy đảm bảo rằng trang web của bạn sử dụng các phương pháp thiết kế tốt nhất và bố cục dễ sử dụng cho người dùng.
Đăng lại Đăng lại tiếng riu ríu E-mail 15 lệnh Windows Command Prompt (CMD) bạn phải biếtDấu nhắc lệnh vẫn là một công cụ mạnh mẽ của Windows. Dưới đây là các lệnh CMD hữu ích nhất mà người dùng Windows cần biết.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- CSS
- JavaScript
- Mẹo mã hóa
Idowu đam mê mọi thứ về công nghệ và năng suất thông minh. Trong thời gian rảnh rỗi, anh ấy chơi với mã hóa và chuyển sang bàn cờ khi anh ấy chán, nhưng anh ấy cũng thích thoát khỏi thói quen thỉnh thoảng. Niềm đam mê của anh ấy trong việc chỉ ra cho mọi người cách thức xung quanh công nghệ hiện đại đã thúc đẩy anh ấy viết nhiều hơn.
Xem thêm từ Idowu OmisolaTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký