Responsive Menu là gì?
Đơn đáp ứng được các menu định hướng như vậy, đó là linh hoạt và dễ sử dụng tại thời điểm rất giống nhau. Họ cung cấp một kinh nghiệm chất lượng cho cả người dùng máy tính để bàn cho người sử dụng điện thoại di động. Khi trên màn hình chúng xuất hiện theo cách truyền thống, nhưng trên điện thoại di động chúng xuất hiện giống như một ứng dụng di động chiều rộng, chiều cao và cũng sắp xếp. Trong hình bên dưới, bạn có thể thấy rõ ràng cùng một trình đơn xuất hiện khác nhau trên máy tính để bàn và trên điện thoại thông minh.
Làm thế nào để dễ dàng thêm một menu Responsive trong Blogger?
Khi nói đến việc tạo ra một trình đơn đáp ứng trong blogger chúng tôi có một loạt các kỹ thuật làm thế nào để chúng ta có thể xử lý các menu định hướng của chúng tôi cho các thiết bị màn hình nhỏ như điện thoại di động, điện thoại thông minh và vv Các nguồn lực tôi đã có để đạt được mục tiêu này là vô tận. Trong bài viết này, tôi sẽ hiển thị một khái niệm chính đó là dễ dàng hơn để thực hiện và có nhiều lợi thế hơn so với bất lợi. Điều đầu tiên bạn cần làm là để đi đến Blogger.com> Template> Edit HTML và dán đoạn mã sau bất cứ nơi nào sau thẻ <body > . (Hãy nhớ dán mã này chính xác nơi bạn muốn thực đơn của bạn xuất hiện).
<!---Menu--> <nav id='nav-main'>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Gallery</a></li>
<li><a href=''>Tutorials</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div id='nav-trigger'>
<span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
</div>
Bây giờ đến phong cách trình đơn, bạn cần phải thêm CSS cho mẫu của bạn. Để làm như vậy một lần nữa trong mẫu, tìm kiếm }}]]> </ b: skin> và ngay dưới nó dán đoạn mã sau
#nav-trigger {
display: none;
text-align: center;
}
#nav-trigger span {
display: block;
background-color: #279CEB;
cursor: pointer;
text-transform: uppercase;
padding: 0 25px;
color: #EEE;
line-height: 67px;
}
nav#nav-mobile {
margin: 0px;
}
nav {
margin-bottom: 30px;
}
nav#nav-main {
background-color: #279CEB;
margin: 0px;
float: left;
}
nav#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav#nav-main li {
display: inline-block;
float: left;
ont-family: 'Open Sans', sans-serif;
}
nav#nav-main li:last-child {
border-right: none;
}
nav#nav-main a {
padding: 0 25px;
color: #EEE;
line-height: 67px;
display: block;
}
nav#nav-main a:hover {
background-color: #3AB0FF;
text-decoration: none;
color: #fff;
}
nav#nav-mobile {
position: relatifve;
display: none;
}
nav#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #ddf0f9;
z-index: 10;
padding: 0px;
border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 30px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
}
nav#nav-mobile a:hover {
background-color: #e6002d;
color: #fff;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
display: block;
}
nav#nav-main {
display: none;
}
nav#nav-mobile {
display: block;
}
}
Sau khi thêm HTML và CSS , mà không cần thêm mã JavaScript sau đây menu sẽ không hoạt động chính xác. Vì vậy, thêm đoạn mã sau ngay trên </ head> tag.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
});
//]]>
</script>
Một khi bạn đã thực hiện thêm ba mã trên trong mẫu của bạn, lưu nó bằng cách nhấn "Save Template". Như vậy bạn đã thêm thành công trình đơn điện thoại di động trong blogger. Bây giờ đi và kiểm tra trang web của bạn từ máy tính và điện thoại di động để trải nghiệm sự khác biệt. Tôi hy vọng hướng dẫn này sẽ giúp tất cả mọi người trong việc học làm thế nào để dễ dàng Thêm một Menu Responsive di động trong Blogger mà không phải đối mặt với nhiều lo lắng. Nếu bạn thích bài viết này, hãy chia sẻ nó với bạn bè của bạn.
0 comments:
Post a Comment