誰能幫忙改成互動選單

[coolch]

...剛看到這套工具有支援iPad耶...
http://www.sothink.com/page/drop-dow...-down-menu.htm

...希望有幫到您的忙...

感謝大家幫忙，吉米晚點來研究

[chenagw]

http://vawidea.com/lab/menu/

選單已經利用iOS特有的touch指令做簡單的優化了，
mouseover及touch同時支援，
也做下拉了，給吉米大參考。

touch指令列表：
ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);"
ontouchend="touchEnd(event);"
ontouchcancel="touchCancel(event);"

可參考:
http://developer.apple.com/library/s...TP40006511-SW7

[kungweiren]

太棒啦，慢慢來，我去做可能要花更多時間研究，上次有研究一個superfish的
http://users.tpg.com.au/j_birch/plug...etting-started

效果比較像是他這個範例EXAMPLE中的NAV-BAR的樣式

有看沒有懂...呵呵

這我套過

[qqbymark]

http://vawidea.com/lab/menu/

選單已經利用iOS特有的touch指令做簡單的優化了，
mouseover及touch同時支援，
也做下拉了，給吉米大參考。

touch指令列表：
ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);"
ontouchend="touchEnd(event);"
ontouchcancel="touchCancel(event);"

可參考:
http://developer.apple.com/library/s...TP40006511-SW7

1.第二層選單,一打開就會把下方的資料往下推,可能要設定一下圖層的位置
2.第二層選單打開後的收合問題,直式選單如果太長反而會擋住頁面資訊.

[吉米丘]

阿，看吧，吉米繞一圈回來又是幾週過去了

目前看來往下伸展不適合

上面夥伴分享的這個，比較貼近現狀
http://qqbymark.mysinamail.com/test.html

我來研究看看

[newyorkla]

如果您說的是所謂的 dropdown menu (下拉式選單)

這是我幾年前寫的.. 我把codes 直接post上來.. 歡迎直接套用:

----- javascript 部份 -----
var timetoclose = 500; // dropdown menu 的自動關閉計時 (0.5秒)
var timer = ''; // 計時器物件
var ddobj = ''; // dropdown menu 物件

/**
* 關掉 計時器.
*/
function canceltimer() {
if (timer) {
window.clearTimeout(timer);
timer = null;
} // if (timer)
}

/**
* 開啟關閉 dropdown menu 計時器.
*/
function starttimer() {
timer = window.setTimeout(ddclose, timetoclose);
}

/**
* 將已打開的dropdown menu 隱藏
*/
function ddclose() {
if (ddobj)
ddobj.style.display = 'none';
}

/**
* 打開指定的 drop down menu.
* *param idmenu 主要的目錄名稱的 div 的 id
* *param iddiv 有 dropdown menu 的 div 的 id
*/
unction dropmenu(idmenu, iddiv) {
// cancel close timer
canceltimer();

// close old layer
if(ddobj)
ddobj.style.display = 'none';

idobj = document.getElementById(idmenu);
x = findPosX(idobj);
y = findPosY(idobj);

//alert("x,y = " + x + "," + y);
// get new layer and show it
ddobj = document.getElementById(iddiv);
ddobj.style.display = 'inline';

ddobj.style.top = y + 20;
ddobj.style.left = x;
}

/**
* 找出物件在瀏覽器上位置座標的 x 值.
* *param obj 要尋找的物件
*/
function findPosX(obj) {
var curleft = 0;
if(obj.offsetParent)
while(1) {
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}

/**
* 找出物件在瀏覽器上位置座標的 y 值.
* *param obj 要尋找的物件
*/
function findPosY(obj) {
var curtop = 0;
if(obj.offsetParent)
while(1) {
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}

document.onclick = ddclose;
// 加這一行後, 只要點在非 dropdown menu 的地方
// dropdown menu 也會關閉

//--------- html 部份 --------
<!-- 主選單 -->
<span id="aboutfond" name="aboutfond" class="marg10RBR" onmouseover="dropmenu('aboutfond', 'fondmenu')" onmouseout="starttimer()"><a href="aboutfond.html">我喜歡的項目</a></span>

<!-- drop down menu 部份 -->
<!-- class='ddmenu' 中用 css 將這個 div 隱藏, 直到被呼叫才定位並顯現 -->
<div class="ddmenu" id="fondmenu" name="fondmenu" onmouseover="canceltimer()" onmouseout="starttimer()">
<a href="goto1.php" onclick='goFund()'>選項 1</a> <br>
<a href="#" onclick='goFund()'>選項 2</a> <br>
<a href="#" onclick='goFund2()'>選項 3</a> <br>
<a href="#" onclick='goFund3()'>選項 4</a> <br>
<a href="#" onclick='goFund4()'>選項 4</a>
</div>

註: 如果要使用固定的兩行 menu 這組 codes 稍做修改也可以做

[吉米丘]

如果您說的是所謂的 dropdown menu (下拉式選單)

這是我幾年前寫的.. 我把codes 直接post上來.. 歡迎直接套用:

-

註: 如果要使用固定的兩行 menu 這組 codes 稍做修改也可以做

感謝分享，因為分類下面還有分類，所以還是得用現行2行的方式來進行，甚至有些還多達三行

感謝您的分享，我來研究code一下