Trong bài này tôi sẽ hướng dẫn các bạn cách chúng ta tạo 1 Menu đơn giản trên blogspot 1 cấp. Để làm được điều này chúng ta cần thực hiện các bước như sau:
Truy cập vàoChủ đề - > Chỉnh sửa HTML thêm code sau trước thẻ đóng </body>
Bước 3: Chúng ta vào lại Bố cục sẽ thấy một Widget có tên Navigation Menu Bây giờ chúng ta chỉ việc tạo Menu từ Widget này với cú pháp như hình bên dưới
- Thêm code tạo Widget với LinkList
- Tạo Menu từ danh sách liên kết của Widget
Truy cập vào
<div class='navi-menu'>
<b:section class='nav-menu row' id='Navigation Menu' maxwidgets='2' name='Navigation Menu' showaddelement='no'>
<b:widget id='LinkList100' locked='true' title='' type='LinkList' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content'>
<ul id='nav' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<b:loop values='data:links' var='link'>
<li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
$("#LinkList100").each(function(){var e="<ul id='nav'><li><ul id='sub-menu'>";$("#LinkList100 li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul id='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);$("#LinkList100 ul").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()});$("#LinkList100 li").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()})});
//]]>
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear: both;'/>
Bước 2: Tiếp theo chúng ta cần 1 CSS để làm đẹp menu xíu
.navi-menu {
text-align: center;
margin: 0 auto;
padding: 0;
width: 100%;
}
.nav-menu {
margin: 0 auto;
background: $primarycolor;
}
.selectnav {
display:none;
}
.nav-menu {
padding: 0;
}
.nav-menu ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 999;
}
.nav-menu ul li {
display: inline-block;
line-height: 1;
list-style: none outside none;
padding: 0;
text-align: left;
}
.nav-menu li a {
background: transparent;
color: #fff;
display: block;
font-size: 14px;
padding: 14px 19px;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-family: Montserrat;
font-weight: 700;
font-style: normal;
letter-spacing: 1px;
}
.nav-menu li a i {
margin-right: 3px;
}
.nav-menu li a:hover, .nav-menu li a:hover .nav-menu ul li.hasSub a:after {
background:#fff;
color:#000;
}
.nav-menu ul li li a:hover {
padding-left: 20px;
}
.nav-menu ul li ul {
width: 180px;
margin: 0px;
position: absolute;
visibility: hidden;
display: inline;
padding: 0px;
height: auto;
border-top-width:0;
background: #fff;
-webkit-box-shadow: 0 1px 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 0 1px rgba(0,0,0,.1);
}
.nav-menu ul li:hover ul {
visibility: visible;
}
.nav-menu li li a {
color: #000000;
font-size: 14px;
padding: 10px 15px;
position: relative;
text-align: left;
-webkit-transition: color .15s linear 0s,padding-left .15s linear 0s;
}
.nav-menu li li {
float: none !important;
display: block;
}
.nav-menu a#pull {
display: none;
}
.nav-menu ul li.hasSub a {
padding-right: 25px
}
.nav-menu ul li.hasSub a:after {
color: #fff;
position: absolute;
top: 15px;
right: 10px;
display: block;
content: "\f0d7";
font-family: FontAwesome;
font-weight: 400;
font-size: 15px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.nav-menu ul li.hasSub ul li a:after {
display: none!important
}
 |
| Cú pháp tạo menu và sub theo như hình trên |
Kết luận: Trên là cách chúng ta tạo 1 menu bằng CSS và HTML kết hợp với Widget Linklist của blogspot. Tuy nhiên code trên chỉ áp dụng cho Menu 1 cấp, nếu bạn muốn thêm nhiều cấp bạn có thể tự mình phát triển thêm code hoặc xem một số bài viết khác tươgn tự trong blog mình nhé!
Tags:
Blogger