[HTML + CSS + JS] เมนูลัด ดิสคัส ปรับแต่งเพิ่มเติมได้

-[E]xSoMax[Z]-

---

เพือนๆสังเกตมุมซ๊ายจะมีปุมขึ้นมา ให้กด!

---

เปิดไพล์  footer.htm template\สกินที่ใช้\common\footer.htm
ค้นหา

1.                 <!--{eval updatesession();}-->
   
2.                 <!--{if $_G['uid'] && $_G['group']['allowinvisible']}-->
   
3.                 <script type="text/javascript">
   
4.                 var invisiblestatus = '<!--{if $_G['session']['invisible']}-->{lang login_invisible_mode}<!--{else}-->{lang login_normal_mode}<!--{/if}-->';
   
5.                 var loginstatusobj = $('loginstatusid');
   
6.                 if(loginstatusobj != undefined && loginstatusobj != null) loginstatusobj.innerHTML = invisiblestatus;
   
7.                 <!--{/if}-->
   
8.                 </script>

คัดลอกไปที่คลิปบอร์ด

เพิ่มโค๊ดต่อจากข้างบน

1. 
   
2. 
   
3. <style type="text/css">
   
4. a.tooltip span {display:none; padding:1px 1px; margin-center:1px; width:35px;}
   
5. a.tooltip:hover span{display:inline; position:absolute; right:27px; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; text-align:center;}
   
6. </style>
   
7. 
   
8. <script language="JavaScript" type="text/javascript" src="static/js/tooltipreplace.js"></script>
   
9. 
   
10. <div id="toHome" >&nbsp;<a class="tooltip" href="#" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">หน้าแรก</font></span></a></div>
    
11. <div id="toDotnet">&nbsp;<a class="tooltip" href="#" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">ดอทเนต</font></span></a></div>
    
12. <div id="toSearch">&nbsp;<a class="tooltip" href="#" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">ค้นหา</font></span></a></div>
    
13. <div id="toAsk">&nbsp;<a class="tooltip" href="#" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">ตั้งกระทู้</font></span></a></div>
    
14. <div id="toFacebook">&nbsp;<a class="tooltip" href"#" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">เฟรสบุ๊ค</font></span></a></div>
    
15. <div id="toReload">&nbsp;<a class="tooltip" href="javascript:window.location.reload();">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">รีเฟรช</font></span></a></div>
    
16. <div id="toTop">&nbsp;<a class="tooltip" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">บนสุด</font></span></a></div>
    
17. 
    
18. <script type="text/javascript">&lt;!-- // --&gt;&lt;![CDATA[
    
19.                                 var $top = jQuery.noConflict();
    
20.                                 $top(function() {
    
21.                                 $top(window).scroll(function() {
    
22.                                 if($top(this).scrollTop() != 10) {
    
23.                                 $top('#toTop').fadeIn();
    
24.                                 }else{
    
25.                                 $top('#toTop').fadeOut();
    
26.                                 }
    
27.                                 });
    
28.                                 $top('#toTop').click(function() {
    
29.                                         $top('body,html').animate({scrollTop:0},700);
    
30.                                         });
    
31.                                         });
    
32.         // ]]&gt;
    
33. </script>
    
34. 
    
35. <div id="toRadio">&nbsp;<a class="tooltip" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">ฟังเพลง</font></span></a></div>
    
36. 
    
37. <script type="text/javascript">&lt;!-- // --&gt;&lt;![CDATA[
    
38.                                 var $chat = jQuery.noConflict();
    
39.                                 $chat(function() {
    
40.                                 $chat(window).scroll(function() {
    
41.                                 if($top(this).scrollTop() != 10) {
    
42.                                 $chat('#toRadio').fadeIn();
    
43.                                 }else{
    
44.                                 $chat('#toRadio').fadeOut();
    
45.                                 }
    
46.                                 });
    
47.                                 $chat('#toRadio').click(function() {
    
48.                                         $chat('body,html').animate({scrollTop:910},700);
    
49.                                         });
    
50.                                         });
    
51.         // ]]&gt;
    
52. </script>
    
53.        
    
54. <div id="toChat">&nbsp;<a class="tooltip" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">สนทนา</font></span></a></div>
    
55.        
    
56. <script type="text/javascript">&lt;!-- // --&gt;&lt;![CDATA[
    
57.                                 var $chat = jQuery.noConflict();
    
58.                                 $chat(function() {
    
59.                                 $chat(window).scroll(function() {
    
60.                                 if($top(this).scrollTop() != 10) {
    
61.                                 $chat('#toChat').fadeIn();
    
62.                                 }else{
    
63.                                 $chat('#toChat').fadeOut();
    
64.                                 }
    
65.                                 });
    
66.                                 $chat('#toChat').click(function() {
    
67.                                         $chat('body,html').animate({scrollTop:1440},700);
    
68.                                         });
    
69.                                         });
    
70.         // ]]&gt;
    
71. </script>
    
72. 
    
73. <div id="toDown">&nbsp;<a class="tooltip" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><font size="1">ล่างสุด</font></span></a></div>
    
74.        
    
75. <script type="text/javascript">&lt;!-- // --&gt;&lt;![CDATA[
    
76.                                 var $down = jQuery.noConflict();
    
77.                                 $down(function() {
    
78.                                 $down(window).scroll(function() {
    
79.                                 if($top(this).scrollTop() != 10) {
    
80.                                 $down('#toDown').fadeIn();
    
81.                                 }else{
    
82.                                 $down('#toDown').fadeOut();
    
83.                                 }
    
84.                                 });
    
85.                                 $down('#toDown').click(function() {
    
86.                                         $down('body,html').animate({scrollTop:7000},700);
    
87.                                         });
    
88.                                         });
    
