以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

Javascript 滑動目錄 SlideMenu

9/23 08' icon

這個會平滑展開和收合的目錄,純粹使用 Javascript 搭配 CSS 完成,成品如下:
  1. Main 1
  2. Main 2
  3. Main 3
  4. Main 4
  5. Main 5
  6. Main 6

這其中,目錄以清單方式呈現,完整語法為:

首先,把 slidemenu.js 和 slidemenu.css 連結到文件中,目錄以清單設計,注意事項有:

經網友 CANDY 建議,目前版本可以自動展開,修正的語法,已經在前述中提及,自動展開語法,可能的問題有:

這段程式方便的地方,在於套用不同 CSS 就可以把垂直的目錄換成水平目錄,例如:

  1. Main 1
  2. Main 2
  3. Main 3
  4. Main 4
 

喜歡,就下載去用吧!

相容:FireFox Chrome Opera Safari IE7

download

註:

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

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是把所有網站資料都跑完才秀出這個程式碼~~但卻不知道該怎麼把他們分隔開來~~~
謝謝老師~~~~

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: