• 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 sidebar menu trượt độc đáo sử dụng Scriptaculous

24
30/11/2010

Scriptaculous là một thư viện JavaScript được xây dựng trên Prototype JavaScript Framework, cung cấp các hiệu ứng động trực quan và các thành phần giao diện người dùng thông qua Document Object Model (DOM).

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>

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.

{24 bình luậnAdd yours ?}

13:23:00, 2 thg 12, 2010

trong blog của em có 2 cột sidebar, anh có cách nào giúp em tạo thêm một cột sidebar ở phía dưới 2 sidebar đó nhưng có chiều rộng gấp 2 được ko anh? em cám ơn anh trước lun nha!

Reply
13:29:00, 2 thg 12, 2010

Cái này dễ thôi em. Để rảnh a viết một bài về cái này. Em chờ nhé.

Reply

tình hình là mình bị lỗi ko sử dụng được silebar cách khắc phục
http://djlee.tk

Reply
19:59:00, 4 thg 1, 2011

Bị lỗi là do thư viện jquery xung đột với thư viện Scriptaculous. Trong blog bạn có sẵn jquery. Để không bị xung đột, bạn cần đặt đoạn code sau đây vào trước thẻ </head>
<script type='text/javascript'>
jQuery.noConflict();
</script> ~x(

Reply

chen vao dc rui nhung khoang 1 time lai bi cach fix thank ban

Reply
14:04:00, 5 thg 1, 2011

Blog http://www.djlee.tk/ của bạn bị một lỗi cần khắc phục. Bạn nên đọc bài này nhé. http://huynh-nhat-ha.blogspot.com/2010/11/snowfall-effect-on-mouse-hover.html

Reply

@Huỳnh Nhật Hà
mình đã bỏ đoạn code chuột nhưng vẫn ko được ban ơi giúp mình với thank

Reply

mình đã xóa các code đó đi rồi nhưng vẫn bị bạn xem fix cách nào dc ko thank

Reply
15:22:00, 5 thg 1, 2011

Ôi trời, :)) phần HTML đặt giữa 2 thẻ <body>, </body> là đối với website, còn đối với Blogger thì bạn phải đặt gần thẻ <body>, tức là đặt gần khu vực Menu, bạn đem đặt ngay trên thẻ </body>> thì có Chúa mới xử được cho nó hoạt động đó.

Reply

thế bay giờ phải đặt ở đâu thế nhỉ

Reply
19:29:00, 5 thg 1, 2011

Bây giờ vị trí phần HTML như thế là OK rồi. Tớ đã nói căn nguyên là do jquery xung đột với scriptaculous mà. Trong Template của bạn ở một widget HTML/JavaScript (chính xác là thèn hiệu ứng Spy cho Bài viết Hot) có chứa file jquery.min.js. Để thèn Slide Menu này với thèn hiệu ứng Spy cùng ngồi chung bàn chè chén thì bạn phải đặt đoạn code dưới đây vào tiện ích Bài viết Hot nói trên.
<script type='text/javascript'>
jQuery.noConflict();
</script>
Đặt nó trước dòng này nè:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> (thèn này trong tiện ích Bài viết Hot ấy nhé).

Tớ đã test rồi. Tớ nói mà sai là đóng cửa blog này ngay.

Reply

tình hình đã làm những cách bạn nói nhưng đều chưa được hix bạn có số điện thoại hoặc yahoo ko mình nói chuyện rõ hơn ^^

0932.737.696 - 0933.737.696
Yahoo: lygiaquan
thank bạn nhiều

Reply
13:32:00, 6 thg 1, 2011

Thực ra phần HTML đặt ở sau thẻ <body> hay trước thẻ </body> không có ảnh hưởng gì, cậu đặt như thế là được rồi. Nhưng code trong tiện ích Bài viết Hot, cậu phải đặt như vầy mới hoạt động được nè:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
jQuery.noConflict();
</script>
<style type="text/css" media="screen">
#spylist {


Tức là vị trí của thèn code chống xung đột phải nằm sau thèn jquery.min.js đó. Lần này k được là tớ đóng blog rửa tay gác kiếm luôn. Thề đó. Hì hì, đã test OK rồi mới dám thề độc vậy =))

Reply

vẫn ko thể được ^^ bạn xem lại xem :D http://djLee.tk vẫn ko hoạt động hehe
Mình ko mún blog bạn bị đóng cửa đâu.
vì ở đây nhiều thủ thuật hay lắm nên ko muốn nó phải đóng cửa đâu :d

Reply

cho mình hỏi đoạn mã này có tác dụng gì và bỏ đi thì có gì ko

Reply
14:40:00, 6 thg 1, 2011

Tớ đã xem rồi mà, hoạt động tốt trên IE8 và FF. Tớ đã nói là đoạn code nhỏ đó rất quan trọng, nó giúp thư viện jquery k xung đột với các thư viện khác như scriptaculous. Slide menu này xài scriptaculous nên k thể k có thèn đó.

Reply

http://tinypaste.com/4ddcb đoạn mã này là của thằng nào vậy và khi bỏ đi thi ok còn nếu có nó thì menubar ko sử dụng dc hé hé

Reply
14:48:00, 6 thg 1, 2011

Ở đâu ra cái đó chứ. Mà có nó vô chả làm gì. Trước khi cậu phản hồi lần này, tớ đã test OK mà, cái đó k vấn đề gì.

Reply

có đoạn đó thì ko hoạt động được menubar còn ko có thì ok ^^ hay thật mà ko bít đoạn đó có tác dụng gì nữa ^^.
Mà hình như có cách làm cho các label rung ring khi đưa chuột vào mà mình kiếm trên blog này ko có

Reply
16:38:00, 6 thg 1, 2011

Ý cậu là Label lắc qua lắc lại khi rê chuột vào ấy à, cái đó dễ thôi, để viết 1 bài về nó nhé

Reply
22:23:00, 26 thg 10, 2011

Ai dảnh làm hộ e, em cà dốt lắm hí hí

Reply
22:45:00, 26 thg 10, 2011

Xem bài nào của bác Hà cũng thấy hay, à Bác ơi có đi công tác ghé bên em lấy chiếc xe Bay mà đi nhé.

Reply
10:04:00, 4 thg 3, 2012

anh vào xem hộ blog của em với ạ http://vanhanh2507.blogspot.com/ em đã làm như anh hướng dẫn nhưng menu không trượt ra được hix

Reply
11:03:00, 4 thg 3, 2012

@Vân Hạnh em làm nó trượt ra được rồi nhưng làm sao để chữ MENU màu hồng không biến mất sau khi mình đã kéo được cái menu ra ạ >"<

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