89.         // ]]&gt;
    
90. </script>

คัดลอกไปที่คลิปบอร์ด

หมายเหตุ :: สามารถปรับแต่งเพิ่มเองได้หรือเปลียนปุ่มต่างๆได้

เปิดไพล์  common.css  template\สกินที่ใช้\common\common.css

เพิ่มโค๊ดไว้ด้านล่างสุด

1. 
   
2. #toTop {
   
3.     background: url("{IMGDIR}/top.png") repeat scroll 0 0 transparent;
   
4.     bottom: 365px;
   
5.     cursor: pointer;
   
6.     height: 25px;
   
7.     position: fixed;
   
8.     right: 10px;
   
9.     width: 25px;
   
10. }
    
11. #toHome {
    
12.     background: url("{IMGDIR}/home.png") repeat scroll 0 0 transparent;
    
13.     bottom: 325px;
    
14.     cursor: pointer;
    
15.     height: 25px;
    
16.     position: fixed;
    
17.     right: 10px;
    
18.     width: 25px;
    
19. }
    
20. #toDotnet {
    
21.     background: url("{IMGDIR}/change.png") repeat scroll 0 0 transparent;
    
22.     bottom: 285px;
    
23.     cursor: pointer;
    
24.     height: 25px;
    
25.     position: fixed;
    
26.     right: 10px;
    
27.     width: 25px;
    
28. }
    
29. #toRadio {
    
30.     background: url("{IMGDIR}/radio.png") repeat scroll 0 0 transparent;
    
31.     bottom: 245px;
    
32.     cursor: pointer;
    
33.     height: 25px;
    
34.     position: fixed;
    
35.     right: 10px;
    
36.     width: 25px;
    
37. }
    
38. #toChat {
    
39.     background: url("{IMGDIR}/chat.png") repeat scroll 0 0 transparent;
    
40.     bottom: 205px;
    
41.     cursor: pointer;
    
42.     height: 25px;
    
43.     position: fixed;
    
44.     right: 10px;
    
45.     width: 25px;
    
46. }
    
47. #toSearch {
    
48.     background: url("{IMGDIR}/search.png") repeat scroll 0 0 transparent;
    
49.     bottom: 165px;
    
50.     cursor: pointer;
    
51.     height: 25px;
    
52.     position: fixed;
    
53.     right: 10px;
    
54.     width: 25px;
    
55. }
    
56. #toAsk {
    
57.     background: url("{IMGDIR}/ask.png") repeat scroll 0 0 transparent;
    
58.     bottom: 125px;
    
59.     cursor: pointer;
    
60.     height: 25px;
    
61.     position: fixed;
    
62.     right: 10px;
    
63.     width: 25px;
    
64. }
    
65. #toFacebook {
    
66.     background: url("{IMGDIR}/facebook.png") repeat scroll 0 0 transparent;
    
67.     bottom: 85px;
    
68.     cursor: pointer;
    
69.     height: 25px;
    
70.     position: fixed;
    
71.     right: 10px;
    
72.     width: 25px;
    
73. }
    
74. #toReload {
    
75.     background: url("{IMGDIR}/reload.png") repeat scroll 0 0 transparent;
    
76.     bottom: 45px;
    
77.     cursor: pointer;
    
78.     height: 25px;
    
79.     position: fixed;
    
80.     right: 10px;
    
81.     width: 25px;
    
82. }
    
83. #toDown {
    
84.     background: url("{IMGDIR}/down.png") repeat scroll 0 0 transparent;
    
85.     bottom: 5px;
    
86.     cursor: pointer;
    
87.     height: 25px;
    
88.     position: fixed;
    
89.     right: 10px;
    
90.     width: 25px;
    
91. }

คัดลอกไปที่คลิปบอร์ด

ไพล์รูป




เอาไพล์ไปไวที่ tooltipreplace.js   static/js/tooltipreplace.js


หมายเหตุ ::
1.สามารถเปลียนรูปได้ตามใจชอบ
2.เปลียนรูปแล้ว ควรปรับ width: xx px;  height: xx px;  xx คือตัวเลข

กด + ให้สักนิดแล้วจะนำของดีมาให้ใช้กัน

kanzayo

ขอบคุณค่ะ แต่รายละเอียดเยอะจัง

dulyarut

ขอบคุณ                        

cyberblack

ผมไม่ชอบเล้ย.. รายละเอียดเยอะๆ เนี้ย -*-
แต่ก็ขอบคุณครับ

bombbnut

ขอบคุณค่ะ คุณพี่นี่ใจดีจังเลยนะค่ะ วันนี้หนูสิงบอร์ดนี้ทั้งวัน ได้ไรจากกระทู้ที่พี่ตั้งเยอะเลย
อิอิ แต่บางอันหนูก็ใส่ไม่ได้อ่า T^T

kangpla

ดูหน่อยยยนะ

nanglovepoy

กฏมีไว้แหก! ท่ามันไม่แจก ก็แจกเองแม่.งเลย หยามคนแอบใช้!  <<< คำนี้ ถูก จัย

camfrog24

ขอบคุณมากคร้าฟฟฟฟฟฟ

kaiaoo

ขอบคุณ ครับเดี่ยวว่างๆจะลองทำดู นะ

doodle

มันคืออะไรหว่า