Trong thiết kế blogger để phần header thích hợp với các trình duyệt khác
nhau rất quan trọng và phần quan trọng nhất của header là menu chính
cung cấp liên kết hữu ích bên trong của bạn. Hôm nay mình sẽ hướng dẫn
cách thiết kế một menu thả xuống linh hoạt cho Blogspot mà không cần sử
dụng một scripts hoặc hình ảnh! Phần đặc biệt là nó không chỉ là một
trình đơn ngang mà nó có thể biến thành một danh sách thả xuống. Đơn
giản chỉ cần sử dụng mã HTML5, thẻ
<nav> và CSS3 : bạn có thể
kiểm tra tại đây, Mình sẽ giới thiệu một menu của
mybloggertricks
mà tôi hy vọng sẽ có ích cho cộng đồng blogger vì nó thực sự là một
trình đơn hiệu quả đó là tương thích với tất cả các trình duyệt và sử
dụng không Jquery!
Các ảnh chụp màn hình dưới đây được chụp bằng iPhone
cá nhân của tôi để cung cấp cho bạn một cái nhìn tổng quát về blog của
bạn sẽ như thế nào trong các kích cỡ màn hình khác nhau. Menu tự động
điều chỉnh chính nó sử dụng CSS3 truy vấn phương tiện truyền thông mà
chúng ta đã thảo luận trong phần đầu tiên của loạt bài này.
Bạn có thể vào blog demo bên dưới sau đó thu nhỏ chiều ngang của trình duyệt nhỏ lại để xem menu sẽ biến dổi thế nào nha.
VIEW DEMO
» Bước 1: Tắt trình duyệt mobile mặc định của blogger
1.1- Đăng nhập Blogger
1.2- Bấm vào icon chỉnh sửa ở mục điện thoại di dộng.
1.3- Tại mục seleck chọn no.=> Lưu lại và tiến hành bước tiếp theo.
» Bước 2: Thêm Responsive menu vào template
2.1- Vào Mẫu
2.2- Chọn Chỉnh sửa HTML
2.3- Tìm trong template đoạn code như bên dưới (đoạn này thường nằm trước thẻ <head>)
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
- Thay thế nó thành đoạn code bên dưới (Nếu không tìm thấy đoạn code trên thì dán đoạn code bên dưới vào trước thẻ <head>)
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
2.4- Dán đoạn code bên dưới trước thẻ:
]]></b:skin>
/*-----Responsive Drop Down Menu by MBT ----*/
body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
» Tùy chỉnh
- #50B7DC Là màu nền của menu
- #FFF Là màu chữ hiển thị trên menu chính.
- 1024px Chiều rộng của thanh menu
- #5FC6EB Màu sub menu khi rê chuột vào
- max-width: 800px Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng dropdown
2.5- Dán code bên dưới sau thẻ <body> hoặc vị trí bạn muốn thêm menu.
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Namkna Blog</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>
» Tùy chỉnh:
- Thay Namkna Blog thành tiêu đề blog của bạn.Nếu giữa tên có ký tự khoảng trống bạn dùng ký tự   để thay cho dấu cách.
- Thay các dấu thăng màu đỏ (#) thành liên kết tới bài viết hoặc nhãn của bạn.
- Bạn có thể dùng nút xổ dọc ▼ bằng các chèn ký tự sau ▼ .
Dán đoạn mã bên dưới vào sau thẻ <ul> hoặc trước thẻ </ul> để tạo một menu thả xuống.
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
</ul>
</li>
Menu trên sẽ chỉ tạo ra có một danh sách thả xuống và không thả xuống
danh sách đa cấp bởi vì nó làm phức tạp các bố trí mẫu trên các thiết bị
di động. Giữ nó đơn giản là tốt nhất.
» Cần giúp đỡ?
Trong ví dụ trên, Menu chính sẽ tự động được thiết lập hiển thị khi chiều rộng kích thước màn hình dưới hoặc bằng 800px. Tôi sử dụng hộp kiểm để giới thiệu các hiệu ứng chuyển đổi. Vì vậy, ngay sau khi kích thước màn hình đạt giảm 800px
hoặc hơn nữa, các thuộc tính CSS truy vấn phát hiện ra nó và tự động
thiết lập chế độ của hộp để kiểm tra và áp dụng các style. Đây là một kỹ
thuật thú vị mà chúng tôi sử dụng ở đây mà loại bỏ sự cần thiết cho
chức năng chuyển đổi JQuery.
Tôi đã sử dụng chỉ có hai điểm break quan trọng và đó là chiều rộng: 1024px cho màn hình máy tính để bàn và 800px
cho các thiết bị bao gồm máy tính bảng, iPad và điện thoại thông minh.
Vì vậy, toàn bộ quá trình được thực hiện rất dễ dàng. Mình chắc chắn
những người hiểu các hướng dẫn ở trên sẽ thấy nó thực sự thú vị để tùy
chỉnh nhiều hơn nữa và thêm các yếu tố thêm vào menu giống như một hộp
tìm kiếm đáp ứng ở góc hoặc một biểu tượng RSS, vv
Xin vui lòng cho tôi biết nếu bạn muốn bất kỳ trợ giúp ở đây. Tôi hy
vọng kỹ thuật này sẽ tiếp tục giúp các nhà phát triển để tạo ra các mẫu
blogger thú vị hơn và đóng góp nhiều hơn cho cộng đồng thế giới blog.
Tôi rất thích nghe phản hồi của bạn về điều này. Xin vui lòng cho chúng
mình biết quan điểm quý báu của bạn để chúng tôi có thể cải thiện nó hơn
nữa nếu cần thiết.
