Trang chủ Blog | Các câu hỏi thường gặp | Yahoo! Việt Nam

      Bài mới nhất

      Sửa Đóng
      Bài viết Tìm bài viết:
      Trích dẫn Báo cáo

      Tạo menu với hiệu ứng ảnh viền

      Thư mục: 360Plus |
      Đăng ngày: 13:04 08-11-2009
      Code:
      <table border="1" bgColor="#0F4525" align="center">
      <tbody>
      <tr>
      <td>
      <div style="BORDER-BOTTOM:transparent 2px solid;BORDER-LEFT:transparent 2px solid;BORDER-TOP:transparent 2px solid;BORDER-RIGHT:transparent 2px solid;">
      <div style="BORDER-BOTTOM:#ffffff 3px inset;BORDER-LEFT:#ffffff 3px inset;BACKGROUND:url(http://img405.imageshack.us/img405/3729/leepromenu1.gif);BORDER-TOP:#ffffff 3px inset;BORDER-RIGHT:#ffffff 3px inset;" align="center">
      <div style="BORDER-BOTTOM:transparent 3px solid;BORDER-LEFT:transparent 3px solid;BORDER-TOP:transparent 3px solid;BORDER-RIGHT:transparent 3px solid;">
      <table border="2" bgColor="#050004" align="center">
      <tbody>
      <tr>
      <td bgColor="#0F4525">
      <div style="BORDER-BOTTOM:transparent 1px solid;BORDER-LEFT:transparent 1px solid;BORDER-TOP:transparent 1px solid;BORDER-RIGHT:transparent 3px solid;"><a title="Chú_Thích_Menu1" href="Link_Menu1"><font color="#8DFFB2">Tên_Menu1</font></a><font color="#20124d" size="3"> </font></div></td>
      <td bgColor="#0F4525">
      <div style="BORDER-BOTTOM:transparent 1px solid;BORDER-LEFT:transparent 1px solid;BORDER-TOP:transparent 1px solid;BORDER-RIGHT:transparent 3px solid;"><a title="Chú_Thích_Menu2" href="Link_Menu2"><font color="#8DFFB2">Tên_Menu2</font></a><font color="#20124d" size="3"> </font></div></td>
      <td bgColor="#0F4525">
      <div style="BORDER-BOTTOM:transparent 1px solid;BORDER-LEFT:transparent 1px solid;BORDER-TOP:transparent 1px solid;BORDER-RIGHT:transparent 3px solid;"><a title="Chú_Thích_Menu3" href="Link_Menu3"><font color="#8DFFB2">Tên_Menu3</font></a><font color="#20124d" size="3"> </font></div></td>
      <td bgColor="#0F4525">
      <div style="BORDER-BOTTOM:transparent 1px solid;BORDER-LEFT:transparent 1px solid;BORDER-TOP:transparent 1px solid;BORDER-RIGHT:transparent 3px solid;"><a title="Chú_Thích_Menu4" href="Link_Menu4"><font color="#8DFFB2">Tên_Menu4</font></a><font color="#20124d" size="3"> </font></div></td>
      <td bgColor="#0F4525">
      <div style="BORDER-BOTTOM:transparent 1px solid;BORDER-LEFT:transparent 1px solid;BORDER-TOP:transparent 1px solid;BORDER-RIGHT:transparent 3px solid;"><a title="Chú_Thích_Menu5" href="Link_Menu5"><font color="#8DFFB2">Tên_Menu5</font></a><font color="#20124d" size="3"> </font></div></td>

       
      </tr></tbody></table></div></div></div></td></tr></tbody></table>

      B. Tùy chỉnh các thông số :

      #0F4525 : Màu nền của Viền bên ngoài.
      #0F4525 : Màu nền phía dưới tên Menu
      #8DFFB2 : Màu chữ của Menu.
      Tên_Menu1 (2,3,4,5) : Tên Menu ( VD : Thủ thuật Yh!Plus, Share themes...)
      Chú_Thích_Menu1 (2,3,4,5) : Chú thích khi bạn rê chuột vào Tên Menu.
      Link_Menu1 (2,3,4,5) : Link dẫn đến cho từng Menu.
      http://img405.imageshack.us/img405/3729/leepromenu1.gif : Link ảnh viền.
      • Trên đây là các thông số cơ bản để bạn có thể tạo được 1 thanh Menu theo ý của mình, giờ mình nói thêm 1 về độ dày của Viền ngoài, Link ảnh Viền, cái này hơi khó hiểu, chỉ dành cho các bạn có hiểu biết vè htnnl:

      • Trong đoạn code trên :

      <table border="1" bgColor="#0F4525" align="center">
      <tbody>
      <tr>
      <td>
      <div style="BORDER-BOTTOM:transparent 2px solid;BORDER-LEFT:transparent 2px solid;BORDER-TOP:transparent 2px solid;BORDER-RIGHT:transparent 2px solid;">
      <div style="BORDER-BOTTOM:#ffffff 3px inset;BORDER-LEFT:#ffffff 3px inset;BACKGROUND:url(http://img405.imageshack.us/img405/3729/leepromenu1.gif);BORDER-TOP:#ffffff 3px inset;BORDER-RIGHT:#ffffff 3px inset;" align="center">
      <div style="BORDER-BOTTOM:transparent 3px solid;BORDER-LEFT:transparent 3px solid;BORDER-TOP:transparent 3px solid;BORDER-RIGHT:transparent 3px solid;">
      <table border="2" bgColor="#050004" align="center">
      <tbody>
      <tr>

      Có thể nói đoạn code này chính là " Xương" của thanh Menu này . Tất cả yếu tố về ảnh viền, độ dày của nền... đều nằm ở đoạn code này, trong đó:
      2px  : Độ dày viền ngoài
      3px : Độ dày hiệu ứng ảnh viền
      2 : Độ dày của viền bao quanh tên Menu
      • Các bạn có thể tham khảo 1 số Link ảnh viền dưới đây:
      http://img405.imageshack.us/img405/3729/leepromenu1.gif
      http://img405.imageshack.us/img405/3729/leepromenu1.gif

      http://img38.imageshack.us/img38/3651/leepromenu2.gif
      http://img38.imageshack.us/img38/3651/leepromenu2.gif

      • Nếu dùng riêng 1 Mo-dun để tạo Menu trên thì nên làm mất viền, nền và tên Mo-dun bằng code CSS sau:
      Code :

      #user_mod_1000X h2{color:transparent;font-size:0px;}
      #user_mod_1000X .rc_bd  .rc_bc .hd .titlebar .hd, #user_mod_1000X .rc_bd  .rc_bc .hd .titlebar{background:transparent;}
      #user_mod_1000X .rc div, #user_mod_1000X .rc,
      #user_mod_1000X .rc_bd, #user_mod_1000X .rc_bd div.rc_bc,
      #user_mod_1000X .rc_ft, #user_mod_1000X .rc_ft div{background:transparent;color:none;}


      Thay X bằng số Mo-dun tự tạo.

      • Xem thêm cách tạo Menu với hiệu ứng nút bấm tại đây :
      http://vn.myblog.yahoo.com/lee-nguyenblog/article?mid=11421

      Hơi dài nhưng không quá khó, chúc các bạn thành công
      ----------o0o----------

      Bản quyền bài viết:  Lee'sBlog
      Viết lại: Minh Nguyên's Blog

      Ghi rõ nguồn khi sử dụng lại thông tin từ Site này nhé.Thank for visited
      Bài viết mới của Minh Nguyên's Blog




      Trích dẫn (0)
      Tìm tag: 360 plus, tạo menu+ hiệu ứng
      Tổng cộng 10 lời bình
      Lời bình mới

      Bài viết về bạn hoặc có tag tên bạn:

      • Chưa có bài nào có liên quan.

      Người đăng ký yêu thích blog này cũng đồng thời thích:

      • Chưa có blog yêu thích nào có liên quan.