• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo thanh menu sổ dọc sử dụng Scriptaculous

2
30/11/2010

Thư viện Scriptaculous có thể được sử dụng để tạo hiệu ứng động trong việc tạo thanh menu sổ dọc. Ở đây xin giới thiệu kiểu menu sổ dọc do Sven Wappler phát triển có sử dụng Prototype + Scriptaculous.

Xem Demo 1.

Nếu bạn muốn tạo một thanh menu đẹp như vậy thì có thể thực hiện theo các bước sau đây.

1. Đặt toàn bộ đoạn code dưới đây vào trước thẻ </head>

<script src="http://www.wappler.eu/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="http://www.wappler.eu/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="http://www.wappler.eu/scriptaculous/swdropdownmenu/menu.js" type="text/javascript"></script>

<style type="text/css">
#menu{ background:#678;border-bottom:1px solid #ABC;border-top:1px solid #ABC;padding-left:10px;height:32px;width:100%}
#menu ul{ display:block;line-height:1em;list-style:none;margin:0 !important;padding:0 !important;z-index:90}
#menu ul li{ float:left;font-size:12px;line-height:1,5em;list-style-type:none;margin:0;padding:0}
#menu ul li a{ background:transparent;color:GreenYellow;display:block;font-weight:bold;line-height:32px;text-decoration:none;margin:0;padding:0 1em;width:auto}
#menu ul li a:hover{ color:#FFF;text-decoration:none}
#menu ul.level2,#menu ul.level3{ background:#678;border-top:1px solid #ABC;left:0;position:absolute;top:0;visibility:hidden}
#menu ul.level2 li,#menu ul.level3 li{ border-bottom:1px solid #ABC;float:none;margin:0;padding:0;width:150px}
#menu ul.level2 li a,#menu ul.level3 li a{ padding:0 1em}
#menu ul.level2 li a:hover,#menu ul.level3 li a:hover{ background-color:#456}
</style>

2. Thiết lập cấu trúc HTML như sau và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>.

<div id="menu">
<ul class="level1" id="root">
<li>
<a href="#">Menu 1 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 1.1.</a></li>
<li><a href="#">Submenu 1.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.2.1.</a></li>
<li><a href="#">Submenu 1.2.2.</a></li>
<li><a href="#">Submenu 1.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 1.3.</a></li>
<li>
<a href="#">Submenu 1.4. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.4.1.</a></li>
<li><a href="#">Submenu 1.4.2.</a></li>
<li><a href="#">Submenu 1.4.3.</a></li>
<li><a href="#">Submenu 1.4.4.</a></li>
</ul>
</li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 2</a></li>
<li class="sep">|</li>
<li><a href="#">Menu 3</a></li>
<li class="sep">|</li>
<li>
<a href="#">Menu 4 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 4.1.</a></li>
<li>
<a href="#">Submenu 4.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 4.2.1.</a></li>
<li><a href="#">Submenu 4.2.2.</a></li>
<li><a href="#">Submenu 4.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 4.3.</a></li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>

Việc bạn cần làm là đặt tên các Menu và Submenu đồng thời đặt đường link tương ứng vào đoạn code ở trên.

{2 bình luậnAdd yours ?}

19:12:00, 21 thg 2, 2011

nhưng mà đặt link menu vào đâu hả anh?anh có thể giúp em chi tiết bắng 1 ví dụ không?Em cảm ơn anh nhiều!

Reply
14:07:00, 8 thg 6, 2011

Hix HTML của e ko có thẻ "(body)" là sao hả anh(em đã phải thay dấu <> thành () vì HTML trong nhận xét này ko được chấp nhận),mà e tạo nhiều menu sổ dọc rồi nhưng trên blog của e nó chỉ hiện được thanh menu chính vào các menu con thì ko thấy đâu.Anh giải thích giúp e với.Cảm ơn a nhiều

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn