ต่อไป »

[นิติพงษ์]

 
รบกวนดูติวเตอร์นี้ให้หน่อยครับ http://www.sohtanaka.com/web-d...ontal-sub-nav-with-css-jquery/
เเบบว่าต้องการดัดเเปลงให้ submenu มันโชว์เลย ไม่ต้องซ่อน
เเบบในภาพที่ผมทําไว้ นี้ครับ

[jdseo]

display:block; ครับ ง่ายนิดเดียว...แต่ยากเยอะ..อิอิ ล้อเล่นนะครับ

[bonshington]

โค๊ด:

ต้นฉบับ
$(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();
});

[นิติพงษ์]

โค๊ด:

ต้นฉบับ
$(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 อ่าครับ

[yoyokung]

แล้วมันมีหลายแถบคุณต้องการอย่างไรครับ

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

[bonshington]

ต้นฉบับ

โค๊ด:

$(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 เข้า