Scriptaculous có thể được sử dụng để tạo hiệu ứng trượt độc đáo cho thanh menu. Hôm nay xin giới thiệu cách thực hiện kiểu menu trượt của tác giả Andrew Sellick. Tôi đã có điều chỉnh đôi chút so với bản gốc của tác giả. :47)
Xem Demo.
Bạn có thể tạo một kiểu menu như vậy cho website/webblog của mình theo các bước sau đây.
1. Đặt toàn bộ phần code dưới đây vào trước thẻ </head>.
<script type='text/javascript' src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://hacodeproject.googlecode.com/files/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(http://bit.ly/gLVyXX);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://hacodeproject.googlecode.com/files/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(http://bit.ly/gLVyXX);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>
Bạn có thể tùy ý điều chỉnh thuộc tính CSS.
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="menuBar">
<a href="#" id="menuBarTab"><img src="http://bit.ly/eA8PG7" alt="menuBar" title="menuBar" /></a>
<div id="menuBarContents" style="display:none;">
<div id="menuBarContentsInner">
<h2>Menu<span>bar</span></h2>
<ul>
<li><a href='http://huynh-nhat-ha.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http:// huynh-nhat-ha.blogspot.com/feeds/posts/default' title='Suscribe Post Feed'>RSS</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/feeds/comments/default' title='Suscribe Comment Feed'>Comment RSS</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/contact.html' title='Contact'>Contact</a></li>
</ul>
</div>
</div>
</div>
Lúc này bạn chỉ việc thay đổi các tên menu và liên kết tương ứng trong cấu trúc HTML ở trên là bạn sẽ có một kiểu menu trượt độc đáo rồi đấy. Kiểu menu này có thể được cài đặt dễ dàng cho Blogger.
<a href="#" id="menuBarTab"><img src="http://bit.ly/eA8PG7" alt="menuBar" title="menuBar" /></a>
<div id="menuBarContents" style="display:none;">
<div id="menuBarContentsInner">
<h2>Menu<span>bar</span></h2>
<ul>
<li><a href='http://huynh-nhat-ha.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http:// huynh-nhat-ha.blogspot.com/feeds/posts/default' title='Suscribe Post Feed'>RSS</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/feeds/comments/default' title='Suscribe Comment Feed'>Comment RSS</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/contact.html' title='Contact'>Contact</a></li>
</ul>
</div>
</div>
</div>
No comments:
Post a Comment