9/23 08'
這其中,目錄以清單方式呈現,完整語法為:
首先,把 slidemenu.js 和 slidemenu.css 連結到文件中,目錄以清單設計,注意事項有:
經網友 CANDY 建議,目前版本可以自動展開,修正的語法,已經在前述中提及,自動展開語法,可能的問題有:
這段程式方便的地方,在於套用不同 CSS 就可以把垂直的目錄換成水平目錄,例如:
喜歡,就下載去用吧!
相容:
註:
同意轉載,不過麻煩看一下轉載需知
Phoenix 2011/9/6 下午 03:07:00
更正 ...
剛剛的 $.query.copy().toLowerCase(); 要toString()
$.query.copy().toString().toLowerCase() 才對
或者 手工寫 用 location.search.toLowerCase()也是可以
Phoenix 2011/9/6 下午 02:54:00
Query String 解決方案:
目前是用Jquery 的Plugin 來解決這個問題
Include 這個檔案
<script src="Scripts/jquery.query-2.1.7.js" type="text/javascript"></script>
再把
var currentLink = (_slideMenu_isIE) ? window.location.toString().toLowerCase() : window.location.pathname.toString().toLowerCase();
改成
var currentLink = (_slideMenu_isIE) ? window.location.toString().toLowerCase() + $.query.copy().toLowerCase() : window.location.pathname.toString().toLowerCase() + $.query.copy().toLowerCase();
問題就解決了 ...
Rita 2011/8/26 上午 10:49:00
您好,如果想再做第三層應該在哪修改呢 ^^?
sean 2011/6/14 上午 12:14:00
卜大,水平式的目錄,如果指向而未點連結
似乎有縮不回去的問題
sean 2011/6/6 上午 03:19:00
卜大,謝謝您,拿碼來用了
克特 2011/3/30 上午 12:04:00
有了....
我看到了狸貓的問題
還有老師給的解答...
可以了>m<
克特 2011/3/28 下午 10:32:00
我快要瘋掉了.....
要怎麼樣才能像 老師 左邊的選單一樣
滑鼠經過 就變另一張圖片
我對CSS部分不熟
該怎樣調整也不清楚
到處爬文...沒一個有用的>m<
shawkai 2011/2/16 下午 10:22:00
卜老師:您好
我是攝影工作者,對網頁語法不太熟悉,前幾天利用滑動目錄語法試做一些頁面,因某些原因第一頁和後續的若干頁並不在同一層檔案夾,因此發生一些問題,第一頁可以連結後續的若干頁,但這些後續頁面卻無法反向連結到第一頁滑動出來的子目錄。
目前是暫時連結主目錄,當然感到有缺憾,主目錄網址是http://www.sk360vr.com/cckg/c50.htm
後續為http://www.sk360vr.com/cckg/cckg-50/c50-1.htm等等。希望能得到您的回答,謝謝
shawkai 2011/2/16 下午 10:15:00
卜老師:您好
我有問題卻無法送出,是有否字數限制
麗娟 2011/1/15 下午 04:07:00
下載需要解壓密碼嗎?上面顯示的密碼都打不開~~~新手上路請多指教!!謝謝...
阿銫 2011/1/4 上午 10:32:00
你好,我是'重新認識javascript'的讀者
因為書中遇到了一個問題,找不到此站發問的地方,
所以來JS區發問,請見諒..
如果影響了此篇可自刪沒關係:)
------以下------
書中第二章技術篇後面的綜合練習 Question8 (頁數:2-128)
答案其中一行: document.write(na.sort(compare));
的na.sort(compare)我還是不明白他的原理
麻煩你了,謝謝!
azan 2010/12/7 下午 07:28:00
目前經測試
好像網址後面有接參數就無法自動展開了
請問有辦法修改嗎
謝謝
james 2010/5/7 下午 02:30:00
單獨show menu.html 是正常顯示
但是把code 貼進是以框架顯示的頁面裡
就不正常了
james 2010/5/7 下午 01:49:00
卜老師,你好
請問一下為什麼用firefox顯示是正常的
用ie8 則顯示為自動展開而且無法收納呢?
Minori 2010/4/24 上午 02:48:00
老師您好!
我試了很多次才發現原來我的開頭跟您的範例不太一樣
您原始的是有
<!DOCTYPE html PUBLIC "-....">
<html xmlns="....">
請問上面那兩行我可以拿來使用嗎!?
如果不行,但又一定要放那兩行才能成功執行
那我該怎麼辦呢!?
yoyo 2010/4/12 下午 06:31:00
因為我有看到某些針對png的東西會導至jquery沒有辦法選到div內的元素
想說這邊建議不要用的原因是什麼
謝謝你的回答
我還是不要管ie6好了
卜維丰 2010/4/6 下午 02:59:00
yoyo, unitpngfix.js 修正到什麼情況
我還不太清楚
大多修正 IE6 PNG 的程式
對於 PNG 用在背景是沒有辦法的
ie7.js 可以, 但有規定檔名
我的建議就是"別管IE6用戶"
真要管, 就別用半透明
yoyo 2010/4/6 上午 09:51:00
不好意思請問一下,
千萬千萬在別子目錄背景放半透明 png 檔
是千萬不要用這種方式嗎
因為我現在要處理png在ie6的問題 不知道unitpngfix.js到底可不可以用
謝謝~~~
elain 2010/3/29 下午 05:28:00
好的,感謝卜老師。因本身是網頁設計師,對於程式部分較陌生,希望至少可以看得懂哪一段程式可以執行哪一些動作,所以才冒昧的請教,感謝您的回覆
卜維丰 2010/3/29 下午 01:30:00
elain, 你先研究看看, 有那裡看不明白的, 再提出來討論
卜維丰 2010/3/29 下午 01:29:00
elain,程式不太難, 但解釋起來有點囉嗦,以下是 prototype 用途
init:初值化
highlight:高亮度顯示作用中的連結
slide:滑動動作執行判定
expandMenu:展開目錄
collapseMenu:收合目錄
collapseOther:收合所有已展開的目錄
expandCurrentLink沒用,本來有別的用途
最重要的是, 要先能在不加 javascript 動作時, 目錄套用 CSS 後能有指定樣式
再加入 javascript 控制項
主要的概念就是
1.要知道目錄在 expand 的狀態下有多高
2.點選目錄後判定展開或收合
3.自訂展開或收合每次位移大小, 再使用 setInterval 執行滑動, 展開到指定高度, 或收合至高度 0
elain 2010/3/29 下午 12:36:00
卜老師您好,想進一步研究,不知道您是否方便提供slidemenu.js的程式註解呢?非常感謝
amy 2010/3/13 下午 10:39:00
謝謝老師的分享...
杯麵 2010/3/2 下午 04:31:00
卜老師您好
看到您這網站左邊的主選單
點選A選項之後還是可以停留在開啟後並在A選項上有色塊標示的畫面
想請問這是用何種方式做成的?
我本身是將選單(也是用jacascript)製作在一個menu.asp
然後再用include包含在每一頁當中
不過每次點選後跳到別頁面後主選單都會恢復成預設狀態
煩請老師指點解決方式,謝謝您。
小倫 2010/1/24 下午 05:05:00
我使用老師的垂直式選單,發現它會被穿透,如何解決呢?還有我把語法放在php裡會出現問題,可否幫我編成php語法呢?
justin 2010/1/13 下午 06:04:00
老師, 我想在Menu1前面加個小圖檔, 展開Menu1時變換成另一個圖, 縮合後又回到原來的圖, 程式要怎麼修改?
貍貓 2009/11/22 下午 11:55:00
恩恩 我弄出來了 謝謝>o<
tommy 2009/11/7 下午 06:34:00
老師
感謝您提供這麼漂亮的SlideMenu
請問我使用在側選單的時候
有時候子選項的最後一個項目
都會出現不完整
會被擋掉一部份
沒有完全下拉到定位
請問這有可能是什麼原因呢?
謝謝
卜維丰 2009/10/30 下午 03:41:00
貍貓 ,
找到 CSS, 把 #??? span 自設 span:hover 就可以了
sea222321 2009/10/29 下午 01:54:00
Hello~
想請問一個暫存檔的問題
使用的語言是 Java Script
問題如下:
當使用者寫入第一筆資料後
要如何將第一位使用者曾寫入的資料清除
好讓第二位使用者可以將他所需要的資料讀取進去,而不是讀取到第一位使用者的資料
可以提供語法或範例嗎?
感恩!!
若可以的話,希望我們可以用信箱來聯絡
信箱:sea_222321@hotmail.com
貍貓 2009/10/23 下午 04:01:00
您好
我想請問您
要如何把標題的那個button
rollover的時候 更改背景圖案
就像您網站左邊的menu那樣 滑鼠移上去標題 標題的背景圖就會更改
我用CSS 的a,a:link,a:visited, a:hover做 可是他會出不來
謝謝
卜維丰 2009/9/14 上午 11:51:00
joe, 你是指左邊多元服務那裡嗎?
是的話, 那可以叫作 tooltips
關鍵字 javascript tooltips 會有很多現成範例
joe 2009/9/11 下午 10:33:00
卜老師您好
抱歉我沒說的很清處,就是我想做一個按下一個button後會自動產生一個div的框,此div的框中有很多項目(也由div組成),當我mouseover後div的項目後,會在右側在產生新的div框,算有點連動式Menu的覺..http://www.104.com.tw/
就有這樣類似的Menu
卜維丰 2009/9/11 下午 03:30:00
joe, 什麼是類別連動式Menu Bar ? 你指那個位置?
joe 2009/9/11 上午 12:35:00
親愛的卜老師您好
我最近看到http://www.104.com.tw/ 跟 http://www.yes123.com.tw/ 首頁有一個類別連動式Menu Bar 如果要用document.createElement("div")來自動生成,請問老吃師有寫過相關的範例嗎? 我很想知道這怎作到的....
卜維丰 2009/8/18 下午 05:59:00
鮪魚, 把 utf-8 BOM 拿掉試試~~^^
steven 2009/8/14 上午 11:21:00
關於submenu並不會自動關閉的問題,我try出一個"偷吃步"的方法,就是在submenu所在位置的下層設定 onmouseover 時,去關閉所有打開的submenu,若擔心browser太忙,可以設定一個變數去檢查,這樣就可以work了.
另大師您提到的timeout,是要在那邊設定,可以說明一下嗎?謝謝!!
鮪魚 2009/8/12 下午 05:46:00
版大~~有沒有 big5 的版本??
我用 utf-8 的會出現亂碼呢~
而且我自己全部重打...
結果不會動>_<
有沒有 big5 的版本呢?
卜維丰 2009/8/3 下午 03:20:00
steven, 這個情況目前沒解
原因是在清單中, 如果指定 onmouseout 時, li 和 ul 是不同物件, 所以操作時, 動不動就收起來
暫時的解決方式是設 timeout
steven 2009/7/31 下午 12:40:00
請問大師
我是採用水平模式的主menu,handler是mouseover,我發現一個問題,就是當滑鼠離開submenu時,submenu並不會關閉,除非再將滑鼠移到主menu的某一個項目上,請問這個問題有辦法解決嗎?謝謝....
卜維丰 2009/7/27 下午 06:37:00
ssea, 如果我沒記錯, 這個例子沒有第二層, 不停收起來展開, browser 會瘋掉~~^^
ssea 2009/7/8 下午 03:40:00
請問水平選單有辦法做到第二層嗎????有點急需要,請問能不能提供,謝謝.....
Tina 2009/6/26 下午 04:23:00
請問老師,
可否把這個擴充為超過兩層以至於無限層?
alex 2009/6/17 上午 12:14:00
謝謝卜老師的詳細教學~ 趕快來試試看~
cindy 2009/5/26 下午 05:05:00
卜老師您好:
在您的範例中,看到網頁一開始load,就可以看到第一個展開,但是我套用的卻不會~全部都是收起來的狀態~不知道是那裡有錯誤呢??
Jill 2009/3/3 下午 02:11:00
卜大師你好,
我是用大師的水平目錄,可是在滑鼠從main滑動到要點選link那邊,下拉式選單有時候會不見,不太容易點到ㄟ,請問這要怎麼改善呢?
dwjum 2008/12/29 上午 11:48:00
想向老師請教一下,這個SlideMenu是不是再有使用ie7js的時候會有問題呢?我試了好久一直搞不定耶...
ie7js的網址在這
http://code.google.com/p/ie7-js/
卜維丰 2008/9/25 下午 03:34:00
CANDY, 感謝妳提醒我有關現有左側目錄中,部份連結無法記憶並自動展開,現在這個範例,我修正了,已經具備自動記憶連結並自動展開的功能,笑納!
卜維丰 2008/9/25 下午 12:30:00
CANDY, 還好你有補充, 不然我可想破頭
是這樣的, 自動展開那段 function , 我並沒有寫在 onload 裡, 而是在文件尾端執行, 並不是每一份文件都有執行
不過經你提醒, 我現在修正了, 謝謝
CANDY 2008/9/25 上午 02:28:00
不好意思,補充如下喲:
CSS->入門講義(11)常用在網際排版中的屬性
->入門講義(10)特殊效果
->入門講義(9)圖層重疊效果
->入門講義( 8 )宣告圖層
這些變色對了 但是會展開"版主"那一欄
AJAX ->解決 AJAX 一定會遇到的 90 個問題目錄
JavaScript->重新認識 Javascript, 板主最新力作
版主 ->書籍出版
->專案設計
->留言/討論
->轉載需知
這些都無法記憶
CANDY 2008/9/25 上午 12:48:00
您好,我使用的是 Firefox/3.0.1版本,無安裝任何插件,是否我們版本有差異,或者您有安裝其他插件呢?
卜維丰 2008/9/24 下午 01:28:00
CANDY, 是這樣嗎? 我在不同電腦, 不同瀏覽器測試, 應該都沒問題才是
CANDY 2008/9/24 下午 01:18:00
您好,再次請教一下,左邊的MENU在IE是有記憶的,但在FIREFOX就不適用了....請問有適合於FIREFOX的語法嗎?
卜維丰 2008/9/24 上午 12:15:00
CANDY, 妳指的是這個目錄吧?
這個範例目前不具備可以知道剛才按了那個連結, 到了下一頁, 自動展開
要作的話, 要加些東西, 例如我左邊的目錄, 就有記憶功能, 不過, 由於套用不是這麼方便, 我一直沒有公布作法, 最近才整理了這組容易套用的組件出來
卜維丰 2008/9/24 上午 12:12:00
朵拉, 你指的是不是不要寫在 <body> 裡?
如果是的話, 在 Javascript 中, 以下面語法
onload=程式名;程式名; 即可
在 FireFox 中, 可以用
onload+=程式名;
把新的程式加進去
在 IE 就要改改方法, 用
window.attachEvent('onload',程式名);
但是呢... 若你這啟動內容, 有參數要傳遞的話, 還是放在 <body> 裡會方便點
CANDY 2008/9/23 下午 11:12:00
請問哪個menu語法 不管點入網站裡的哪個頁面 都會記憶上一頁 某個menu展開的方式嗎
朵拉 2008/9/23 下午 06:37:00
親愛的卜老師您好
我遇到一個JS的問題
像是這個測試網頁
原始碼
<script src="paged_menu/paged_menu.js" type="text/javascript"></script>
</head>
<body onload="clickMenu('menu')">
我該如何把body 跟onload 分隔開來呢?
查到資料知道onload是把所有網站資料都跑完才秀出這個程式碼~~但卻不知道該怎麼把他們分隔開來~~~
謝謝老師~~~~