[HTML + CSS + JS] เมนูลัด ดิสคัส ปรับแต่งเพิ่มเติมได้
แก้ไขครั้งสุดท้ายโดย -xSoMax- เมื่อ 2012-1-8 16:55http://image.free.in.th/z/iu/80566674.jpg
เพือนๆสังเกตมุมซ๊ายจะมีปุมขึ้นมา ให้กด!
เปิดไพล์footer.htm template\สกินที่ใช้\common\footer.htm
ค้นหา <!--{eval updatesession();}-->
<!--{if $_G['uid'] && $_G['group']['allowinvisible']}-->
<script type="text/javascript">
var invisiblestatus = '<!--{if $_G['session']['invisible']}-->{lang login_invisible_mode}<!--{else}-->{lang login_normal_mode}<!--{/if}-->';
var loginstatusobj = $('loginstatusid');
if(loginstatusobj != undefined && loginstatusobj != null) loginstatusobj.innerHTML = invisiblestatus;
<!--{/if}-->
</script>เพิ่มโค๊ดต่อจากข้างบน
<style type="text/css">
a.tooltip span {display:none; padding:1px 1px; margin-center:1px; width:35px;}
a.tooltip:hover span{display:inline; position:absolute; right:27px; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; text-align:center;}
</style>
<script language="JavaScript" type="text/javascript" src="static/js/tooltipreplace.js"></script>
<div id="toHome" > <a class="tooltip" href="#" target="_blank"> <span><font size="1">หน้าแรก</font></span></a></div>
<div id="toDotnet"> <a class="tooltip" href="#" target="_blank"> <span><font size="1">ดอทเนต</font></span></a></div>
<div id="toSearch"> <a class="tooltip" href="#" target="_blank"> <span><font size="1">ค้นหา</font></span></a></div>
<div id="toAsk"> <a class="tooltip" href="#" target="_blank"> <span><font size="1">ตั้งกระทู้</font></span></a></div>
<div id="toFacebook"> <a class="tooltip" href"#" target="_blank"> <span><font size="1">เฟรสบุ๊ค</font></span></a></div>
<div id="toReload"> <a class="tooltip" href="javascript:window.location.reload();"> <span><font size="1">รีเฟรช</font></span></a></div>
<div id="toTop"> <a class="tooltip" href="#"> <span><font size="1">บนสุด</font></span></a></div>
<script type="text/javascript"><!-- // --><![CDATA[
var $top = jQuery.noConflict();
$top(function() {
$top(window).scroll(function() {
if($top(this).scrollTop() != 10) {
$top('#toTop').fadeIn();
}else{
$top('#toTop').fadeOut();
}
});
$top('#toTop').click(function() {
$top('body,html').animate({scrollTop:0},700);
});
});
// ]]>
</script>
<div id="toRadio"> <a class="tooltip" href="#"> <span><font size="1">ฟังเพลง</font></span></a></div>
<script type="text/javascript"><!-- // --><![CDATA[
var $chat = jQuery.noConflict();
$chat(function() {
$chat(window).scroll(function() {
if($top(this).scrollTop() != 10) {
$chat('#toRadio').fadeIn();
}else{
$chat('#toRadio').fadeOut();
}
});
$chat('#toRadio').click(function() {
$chat('body,html').animate({scrollTop:910},700);
});
});
// ]]>
</script>
<div id="toChat"> <a class="tooltip" href="#"> <span><font size="1">สนทนา</font></span></a></div>
<script type="text/javascript"><!-- // --><![CDATA[
var $chat = jQuery.noConflict();
$chat(function() {
$chat(window).scroll(function() {
if($top(this).scrollTop() != 10) {
$chat('#toChat').fadeIn();
}else{
$chat('#toChat').fadeOut();
}
});
$chat('#toChat').click(function() {
$chat('body,html').animate({scrollTop:1440},700);
});
});
// ]]>
</script>
<div id="toDown"> <a class="tooltip" href="#"> <span><font size="1">ล่างสุด</font></span></a></div>
<script type="text/javascript"><!-- // --><![CDATA[
var $down = jQuery.noConflict();
$down(function() {
$down(window).scroll(function() {
if($top(this).scrollTop() != 10) {
$down('#toDown').fadeIn();
}else{
$down('#toDown').fadeOut();
}
});
$down('#toDown').click(function() {
$down('body,html').animate({scrollTop:7000},700);
});
});
// ]]>
</script>หมายเหตุ :: สามารถปรับแต่งเพิ่มเองได้หรือเปลียนปุ่มต่างๆได้
เปิดไพล์common.csstemplate\สกินที่ใช้\common\common.css
เพิ่มโค๊ดไว้ด้านล่างสุด
#toTop {
background: url("{IMGDIR}/top.png") repeat scroll 0 0 transparent;
bottom: 365px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toHome {
background: url("{IMGDIR}/home.png") repeat scroll 0 0 transparent;
bottom: 325px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toDotnet {
background: url("{IMGDIR}/change.png") repeat scroll 0 0 transparent;
bottom: 285px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toRadio {
background: url("{IMGDIR}/radio.png") repeat scroll 0 0 transparent;
bottom: 245px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toChat {
background: url("{IMGDIR}/chat.png") repeat scroll 0 0 transparent;
bottom: 205px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toSearch {
background: url("{IMGDIR}/search.png") repeat scroll 0 0 transparent;
bottom: 165px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toAsk {
background: url("{IMGDIR}/ask.png") repeat scroll 0 0 transparent;
bottom: 125px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toFacebook {
background: url("{IMGDIR}/facebook.png") repeat scroll 0 0 transparent;
bottom: 85px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toReload {
background: url("{IMGDIR}/reload.png") repeat scroll 0 0 transparent;
bottom: 45px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}
#toDown {
background: url("{IMGDIR}/down.png") repeat scroll 0 0 transparent;
bottom: 5px;
cursor: pointer;
height: 25px;
position: fixed;
right: 10px;
width: 25px;
}ไพล์รูป
เอาไพล์ไปไวที่ tooltipreplace.js static/js/tooltipreplace.js
http://image.free.in.th/z/iu/80566674.jpg
หมายเหตุ ::
1.สามารถเปลียนรูปได้ตามใจชอบ
2.เปลียนรูปแล้ว ควรปรับ width: xx px;height: xx px;xx คือตัวเลข
กด + ให้สักนิดแล้วจะนำของดีมาให้ใช้กัน
ขอบคุณค่ะ แต่รายละเอียดเยอะจัง ขอบคุณ ผมไม่ชอบเล้ย.. รายละเอียดเยอะๆ เนี้ย -*-
แต่ก็ขอบคุณครับ sm942dzsm942dzsm942dz ขอบคุณค่ะ คุณพี่นี่ใจดีจังเลยนะค่ะ วันนี้หนูสิงบอร์ดนี้ทั้งวัน ได้ไรจากกระทู้ที่พี่ตั้งเยอะเลย
อิอิ แต่บางอันหนูก็ใส่ไม่ได้อ่า T^T sm900dzsm900dzsm900dzsm900dz ดูหน่อยยยนะ กฏมีไว้แหก! ท่ามันไม่แจก ก็แจกเองแม่.งเลย หยามคนแอบใช้!<<< คำนี้ ถูก จัยsm954dz ขอบคุณมากคร้าฟฟฟฟฟฟ ขอบคุณ ครับเดี่ยวว่างๆจะลองทำดู นะ :victory: มันคืออะไรหว่า