▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 3)

Tương tự kiểu 1 và kiểu 2, menu dọc này cũng xổ dọc xuống các menu con khi bạn bấm chuột vào menu chính nhưng đặc biệt hơn ở chỗ là khi bạn đang xem menu nào thì menu đó sẽ có màu khác (màu đỏ) tất cả menu còn lại sẽ có màu đen...
Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.






Xem thử


Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/ddaccordion.js">

</script>


<script type="text/javascript">


ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 220px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLIHIZeQK2Ckp6dPXZM9myyH8t4VY6cfmGbaUPcEqL1L2UqO1SKkymAH2HMLUScQ6HSiR1r-3HyrAvveaz1-HCvT98KK3YRwvl1TUaSudFCUa9mki5bbfR8dwjlDBbmaCRVNTUWKoHUQKK/s1600/titlebar.png) repeat-x center left;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaBA4VTHlR6juumcDHYefSwX_RNAN0u3mDbmCo30OhOLEnK0cKFbrG_S4SbG8JPy4kj8M80HtgnGe6ibgLLUBI_ZSF_lQLaxBSSZrKAnYg3OrUDfoS-8oIJeFIuHxrRE8QKaF8dJJQ4_U/s1600/titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhojXYbHVxglp_CbQA5CLB2Z-gweS2w3GZ6GV6q41ZxAFuhx6dInBP3USmoaZizXT62nVQRPQOLLtCwMqVaiF5am-k17dtjEDuiXhyInjUr-xekawTCSw2ACs0ppNPl6CUdy-bJHmdvlYxL/s1600/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>


<div class="arrowlistmenu">

<h3 class="menuheader expandable">☆Tên menu chính 1</h3>
<ul class="categoryitems">
<li><a href="#">Tên menu con 1</a></li>
    <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
<li><a href="#">Tên menu con 5</a></li>
    <li><a href="#">Tên menu con 6</a></li>
    <li><a href="#">Tên menu con 7</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên meun chính 2</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
        <li><a href="#">Tên menu con 5</a></li>
    <li><a href="#">Tên menu con 6</a></li>
    <li><a href="#">Tên menu con 7</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên menu chính 3</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
</ul>


<h3 class="menuheader expandable">☆Tên menu chính 4</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
</ul>



</div>



Bây giờ, bạn cần thay đổi tên menu chính và con, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Mở rộng thêm:
Nếu muốn thêm menu phụ thì bạn copy đoạn code này:
<li><a href="#">Tên menu con </a></li>
Dán tiếp trên dòng lệnh </ul> của mỗi menu chính mà mình muốn thêm.

Còn muốn thêm một menu chính thì bạn copy đoạn code này:
   <h3 class="menuheader expandable">☆Tên menu chính </h3>
<ul class="categoryitems">
<li><a href="#">Tên menu con 1</a></li>
     <li><a href="#">Tên menu con 2</a></li>
    <li><a href="#">Tên menu con 3</a></li>
    <li><a href="#">Tên menu con 4</a></li>
</ul>
Dán trên thẻ </div> cuối cùng.

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


▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

21 nhận xét:

phamvanphuong nói...

Menu này mình làm sao không theo như ý muốn mà nó sổ tất cả các menu xuống và không có màu mè gì hết. Mình làm lại 3-4 lần rồi vẫn vậy.Không biết nó sai gì không hay do câu lệnh nó thiếu gì mà không được bạn ơi!Nhờ bạn giúp với!
Blog của mình là: phamtuankietdn.blogspot.com

dunghennessy nói...

Tôi vừa thử làm lại ở trang Blog thử nghiệm của mình, thì menu vẫn có hiệu ứng sổ dọc xuống hoặc rút gọn đầy đủ, còn ở Blog bạn chắc nó bị xung đột với một code nào đó hoặc là bạn copy thiếu (các code này rất khó chịu, chỉ cần thiếu một dấu chấm hoặc dấu ngoặc thôi nó cũng bị lỗi...)

phamvanphuong nói...

Mình làm lại được rồi. Cảm ơn bạn đã hướng dẫn tận tình!

dunghennessy nói...

