Tuesday, November 30, 2010

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

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.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)