Tạo Menu CSS đa cấp trỏ xuống động cho Web - blogger

Làm thế nào để thêm menu đa cấp cho Website? Muốn tạo menu đa cấp CSS cho blogspot phải làm thế nào? ...
Thủ thuật hôm nay mình giới thiệu tới các bạn đó là cách thêm Code để làm Menu đa cấp đẹp chỉ sử dụng CSS. Trước hết mình sẽ đưa code sau đó hướng dẫn các bạn thêm ở blog, trên nền Website các bạn thực hiện tương tự như chèn mã CSS + HTML cho Website

CODE menu CSS động:

<script src='http://code.helperblogger.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ##### Huong dan thu thuat itviet360.com ##### */
.ddsubmenustyle, .ddsubmenustyle div {
/*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a {
display: block;
width: 170px;
/*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
/*IE6 CSS hack*/
display: inline-block;
width: 170px;
/*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
background-color: black;
color: white;
}

.downarrowpointer {
/*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer {
/*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim {
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}

.mattblackmenu li {
display: inline;
margin: 0;
}

.mattblackmenu li a {
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px;
/*padding inside each tab*/
border-right: 1px solid white;
/*right divider between tabs*/
color: white;
background: #414141;
}

.mattblackmenu li a:visited {
color: white;
}

.mattblackmenu li a:hover {
background: black;
/*background of tabs for hover state */
}

.mattblackmenu a.selected {
background: black;
/*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li>
<a href="#">LINK1</a>
</li>
<li>
<a href="#" rel="ddsubmenu1">LINK2</a>
</li>
<li>
<a href="#" rel="ddsubmenu2">LINK3</a>
</li>
<li>
<a href="#">Link4</a>
</li>
<li>
<a href="#" rel="ddsubmenu3">LINK5</a>
</li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li>
<a href='#'>LINK2 ITEM 1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 2.1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2.2</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 3.1</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 4</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li>
<a href='#'>LINK3 ITEM 1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 3.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.3</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.4</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 4</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 5.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 5.2 1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2 2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 6</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li>
<a href='#'>LINK5 ITEM 1</a>
</li>
<li>
<a href='#'>LINK5 ITEM 2</a>
</li>
<li>
<a href='#'>LINK5 ITEM 3</a>
</li>
<li>
<a href='#'>LINK5 ITEM 4</a>
</li>
<li>
<a href='#'>LINK5 ITEM 5</a>
</li>
</ul>

- Trong đó các thuộc tính của các lớp Menu các bạn có thể chỉnh sửa màu sắc, kích thước...
- Để thêm vào blogger các bạn lựa chọn thêm 1 tiện ích HTML/Javascript bằng cách:
+ Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript

Sau đó dán code vào
Lưu ý: Nếu các bạn muốn thêm trực tiếp code vào mẫu (Template) blogger để thay thế menu hiện tại thì các bạn tìm đến code menu hiện tại (cái này phụ thuộc vào từng mẫu nên mình ko hướng dẫn chung được)

---

Chúc các bạn thành công !

Chuyên mục: html-css, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger