banner

Trang được xây dựng với nội dung giải trí dành cho tuổi thơ, giúp các bé hiểu biết thêm về ngôn ngữ, lịch sử, sự vật đời sống... thông qua các câu truyện Cổ tích, Truyền thuyết dân gian, nghệ thuật vẽ tranh, hài hước... từng bước xây dựng nền tảng trí tuệ cho bé. Trang cũng dành một phần nội dung cho bậc làm cha mẹ như: Đặt tên cho con - Tưởng dễ mà khó, sứ khỏe, nấu ăn, bài thuốc hay... Chúc các bé cùng phụ huynh thư giãn vui khỏe! Bé nào muốn có tranh, video, vui cười... muốn đăng lên trang này, nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt nội dung trước khi được đăng nhé!
Bài ngẫu nhiên
Bé nào có tranh đẹp, video hay, vui cười,... muốn đăng trên trang này thì nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt trước khi được đăng.
20 tháng 5, 2013

Menu dọc trượt đẹp


Với thủ thuật này, trên blog các bạn sẽ có một menu dọc khá đẹp, khi rê chuột vào mỗi menu sẽ có một bản tóm tắt giới thiệu về menu này. Khi bạn bấm chuột vào menu sẽ xuất hiện một số menu con phía dưới, bấm lần nữa thì menu này sẽ rút gọn lên... Bạn bấm vào Xem thử phía dưới để thấy rõ thủ thuật menu dọc này.

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

CODE:



 <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">
//Initialize Arrow Side Menu:
ddaccordion.init({
            headerclass: "menuheaders", //Shared CSS class name of headers group
            contentclass: "menucontents", //Shared CSS class name of contents group
            revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", 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: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
            oninit:function(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">
.arrowsidemenu{
            width: 250px; /*width of menu*/
            border-style: solid solid none solid;
            border-color: #94AA74;
            border-size: 1px;
            border-width: 1px;
}
           
.arrowsidemenu div a{ /*header bar links*/
            font: bold 12px Verdana, Arial, Helvetica, sans-serif;
            display: block;
            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_b97HDNbWShwdl2-DVbCbsmWmBHZ6nlBYNIGaiBCWEPHxDhcBJ_ZZC3A7ZnuhISjs1qF7ocaLlmBsOPtVYmD9jDKnUzqnH_R0k_JZjoF3VmsiYSgxtvVCMzUluTiAhLgfnqs1ztFE7P6g/s1600/arrowgreen.gif) 100% 0;
  height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            padding: 4px 0 4px 10px;
            line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
            text-decoration: none;
}
           
.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
            color: #26370A;
}
.arrowsidemenu div a:hover{
            background-position: 100% -32px;
}
.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
            color: #6F3700;
}
           
.arrowsidemenu div.selected a{ /*header that's currently selected*/
            color: blue;
            background-position: 100% -64px !important;
}
.arrowsidemenu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
}
.arrowsidemenu ul li{
            border-bottom: 1px solid #a1c67b;
}
.arrowsidemenu ul li a{ /*sub menu links*/
            display: block;
            font: normal 12px Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: black;
            padding: 5px 0;
            padding-left: 10px;
            border-left: 10px double #a1c67b;
}
.arrowsidemenu ul li a:hover{
            background: #d5e5c1;
}
</style>
<div class="arrowsidemenu">
<div><a href="http://www.dunghennessy.blogspot.com" title="Home">● TRANG CHỦ</a></div>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <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>
            <li><a href="#">Tên menu con 8</a></li>
            </ul>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <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>
            </ul>
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <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 class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
            <ul class="menucontents">
            <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>
            <li><a href="#">Tên menu con 8</a></li>
            </ul>
</div>


Bây giờ, bạn thay đổi các Tên menu cha và con, thay dấu "#" là các đường link mà mình muốn liên kết đến, thêm dòng giới thiệu menu ở mục "title=", bạn cũng có thể thay đổi chiều rộng của menu ở mục Width, thay đổi màu nền của menu ở các mục background và bấm Lưu lại là xong.
Mở rộng thêm:
Nếu bạn muốn thêm menu con nữa thì copy dòng lệnh này:
<li><a href="#">Tên menu con </a></li> 
và dán tiếp theo phía dưới ở mỗi menu cha.

Còn muốn thêm một menu cha thì copy đoạn code này:
<div class="menuheaders"><a href="#" title="Nhập dòng mô tả giới thiệu về menu cha tại đây">▼ Tên menu cha</a></div>
    <ul class="menucontents">
    <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>
Dán tiếp theo trên thẻ đóng </div> cuối cùng...

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

  • Nhận xét bằng Blogger
  • Nhận xét bằng Facebook
Item Reviewed: Menu dọc trượt đẹp Rating: 5 Reviewed By: PHÙNG BẢO KIÊN