Cách tạo menu đa cấp cho blogger

Menu này hoạt động như menu trên nhưng nó có màu sắc, chiều rộng và chiều cao khác nhau. Nó cũng hoạt động trên jquery và nó được thiết kế giống như trên, vì vậy chúng tôi phải làm theo cùng một bước mà chúng tôi tạo menu đa cấp cho blogger. Bạn có thể thấy một hình ảnh hoạt hình của menu này bên dưới, nếu bạn thích nó thì hãy làm theo các bước dưới đây để thêm nó vào blog của bạn:

Bước 1: Chuyển đến blogger và nhấp vào bố cục.
Bước 2: Nhấp vào thêm một tiện ích và cuộn xuống Html / javascript.
Bước 3: Sao chép mã dưới đây và dán nó vào cửa sổ Html / javascript:

<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li class='has-sub'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li class='last'><a href='#'>Product 3</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>Company</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>

Bước 4: Nhấp vào lưu và nhấp vào thêm một tiện ích một lần nữa.
Bước 5: Cuộn xuống Html / javascript một lần nữa và dán đoạn mã dưới đây vào đó:

<script>
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
} )( jQuery );
</script>

Bước 6: Nhấp vào lưu và đi đến mẫu.

Bước 7: Nhấp vào Chỉnh sửa Html và nhấp vào bất cứ nơi nào trong mã Html.

Bước 8: Tìm kiếm <head> bằng cách sử dụng Ctrl + F trên bàn phím của bạn và dán mã bên dưới bên dưới <head> trong mã Html:

<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"</script>
<script src="script.js"></script>

Bước 9: Tìm kiếm]]> </ b: skin> và ngay phía trên nó dán đoạn mã dưới đây:

@import url(http://fonts.googleapis.com/css?family=Lato);
@charset "UTF-8";
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Lato', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
padding: 6px 15px;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li {
cursor: pointer;
background: #000;
border-bottom: 1px solid #4c4e53;
}
#cssmenu > ul > li:last-child {
border-bottom: 1px solid #3e3d3c;
}
#cssmenu > ul > li > a {
font-size: 13px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #64676e;
background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));
background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);
background: linear-gradient(#64676e 0%, #4c4e53 100%);
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
background: #97c700;
background: -moz-linear-gradient(#97c700 0%, #709400 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));
background: -webkit-linear-gradient(#97c700 0%, #709400 100%);
background: linear-gradient(#97c700 0%, #709400 100%);
color: #4e5800;
text-shadow: 0 1px 1px #709400;
}
#cssmenu > ul > li.has-sub > a:after {
content: "";
position: absolute;
top: 10px;
right: 10px;
border: 5px solid transparent;
border-left: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub.active > a:after {
right: 14px;
top: 12px;
border: 5px solid transparent;
border-top: 5px solid #4e5800;
}
/* Sub menu */
#cssmenu ul ul {
padding: 0;
display: none;
}
#cssmenu ul ul a {
background: #efefef;
display: block;
color: #797979;
font-size: 13px;
}
#cssmenu ul ul li {
border-bottom: 1px solid #c9c9c9;
}
#cssmenu ul ul li.odd a {
background: #e5e5e5;
}
#cssmenu ul ul li:last-child {
border: none;
}

Bước 10: Nhấp vào lưu mẫu và bạn đã hoàn tất.
Tùy chỉnh:
Mặc dù bạn có thể tùy chỉnh menu này nhưng chỉ thực hiện nếu bạn có kiến thức về CSS nếu không menu này có thể ngừng hoạt động. Ở đây tôi sẽ chỉ cho bạn cách thêm hoặc xóa các tab trong menu này và cách đặt liên kết trong các tab.
Thêm và xóa các tab:
Chúng tôi sẽ sử dụng mã Html mà chúng tôi đã sử dụng ở bước 3 để thêm một tab mới trong menu, mã dài mà tôi đã đề cập ở bước 9 là mã CSS chỉ trang trí menu để chúng tôi không cần thực hiện bất kỳ thay đổi nào trong mã CSS Thủ thuật blogger. Để thêm tab mới trong trình đơn, hãy dán <li> <a href='#'> Tên tab </a> </ li> trong mã được sử dụng trong bước 3 và thay thế tên Tab bằng tên mà bạn muốn hiển thị trong menu. Ví dụ: bạn muốn thêm một tab mới có tên tab mới bên dưới Trang chủ trong menu bây giờ, tất cả những gì bạn phải làm là thêm

<li> <a href='#'> Tab mới </ a > </ li> bên dưới <li class = 'active'> <a href='#'> Trang chủ </a> </ li>

trong mã Html được sử dụng trong bước 3 ở trên. Mã cuối cùng sẽ giống như mã dưới đây:

<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>New tab</a></li>
<li class='has-sub'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li class='last'><a href='#'>Product 3</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>Company</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>

Tương tự để xóa tab hiện tại, chỉ cần xóa mã của tab, ví dụ bạn muốn xóa tab Mới khỏi menu, chỉ cần xóa <li> <a href='#'> Tab mới </a> < / li> và bạn đã hoàn thành.
Để thêm tab thả xuống có các tab phụ như được hiển thị trong hình trên (tab Sản phẩm), hãy thêm mã bên dưới vào mã Html

<li class='has-sub'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li class='last'><a href='#'>Product 3</a></li>
</ul>

Trong đó Sản phẩm là tab có các tab phụ Sản phẩm 1, Sản phẩm 2 và Sản phẩm 3. Ví dụ: bạn muốn thêm một tab bên dưới nhà có tiêu đề Giới thiệu với các tab phụ Công ty, Tác giả và trang web bây giờ bạn phải thêm đoạn mã bên dưới vào Mã HTML:

<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>Company</a></li>
<li><a href='#'>Author</a></li>
<li class='last'><a href='#'>Website</a></li>
</ul>

Final code should like below code:

<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>Company</a></li>
<li><a href='#'>Author</a></li>
<li class='last'><a href='#'>Website</a></li>
</ul>
<li class='has-sub'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li class='last'><a href='#'>Product 3</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>Company</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>

Insurance Finances

PENGATURAN

Cách tạo menu đa cấp cho blogger

Related Posts

Post a Comment

Post a Comment

Popular

Sticky