Nút giãn nở
- August 28, 2009
- 25 comments
Nút giãn nở là dạng nút có thể co gian và bao lấy nội dung khi nội dung của nó to ra hoặc nhỏ lại. Đây là dạng nút được sử dụng rất nhiều làm Tab như trên Izwebz bạn cũng thấy. Nếu chỉ là web tĩnh thì không thành vấn đề, nhưng là web động, đôi khi mình không hoàn toàn điều khiển được nội dung. Ví dụ như bạn muốn thay đổi nội dung của tab từ Home thành My Home Page. Trong Video tutorial này bạn sẽ học được cách tạo nút giãn nở và hover effect của nó luôn
Thời lượng: 17:26
Xem Demo: Nút giãn nở
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File size: 52.86 MB
Tạo thanh Navigation với Photoshop »
Mình thấy những cái các bạn đã đưa ra điều bất lợi không thực sự đúng như tên gọi, các bạn đã dùng cách cố tình cắt cho cái bg_letf dài ra, vẫn thực hiện được ý đồ, nhưng mình thấy không thực sự động về chiều dài của menu. Nên mình đã mạo mụi viết lại cái menu này. Lần đầu tham gia mong pà con chém nhẹ tay cho
)
http://www.mediafire.com/?8fj865rrfp4pu8u
thank kiu moi người
Cái này đâu có động đâu bạn, nếu mà lỡ text vượt wa’ width 285px thi coi nhu cai nut ko còn được hiệu ứng như vay nưa, voi lại mà chạy IE thì coi nhu mất bo góc.
Đọc comment của bạn đôi lúc tôi thấy bạn không biết đã tiếp thu bao nhiêu kiến thức mà DW đã nói trong all về HTML CSS…những trình duyệt hiện đại như FF, Chrome, Safari…v.v.., người ta áp dụng được CSS3 thì mình mới thấy được góc bo tròn còn ai xài IE7 hoặc IE8 thì không thấy đơn giản vì IE nó không hỗ trợ CSS3…mà cũng chẳng ai làm cái nút button co giãn vượt quá 285px…người ta chia sẻ kiến thức hay thì nên lắng nghe và tiếp thu..
Đây là code em đã chỉnh sửa đôi chút ở cái Video hướng dẫn của anh DW. Mọi người xem dùm em coi nó có lợi chỗ nào và bất lợi chỗ nào với nhé
http://www.mediafire.com/?81715xkp5gdqj3q
Em chân thành cảm ơn
Mình thấy những cái các bạn đã đưa ra điều bất lợi không thực sự đúng như tên gọi, các bạn đã dùng cách cố tình cắt cho cái bg_letf dài ra, vẫn thực hiện được ý đồ, nhưng mình thấy không thực sự động về chiều dài của menu. Nên mình đã mạo mụi viết lại cái menu này. Lần đầu tham gia mong pà con chém nhẹ tay cho
)
http://www.mediafire.com/?8fj865rrfp4pu8u
thank kiu moi người
Em thấy thế này:
1/ Nếu dùng photoshop để mà tạo nút giản nở thì lúc bo góc mình chả cần dùng Radius trong css để làm gì, lúc này tại sao mình không dùng Photoshop luôn
2/ Nếu mà đã dùng Radius trong CSS thì cần chi phải dùng Photoshop, vì Radius trong CSS nó đâu có Run được cho mọi trình duyệt đúng không anh
Đó là quan điểm của em không biết có sai chỗ nào không, mong anh em chỉ giáo nhé
anh DW ơi em cho cái text ở trong button dài ra. Nhưng nó cũng chỉ giản ra bằng với cái width của button nếu dài hơn thì nó bị đứt. Anh coi thử cho em.
Các bạn muốn cái thanh này chạy trên IE 6 thì thêm dòng
ul#mainnav li{
float:left;
}
Mà hình như bài này thẻ phải nằm ngoài thẻ mới đúng chứ nhỉ. Anh thử kiểm tra lại xem.
a đã fix cho IÊ6 chưa. kô biết fix sao cả
@Nguyễn Thanh Hải
Bây giờ ai còn fix cho IE 6 nữa, tương lai web đang ngời ngời với css3, html5 nhắc lại thằng IE 6 tổ thêm mệt thân.
dạ do trên em, nhiều người vẫn dùng IE6 lắm, mình kô fix thì ai mà xem
Anh ơi, anh viết tut về cách chỉ sử dụng 1 tấm hình cho tất cả các icon đi (giống như facebook áh). Thanks anh nhiều ^^
@longk4
Đó là kĩ thuật CSS Sprites anh DW có trình bày rồi mà
http://www.izwebz.com/video-tutorials/css-html/cach-su-dung-sprite-image/
Thế bạn style lại cái ul#mainNav li a span
Bây giờ cho nó display: inline-block;
anh Demon Warlock ơi làm cách nào để menu giãn nở này chạy được trên ie 6 vậy anh
sao tui thích cái giọng của bác DW quá nhờ, nói chuyện có duyên sao á, he he. coi video của bác này không buồn ngủ
, mà dể hiểu nữa 
, good job. thanks anyway
đúng đó bác DW ơi
fix lỗi này trên IE6 đi
cho anh em được nhờ
chứ ko nó lỗi tùm lum mất hết cả giao diện web
Nhờ DW xem dùm,nếu đem qua IE6 xem thì button bị lỗi tùm lum,chán thằng IE này ghê,có cách nào fix cho IE 6 cũng chạy được hiệu ứng này ko? Thanks
ồ, cám ơn, cám ơn. Đã bắt được bí kíp võ công rồi. Hehe
Lý do là tại vì hình của bạn không đủ dài. Bạn phải cho cái hình bên tay trái thiệt là dài như trong Video tôi có hướng dẫn đó.
Trong ví dụ hình của tôi đâu có trắng đâu
nó có gradient đấy chứ. Chắc bạn không để ý lúc tôi cắt, tôi lấy một hình rất dài đó thôi.
http://www.izwebz.com/wp-content/uploads/2009/08/demo/expand_button/images/button_left.png
vao xem cai hinh minh chua lam duoc
http://img689.imageshack.us/img689/7929/button.jpg
Mình có làm bằng một cái hình khác nhưng không giãn nở được, ở đây có thể DW làm bằng hình trằng nên khi giãn ra thì lẫn với màu trắng của background.
Không biết có phải thế không DW. Nếu được bạn giải thích hộ mình và bạn hoangnm hiểu với nha
tại sao cái nút nó lại giãn được nhỉ
ảnh button_left:no-repeat mà.Hay là cái ảnh button_left nó dài nhỉ
anh giải thích cho em thêm chút nha
Rất tiếc là tôi không biết gì về FireWorks hết. Sorry bạn nha.
A ơi, a có biết chương trinh FireWorks của Adobe không.
Em thấy nó dùng để thiết kế web rất tốt.
Nếu có thể thì anh có thể làm tut fireworks từ đơn giản đến nâng cao.
Em xin cảm ơn rất nhiều