Bài 6: Tạo Responsive Top Navigation Menu Cho Blogspot Blogger

Responsive Top Navigation Menu cho Blogspot

Trong bài này mình chia sẻ cách tạo Responsive Top Navigation Menu cho Blogspot Blogger trong một template đơn giản. Thay vì ngâm cứu mobile menu, hãy làm cái này thôi vì nó tiện và là xu hướng.

Như thường lệ bạn cần xem lại mẫu template Blogspot Blogger cơ bản như bên dưới đây, sau đó sẽ thêm code vào các phần tương ứng.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
    <head>
        <title>
            Tiêu đề trang web
        </title>
        <b:skin>
            <![CDATA[ /* Chỗ này để viết CSS */ ]]>
        </b:skin>
    </head>
    <body>
       Đây là khu vực viết nội dung trang web
        <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'></b:section>
    /*Tạo widget cho các thành phần trong template/*
</body>
</html>

Bây giờ bạn sẽ thêm vào Template 03 món là: HTML, CSS và JavaScript để thanh menu hiển thị.

Đầu tiên là nhúng phần CSS từ nguồn ngoài

Đối với menu sử dụng trong ví dụ này mình lấy từ w3schools và sẽ nhúng nó theo cách External CSS. Mình chèn trước thẻ <head> của template mẫu đoạn code sau:

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tiếp theo là viết HTML cho Navigation menu

Đây là nội dung đoạn HTML của menu, bạn copy và chèn nó vào cặp thẻ <body> của template mẫu, cụ thể là tại dòng Đây là khu vực viết nội dung trang web | dán đè lên dòng đó nhé !

<div class='topnav' id='myTopnav'>
<a class='active' href='#home'>Home</a>
<a href='#news'>News</a>
<a href='#contact'>Contact</a>
<a href='#about'>About</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'>
<i class='fa fa-bars'/>
</a>
</div>

<h2 style='text-align: center;'>Responsive Topnav Example</h2>
<p style='text-align: center;'>Resize the browser window to see how it works.</p>

Như vậy là xong phần HTML của menu rồi nhé, chuyển qua bước tiếp theo nào !

Viết JavaScript cho menu

Nhờ có đoạn JavaScript này mà khi bạn nhấn vào đó nó mới xổ ra hay thu vào và nhiều tính năng khác hay ho, tùy menu. Riêng đối với menu trong ví dụ này thì bạn chèn vào ngay bên dưới đoạn HTML trên đoạn code sau:

<script type='text/javascript'>
//<![CDATA[

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

//]]>
</script>

Đây cũng là cách nhúng JavaScript kiểu Internal mà mình đã chia sẻ trong bài Nhúng JavaScript vào Blogspot Blogger đấy.

Viết CSS cho Template

Như bước đầu tiên là bạn thêm cái nguồn CSS cho menu bên ngoài thôi, bây giờ bạn phải viết CSS cho cái Template và responsive cho cái menu;

CSS bạn viết trong đoạn này của template mẫu:

<![CDATA[ ... Chỗ này để viết CSS ... ]]>

Nội dung của nó là:

body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

* {
box-sizing: border-box;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: #4CAF50;
color: white;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

Cách sử dụng CSS vừa rồi là kiểu Internal mà mình vừa chia sẻ trong bài trước đấy nhé ! Bạn kéo xuống cuối bài viết để xem hướng dẫn nếu chưa đọc qua. Bây giờ template hoàn chỉnh của bạn sẽ là:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<head>
<title>
Tiêu đề trang web
</title>
<b:skin>
<![CDATA[
.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: #4CAF50;
color: white;
}

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}


body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

* {
box-sizing: border-box;
}

]]>
</b:skin>
</head>
<body>
<div class='topnav' id='myTopnav'>
<a class='active' href='#home'>Home</a>
<a href='#news'>News</a>
<a href='#contact'>Contact</a>
<a href='#about'>About</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'>
<i class='fa fa-bars'/>
</a>
</div>
<h2 style='text-align: center;'>Responsive Topnav Example</h2>
<p style='text-align: center;'>Resize the browser window to see how it works.</p>
<script type='text/javascript'>
//<![CDATA[

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

//]]>
</script> 
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
</body>
</html>

Bạn có thể copy toàn bộ code ở trên và chèn vào template đang dùng để xem kết quả như nào nhé !

Như vậy là qua bài này bạn đã biết được thêm cách tạo Responsive Top Navigation Menu cho Blogspot rồi đấy. Và bạn đã thấy tầm quan trọng của việc ứng dụng các bài trước vào bài này chưa nè, nếu chưa thì xem lại các bài trước sẽ thấy nhé !