ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: นิติพงษ์ ที่ 28 กุมภาพันธ์ 2011, 11:51:14


หัวข้อ: ช่วยด้วยครับ...css + jquery
เริ่มหัวข้อโดย: นิติพงษ์ ที่ 28 กุมภาพันธ์ 2011, 11:51:14
 :wanwan017:
รบกวนดูติวเตอร์นี้ให้หน่อยครับ http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/
เเบบว่าต้องการดัดเเปลงให้ submenu มันโชว์เลย ไม่ต้องซ่อน
เเบบในภาพที่ผมทําไว้ นี้ครับ
(http://img691.imageshack.us/img691/9954/cssmenu.jpg)

หัวข้อ: Re: ช่วยด้วยครับ...css + jquery
เริ่มหัวข้อโดย: jdseo ที่ 28 กุมภาพันธ์ 2011, 11:53:08
display:block; ครับ ง่ายนิดเดียว...แต่ยากเยอะ..อิอิ ล้อเล่นนะครับ

หัวข้อ: Re: ช่วยด้วยครับ...css + jquery
เริ่มหัวข้อโดย: bonshington ที่ 28 กุมภาพันธ์ 2011, 23:53:14
โค๊ด:
ต้นฉบับ
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
 $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
 $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
 $(this).css({ 'background' : 'none'}); //Ditch the background
 $(this).find("span").hide(); //Hide the subnav
});

});

ถ้าจะเอา li อันไหน ก็ใส่ id="pre_show" ลงไป
โค๊ด:
<li id="pre_show">

จากนั้น เอาอันนี้ไปต่อท้าย script
โค๊ด:
$(document).ready(function() {
 $("#pre_show").hover();
});

หัวข้อ: Re: ช่วยด้วยครับ...css + jquery
เริ่มหัวข้อโดย: นิติพงษ์ ที่ 03 มีนาคม 2011, 19:57:05
อ้างจาก: bonshington ที่ 28 กุมภาพันธ์ 2011, 23:53:14
โค๊ด:
ต้นฉบับ
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
 $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
 $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
 $(this).css({ 'background' : 'none'}); //Ditch the background
 $(this).find("span").hide(); //Hide the subnav
});

});

ถ้าจะเอา li อันไหน ก็ใส่ id="pre_show" ลงไป
โค๊ด:
<li id="pre_show">

จากนั้น เอาอันนี้ไปต่อท้าย script
โค๊ด:
$(document).ready(function() {
 $("#pre_show").hover();
});

ขอบคุงครับ +1
แต่ยังไม่ได้ครับ
เเท็บสีฟ้ามันยังไม่โชว์ ต้องการให้มันโชว์ถาวร
ไม่ต้องซ่อนหรือ hover อ่าครับ

หัวข้อ: Re: ช่วยด้วยครับ...css + jquery
เริ่มหัวข้อโดย: yoyokung ที่ 03 มีนาคม 2011, 20:05:12
แล้วมันมีหลายแถบคุณต้องการอย่างไรครับ

แบบว่า โชว์ตลอด แต่พอวางเม้าส์แล้วให้สลับเหมือนปกติ

หัวข้อ: Re: ช่วยด้วยครับ...css + jquery
เริ่มหัวข้อโดย: bonshington ที่ 03 มีนาคม 2011, 22:14:24
ต้นฉบับ
โค๊ด:
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
 $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
 $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
 $(this).css({ 'background' : 'none'}); //Ditch the background
 $(this).find("span").hide(); //Hide the subnav
});

});

โค๊ด:
$(document).ready(function() {

// แก้ code ให้โชว์ตลอด
$("ul#topnav li").mouseenter(function() { //Hover over event on list item
 var li = $(this);
 li.parent().children("li").find("span").hide();
 var span = li.find("span");
 span.css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
 span.show(); //Show the subnav
};

// สั่งให้ตัวแรก โชว์
$("ul#topnav li:first").mouseenter();
// หรือ
//$("ul#topnav li#preshow").mouseenter();

});

ใช้ mouse enter ดีกว่า hover เพราะ hover มันจะ trigger ถี่ๆ ในขณะที่ mouse ลอยทับอยู่
ส่วน mouseenter จะ trigger ครั้งเดียวคือ เมื่อ ทouse เข้า


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com