Chúc mừng bạn!!!

phamvanphuong nói...

Anh Dũng ơi cho em hỏi này cái! Em dùng menu này ở máy em thì hoạt động bình thường nhưng khi em đi thử nhiều máy khác thì "menu chính" và "menu con" nó xổ ra hết không thu gọn lại được anh ơi!Không biết sao nữa, em vẫn dung trình duyệt Firefox sau đó không được, em chuyển sang Google Chrome nó vẫn vậy(em cũng cài luôn flash bổ trợ rồi Anh ah) và các hiệu ứng flash thì hoạt động bình thường mà chỉ riêng cái menu là không được thôi. Anh có cách nào không?Chỉ giúp em với!
Em cảm ơn Anh nhiều nhe!

dunghennessy nói...

Em thử cập nhật phiên bản mới nhất của trình duyệt xem sao...

phamvanphuong nói...

Dạ! Em cũng đã thử rồi đó Anh Dũng à! Phần Anh hướng dẫn "Tạo menu dọc cho hình ảnh" em cũng vậy!Nó không hoạt động ở máy khác. Sau đó em mở trang của Anh thì menu của Anh hoạt động được bình thường mà, còn trang em thì không! Không biết nó bị sao không!

vuongbolgger nói...

Bạn Oi Mình Làm Thử Rừi Nhưng Ko được bạn có thể hướng dẫn mình làm lại cái menu dọc có các mennu nhỏ thả xuống trong blogspot. nếu dược thì bàn liên hệ qua yahoo này nha : vuongsonbang@yahoo.com.vn
thanks & Best Reagird

dunghennessy nói...

Nó bị lỗi như thế nào? bạn nêu rõ cụ thể đi để mình có thể hướng dẫn cho bạn được

Nặc danh nói...

Mình muốn tạo menu kiểu này nhưng màu khác thì chỉnh sủa sao hả bạn?

dunghennessy nói...

Bạn muốn thay đổi màu của chữ hay màu của tab???
Bạn thay đổi màu nền bằng cách thay đổi các đường link file ảnh nền (màu đen hoặc đỏ) có đuôi .png hoặc mã màu chữ ở dòng lệnh color...

GX - An Lộc nói...

lam cách nào khắc phục khoản cách của 2 menu chính nó hết thưa Ko Dũng

dunghennessy nói...

Đâu có khoảng cách nào ở 2 menu chính đâu bạn (bạn bấm vào xem thử xem đâu có khoảng cách nào giữa 2 menu chính...)

Cơn Bão Khởi Nghiệp nói...

Anh Dũng ơi? Làm sao để tạo ra cái menu mà khi ta rê chuột vào thì mới hiện các menu con, còn không rê chuột vào thì chỉ thấy 1 menu chính thôi ạ. Giống cái menu "chọn thủ thuật" trong blog của anh nè: http://dunghennessy8.blogspot.com/

Thanks anh nhiều nhé.

Unknown nói...

Muốn chỉnh độ rộng của thanh menu thì chỉnh chỗ nào bác Dũng nhỉ?

dunghennessy nói...

Độ rộng của menu là một file ảnh, vì vậy bạn phải thay đổi link ảnh của "nó" thì mới được bạn à!!

Unknown nói...

cho minh hoi dan vào chỗ nào của Html thế mình ví dụ trn hay duwois ]]> chẳng han

dunghennessy nói...

Bạn đăng nhập vào Blog > Chọn Bố cục, sau đó chọn HTML rồi dán tất cả các code vào là xong

muadumban nói...

Anh Dũng ơi! Sao em làm thì khoảng cách giữa các menu chính cách nhau rất xa. anh xem hinh rùi hướng dẫn em với nha. Cảm ơn anh!
http://3.bp.blogspot.com/-VlO-KPuSaA4/U1skKZqHTpI/AAAAAAAAAwc/-3G393TwdIY/s1600/loi+hien+thi.png

dunghennessy nói...

Chắc code menu này xung đột với code tiện ích nào đó ở trang của em rồi...

Tiểu học Vĩnh Phước nói...

hi

Đăng nhận xét

 
Powered by by: Blogger