我要建立一個有彈出式或下拉式功能選單之網頁,該用什麼設計工具? |
|
答題得分者是：pedro
|
|
ry_lee
高階會員   發表：368 回覆：251 積分：123 註冊：2002-03-19 發送簡訊給我 |
|
|
pedro
尊榮會員 發表：152 回覆：1187 積分：892 註冊：2002-06-12 發送簡訊給我 |
用css去定義li下拉行為
下面這段是由 http://forums.delphi-php.net/showthread.php?t=1132 抽離出來,可在IE7運行 在這裡可線上看效果http://demos.delphi-php.net/websitedemo/ 請全形轉為半形 ＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｈｔｍｌ４／ｌｏｏｓｅ．ｄｔｄ＂＞ ＜ｈｅａｄ＞ ＜ｔｉｔｌｅ＞無標題文件＜／ｔｉｔｌｅ＞ ＜！－－ ｗｉｄｔｈ：７５０ｐｘ； ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ：０ｐｘ；／＊２００ｐｘ；＊／ ／＊ ｒｅｍｏｖｅ ａｌｌ ｔｈｅ ｂｕｌｌｅｔｓ， ｂｏｒｄｅｒｓ ａｎｄ ｐａｄｄｉｎｇ ｆｒｏｍ ｔｈｅ ｄｅｆａｕｌｔ ｌｉｓｔ ｓｔｙｌｉｎｇ ＊／ ｐａｄｄｉｎｇ：０； ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｎｏｎｅ； ．ｍｅｎｕ ｕｌ ｕｌ ｛ ｝ ．ｍｅｎｕ ｌｉ ｛ ｗｉｄｔｈ：１５０ｐｘ； ｝ ．ｍｅｎｕ ａ， ．ｍｅｎｕ ａ：ｖｉｓｉｔｅｄ ｛ ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ； ｃｏｌｏｒ：＃ｆｆｆ； ｈｅｉｇｈｔ：３０ｐｘ； ｂｏｒｄｅｒ－ｗｉｄｔｈ：０ １ｐｘ １ｐｘ ０； ｐａｄｄｉｎｇ－ｌｅｆｔ：１０ｐｘ； ｝ ＊ ｈｔｍｌ ．ｍｅｎｕ ａ， ＊ ｈｔｍｌ ．ｍｅｎｕ ａ：ｖｉｓｉｔｅｄ ｛ ｗ￥ｉｄｔｈ：１３９ｐｘ； ／＊ ｓｔｙｌｅ ｔｈｅ ｓｅｃｏｎｄ ｌｅｖｅｌ ｂａｃｋｇｒｏｕｎｄ ＊／ ｂａｃｋｇｒｏｕｎｄ：＃９４９ｅ７ｃ； ／＊ ｓｔｙｌｅ ｔｈｅ ｓｅｃｏｎｄ ｌｅｖｅｌ ｈｏｖｅｒ ＊／ ｂａｃｋｇｒｏｕｎｄ：＃ｃ９ｂａ６５； ．ｍｅｎｕ ｕｌ ｕｌ ：ｈｏｖｅｒ ＞ ａ．ｄｒｏｐ ｛ ｝ ．ｍｅｎｕ ｕｌ ｕｌ ｕｌ ａ， ．ｍｅｎｕ ｕｌ ｕｌ ｕｌ ａ：ｖｉｓｉｔｅｄ ｛ ｝ ．ｍｅｎｕ ｕｌ ｕｌ ｕｌ ａ：ｈｏｖｅｒ ｛ ｝ ｂａｃｋｇｒｏｕｎｄ：＃ｂ２ａｂ９ｂ； ／＊ ｈｉｄｅ ｔｈｅ ｓｕｂ ｌｅｖｅｌｓ ａｎｄ ｇｉｖｅ ｔｈｅｍ ａ ｐｏｓｉｔｏｎ ａｂｓｏｌｕｔｅ ｓｏ ｔｈａｔ ｔｈｅｙ ｔａｋｅ ｕｐ ｎｏ ｒｏｏｍ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ； ｈｅｉｇｈｔ：０； ｌｅｆｔ：０； ｝ ＊ ｈｔｍｌ ．ｍｅｎｕ ｕｌ ｕｌ ｛ ｔ￥ｏｐ：３１ｐｘ； ／＊ ｐｏｓｉｔｉｏｎ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｆｌｙｏｕｔ ｍｅｎｕ ＊／ ｌｅｆｔ：１５０ｐｘ； ｗｉｄｔｈ：１５０ｐｘ； ／＊ ｐｏｓｉｔｉｏｎ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｆｌｙｏｕｔ ｍｅｎｕ ｆｏｒ ａ ｌｅｆｔ ｆｌｙｏｕｔ ＊／ ｌｅｆｔ：－１５０ｐｘ； ／＊ ｓｔｙｌｅ ｔｈｅ ｔａｂｌｅ ｓｏ ｔｈａｔ ｉｔ ｔａｋｅｓ ｎｏ ｐａｒｔ ｉｎ ｔｈｅ ｌａｙｏｕｔ － ｒｅｑｕｉｒｅｄ ｆｏｒ ＩＥ ｔｏ ｗｏｒｋ ＊／ ／＊ ｓｔｙｌｅ ｔｈｅ ｓｅｃｏｎｄ ｌｅｖｅｌ ｌｉｎｋｓ ＊／ ｂａｃｋｇｒｏｕｎｄ：＃ｄ４ｄ８ｂｄ； ｈｅｉｇｈｔ：ａｕｔｏ； ｐａｄｄｉｎｇ：５ｐｘ １０ｐｘ； ／＊ ｙｅｔ ａｎｏｔｈｅｒ ｈａｃｋ ｆｏｒ ＩＥ５．５ ＊／ ＊ ｈｔｍｌ ．ｍｅｎｕ ｕｌ ｕｌ ａ｛ ｗ￥ｉｄｔｈ：１２９ｐｘ； ／＊ ｓｔｙｌｅ ｔｈｅ ｔｏｐ ｌｅｖｅｌ ｈｏｖｅｒ ＊／ ｃｏｌｏｒ：＃ｆｆｆ； ｝ ｃｏｌｏｒ：＃ｆｆｆ； ｝ ．ｍｅｎｕ ｕｌ ｌｉ：ｈｏｖｅｒ ｕｌ， ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ； ／＊ ｋｅｅｐ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｈｉｄｄｅｎ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｎ ｆｉｒｓｔ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ； ／＊ ｋｅｅｐ ｔｈｅ ｆｏｕｒｔｈ ｌｅｖｅｌ ｈｉｄｄｅｎ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｎ ｓｅｃｏｎｄ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ； ／＊ ｍａｋｅ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｖｉｓｉｂｌｅ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｖｅｒ ｓｅｃｏｎｄ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ； ／＊ ｍａｋｅ ｔｈｅ ｆｏｕｒｔｈ ｌｅｖｅｌ ｖｉｓｉｂｌｅ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｖｅｒ ｔｈｉｒｄ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ； －－＞ ＜／ｈｅａｄ＞ ＜ｄｉｖ ｉｄ＝＂ｍａｉｎ＿ｄｉｖ＂＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝＂０＂ ｃｅｌｌｐａｄｄｉｎｇ＝＂０＂ ｃｅｌｌｓｐａｃｉｎｇ＝＂１＂ ｗｉｄｔｈ＝＂１００％＂＞ ＜ｔｒ＞＜ｔｄ ｉｄ＝＂ｔｄ＿ｔｒａｉｌ＂＞ＰＡＧＥ １＜／ｔｄ＞＜／ｔｒ＞ ＜／ａ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｈｏｍｅ．ｐｈｐ＂＞ＰＡＧＥＳ ＜ｕｌ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｐａｇｅ２．ｐｈｐ＂ ｔｉｔｌｅ＝＂＂＞ＰＡＧＥ ２＜／ａ＞＜／ｌｉ＞ ＜／ｌｉ＞＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｈｏｍｅ．ｐｈｐ＂＞ＭＯＲＥ ．．． ＜ｕｌ＞＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｃｏｎｔａｃｔ．ｐｈｐ＂ ｔｉｔｌｅ＝＂＂＞ＣＯＮＴＡＣＴ＜／ａ＞＜／ｌｉ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｈｔｔｐ：／／ｆｏｒｕｍｓ．ｄｅｌｐｈｉ－ｐｈｐ．ｎｅｔ＂＞ＤＥＬＰＨＩ－ＰＨＰ＜／ａ＞＜／ｌｉ＞＜／ｕｌ＞ ＜／ｄｉｖ＞＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞ ＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞ ＜／ｈｔｍｌ＞
編輯記錄
pedro 重新編輯於 2008-08-11 07:58:46， 註解 無‧
|
|
ry_lee
高階會員 發表：368 回覆：251 積分：123 註冊：2002-03-19 發送簡訊給我 |
pedro 你好:
謝謝你的答覆,但我看不太懂,我再問一問題,用記事本程式手工寫下拉式功能選單之網頁,容易嗎?有無範例可供參考? ===================引 用 pedro 文 章=================== 用css去定義li下拉行為 下面這段是由 http://forums.delphi-php.net/showthread.php?t=1132 抽離出來,可在IE7運行 在這裡可線上看效果http://demos.delphi-php.net/websitedemo/ 請全形轉為半形 ＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｈｔｍｌ４／ｌｏｏｓｅ．ｄｔｄ＂＞ ＜ｈｅａｄ＞ ＜ｔｉｔｌｅ＞無標題文件＜／ｔｉｔｌｅ＞ ＜！－－ ｗｉｄｔｈ：７５０ｐｘ； ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ：０ｐｘ；／＊２００ｐｘ；＊／ ／＊ ｒｅｍｏｖｅ ａｌｌ ｔｈｅ ｂｕｌｌｅｔｓ， ｂｏｒｄｅｒｓ ａｎｄ ｐａｄｄｉｎｇ ｆｒｏｍ ｔｈｅ ｄｅｆａｕｌｔ ｌｉｓｔ ｓｔｙｌｉｎｇ ＊／ ｐａｄｄｉｎｇ：０； ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｎｏｎｅ； ．ｍｅｎｕ ｕｌ ｕｌ ｛ ｝ ．ｍｅｎｕ ｌｉ ｛ ｗｉｄｔｈ：１５０ｐｘ； ｝ ．ｍｅｎｕ ａ， ．ｍｅｎｕ ａ：ｖｉｓｉｔｅｄ ｛ ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ； ｃｏｌｏｒ：＃ｆｆｆ； ｈｅｉｇｈｔ：３０ｐｘ； ｂｏｒｄｅｒ－ｗｉｄｔｈ：０ １ｐｘ １ｐｘ ０； ｐａｄｄｉｎｇ－ｌｅｆｔ：１０ｐｘ； ｝ ＊ ｈｔｍｌ ．ｍｅｎｕ ａ， ＊ ｈｔｍｌ ．ｍｅｎｕ ａ：ｖｉｓｉｔｅｄ ｛ ｗ￥ｉｄｔｈ：１３９ｐｘ； ／＊ ｓｔｙｌｅ ｔｈｅ ｓｅｃｏｎｄ ｌｅｖｅｌ ｂａｃｋｇｒｏｕｎｄ ＊／ ｂａｃｋｇｒｏｕｎｄ：＃９４９ｅ７ｃ； ／＊ ｓｔｙｌｅ ｔｈｅ ｓｅｃｏｎｄ ｌｅｖｅｌ ｈｏｖｅｒ ＊／ ｂａｃｋｇｒｏｕｎｄ：＃ｃ９ｂａ６５； ．ｍｅｎｕ ｕｌ ｕｌ ：ｈｏｖｅｒ ＞ ａ．ｄｒｏｐ ｛ ｝ ．ｍｅｎｕ ｕｌ ｕｌ ｕｌ ａ， ．ｍｅｎｕ ｕｌ ｕｌ ｕｌ ａ：ｖｉｓｉｔｅｄ ｛ ｝ ．ｍｅｎｕ ｕｌ ｕｌ ｕｌ ａ：ｈｏｖｅｒ ｛ ｝ ｂａｃｋｇｒｏｕｎｄ：＃ｂ２ａｂ９ｂ； ／＊ ｈｉｄｅ ｔｈｅ ｓｕｂ ｌｅｖｅｌｓ ａｎｄ ｇｉｖｅ ｔｈｅｍ ａ ｐｏｓｉｔｏｎ ａｂｓｏｌｕｔｅ ｓｏ ｔｈａｔ ｔｈｅｙ ｔａｋｅ ｕｐ ｎｏ ｒｏｏｍ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ； ｈｅｉｇｈｔ：０； ｌｅｆｔ：０； ｝ ＊ ｈｔｍｌ ．ｍｅｎｕ ｕｌ ｕｌ ｛ ｔ￥ｏｐ：３１ｐｘ； ／＊ ｐｏｓｉｔｉｏｎ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｆｌｙｏｕｔ ｍｅｎｕ ＊／ ｌｅｆｔ：１５０ｐｘ； ｗｉｄｔｈ：１５０ｐｘ； ／＊ ｐｏｓｉｔｉｏｎ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｆｌｙｏｕｔ ｍｅｎｕ ｆｏｒ ａ ｌｅｆｔ ｆｌｙｏｕｔ ＊／ ｌｅｆｔ：－１５０ｐｘ； ／＊ ｓｔｙｌｅ ｔｈｅ ｔａｂｌｅ ｓｏ ｔｈａｔ ｉｔ ｔａｋｅｓ ｎｏ ｐａｒｔ ｉｎ ｔｈｅ ｌａｙｏｕｔ － ｒｅｑｕｉｒｅｄ ｆｏｒ ＩＥ ｔｏ ｗｏｒｋ ＊／ ／＊ ｓｔｙｌｅ ｔｈｅ ｓｅｃｏｎｄ ｌｅｖｅｌ ｌｉｎｋｓ ＊／ ｂａｃｋｇｒｏｕｎｄ：＃ｄ４ｄ８ｂｄ； ｈｅｉｇｈｔ：ａｕｔｏ； ｐａｄｄｉｎｇ：５ｐｘ １０ｐｘ； ／＊ ｙｅｔ ａｎｏｔｈｅｒ ｈａｃｋ ｆｏｒ ＩＥ５．５ ＊／ ＊ ｈｔｍｌ ．ｍｅｎｕ ｕｌ ｕｌ ａ｛ ｗ￥ｉｄｔｈ：１２９ｐｘ； ／＊ ｓｔｙｌｅ ｔｈｅ ｔｏｐ ｌｅｖｅｌ ｈｏｖｅｒ ＊／ ｃｏｌｏｒ：＃ｆｆｆ； ｝ ｃｏｌｏｒ：＃ｆｆｆ； ｝ ．ｍｅｎｕ ｕｌ ｌｉ：ｈｏｖｅｒ ｕｌ， ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ； ／＊ ｋｅｅｐ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｈｉｄｄｅｎ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｎ ｆｉｒｓｔ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ； ／＊ ｋｅｅｐ ｔｈｅ ｆｏｕｒｔｈ ｌｅｖｅｌ ｈｉｄｄｅｎ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｎ ｓｅｃｏｎｄ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ； ／＊ ｍａｋｅ ｔｈｅ ｔｈｉｒｄ ｌｅｖｅｌ ｖｉｓｉｂｌｅ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｖｅｒ ｓｅｃｏｎｄ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ； ／＊ ｍａｋｅ ｔｈｅ ｆｏｕｒｔｈ ｌｅｖｅｌ ｖｉｓｉｂｌｅ ｗｈｅｎ ｙｏｕ ｈｏｖｅｒ ｏｖｅｒ ｔｈｉｒｄ ｌｅｖｅｌ ｌｉｓｔ ＯＲ ｌｉｎｋ ＊／ ｖｉｓｉｂｉｌｉｔｙ：ｖｉｓｉｂｌｅ； －－＞ ＜／ｈｅａｄ＞ ＜ｄｉｖ ｉｄ＝＂ｍａｉｎ＿ｄｉｖ＂＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝＂０＂ ｃｅｌｌｐａｄｄｉｎｇ＝＂０＂ ｃｅｌｌｓｐａｃｉｎｇ＝＂１＂ ｗｉｄｔｈ＝＂１００％＂＞ ＜ｔｒ＞＜ｔｄ ｉｄ＝＂ｔｄ＿ｔｒａｉｌ＂＞ＰＡＧＥ １＜／ｔｄ＞＜／ｔｒ＞ ＜／ａ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｈｏｍｅ．ｐｈｐ＂＞ＰＡＧＥＳ ＜ｕｌ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｐａｇｅ２．ｐｈｐ＂ ｔｉｔｌｅ＝＂＂＞ＰＡＧＥ ２＜／ａ＞＜／ｌｉ＞ ＜／ｌｉ＞＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｈｏｍｅ．ｐｈｐ＂＞ＭＯＲＥ ．．． ＜ｕｌ＞＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｃｏｎｔａｃｔ．ｐｈｐ＂ ｔｉｔｌｅ＝＂＂＞ＣＯＮＴＡＣＴ＜／ａ＞＜／ｌｉ＞ ＜ｌｉ＞＜ａ ｈｒｅｆ＝＂ｈｔｔｐ：／／ｆｏｒｕｍｓ．ｄｅｌｐｈｉ－ｐｈｐ．ｎｅｔ＂＞ＤＥＬＰＨＩ－ＰＨＰ＜／ａ＞＜／ｌｉ＞＜／ｕｌ＞ ＜／ｄｉｖ＞＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞ ＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞ ＜／ｈｔｍｌ＞ |
|
pedro
尊榮會員 發表：152 回覆：1187 積分：892 註冊：2002-06-12 發送簡訊給我 |
其實我也只略懂一二,
一般在b/s架構,client端可用的下拉選單,一種是上面貼的html,採css去達到效果,(即上面貼的,直接轉成半形,貼在記筆本上,存成1.html,用ie7去看,即可看到效果) 另一種是用javascript,藉由操縱DOM(在CLIENT端瀏覽器內,看到的的都是一種物件階層),這點小弟還在研究 ===================引 用 ry_lee 文 章=================== pedro 你好: 謝謝你的答覆,但我看不太懂,我再問一問題,用記事本程式手工寫下拉式功能選單之網頁,容易嗎?有無範例可供參考? ===================引 用 pedro 文 章=================== 用css去定義li下拉行為 |
|
Coffee
版主 發表：31 回覆：878 積分：561 註冊：2006-11-15 發送簡訊給我 |
我實在是搞不清楚都已經問了這麼多問題了，是搞不清楚問題還是搞不清楚版面？
===================引 用 ry_lee 文 章=================== 我要建立一個有彈出式或下拉式功能選單之網頁,該用什麼設計工具比較容易完成? 因為frontpage似乎無這項功能, dreamweaver cs3中文版可以嗎? 自行手寫程式碼會不會很難?有無程式碼範例可供參考 ?
------
不論是否我發的文，在能力範圍皆很樂意為大家回答問題。 為了補我的能力不足之處，以及讓答案可以被重複的使用，希望大家能儘量以公開的方式問問題。 在引述到我的文時自然會儘量替各位想辦法，謝謝大家！ |
發表時間：2008-08-11 02:08:11
IP:218.164.xxx.xxx 訂閱
系統時間：2024-04-26 21:20:02
聯絡我們 | Delphi K.Top討論版
| 本站聲明 |
|
1. 本論壇為無營利行為之開放平台，所有文章都是由網友自行張貼，如牽涉到法律糾紛一切與本站無關。 2. 假如網友發表之內容涉及侵權，而損及您的利益，請立即通知版主刪除。 3. 請勿批評中華民國元首及政府或批評各政黨，是藍是綠本站無權干涉，但這裡不是政治性論壇！ |