全國最多中醫師線上諮詢網站-台灣中醫網
發文 回覆 瀏覽次數:2504
推到 Plurk!
推到 Facebook!

我要建立一個有彈出式或下拉式功能選單之網頁,該用什麼設計工具?

答題得分者是:pedro
ry_lee
高階會員


發表:367
回覆:251
積分:123
註冊:2002-03-19

發送簡訊給我
#1 引用回覆 回覆 發表時間:2008-08-11 02:08:11 IP:218.164.xxx.xxx 訂閱
我要建立一個有彈出式或下拉式功能選單之網頁,該用什麼設計工具比較容易完成?
因為frontpage似乎無這項功能,
dreamweaver cs3中文版可以嗎?
自行手寫程式碼會不會很難?有無程式碼範例可供參考 ?
pedro
尊榮會員


發表:152
回覆:1177
積分:865
註冊:2002-06-12

發送簡訊給我
#2 引用回覆 回覆 發表時間:2008-08-11 07:55:50 IP:59.112.xxx.xxx 未訂閱
用css去定義li下拉行為

下面這段是由
http://forums.delphi-php.net/showthread.php?t=1132
抽離出來,可在IE7運行

在這裡可線上看效果http://demos.delphi-php.net/websitedemo/
請全形轉為半形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>無標題文件</title>
<style type="text/css">
<!--
.menu {
width:750px;
font-size:0.85em;
padding-bottom:0px;/*200px;*/
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
.menu ul ul {
width:150px;
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#fff;
width:139px;
height:30px;
border:1px solid #fff;
border-width:0 1px 1px 0;
background:#758279;
padding-left:10px;
line-height:29px;
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w¥idth:139px;
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
.menu ul ul :hover > a.drop {
background:#c9ba65;
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
.menu ul ul ul :hover > a {
background:#b2ab9b;
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t¥op:31px;
/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px;
/* yet another hack for IE5.5 */
* html .menu ul ul a{
width:150px;
w¥idth:129px;
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
-->
</style>
</head>
<body>
<div id="main_div"><table border="0" cellpadding="0" cellspacing="1" width="100%">
<tr><td id="td_header">TITLE OF WEBSITE</td></tr>
<tr><td id="td_trail">PAGE 1</td></tr>
<tr><td id="td_menu"><div class="menu"><ul><li><a href="home.php">HOME
</a>
</li>
<li><a href="home.php">PAGES
</a>
<ul>
<li><a href="page1.php" title="">PAGE 1</a></li>
<li><a href="page2.php" title="">PAGE 2</a></li>
<li><a href="page3.php" title="">PAGE 3</a></li></ul>
</li><li><a href="home.php">MORE ...
</a>
<ul><li><a href="contact.php" title="">CONTACT</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="http://forums.delphi-php.net">DELPHI-PHP</a></li></ul>
</li></ul>
</div></td></tr></table>
</tr>
</td></tr></table>
</body>
</html>
編輯記錄
pedro 重新編輯於 2008-08-11 07:58:46, 註解 無‧
ry_lee
高階會員


發表:367
回覆:251
積分:123
註冊:2002-03-19

發送簡訊給我
#3 引用回覆 回覆 發表時間:2008-08-11 17:46:34 IP:125.224.xxx.xxx 訂閱
pedro 你好:
謝謝你的答覆,但我看不太懂,我再問一問題,用記事本程式手工寫下拉式功能選單之網頁,容易嗎?有無範例可供參考?


===================引 用 pedro 文 章===================
用css去定義li下拉行為

下面這段是由
http://forums.delphi-php.net/showthread.php?t=1132
抽離出來,可在IE7運行

在這裡可線上看效果http://demos.delphi-php.net/websitedemo/
請全形轉為半形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>無標題文件</title>
<style type="text/css">
<!--
.menu {
width:750px;
font-size:0.85em;
padding-bottom:0px;/*200px;*/
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
.menu ul ul {
width:150px;
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#fff;
width:139px;
height:30px;
border:1px solid #fff;
border-width:0 1px 1px 0;
background:#758279;
padding-left:10px;
line-height:29px;
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w¥idth:139px;
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
.menu ul ul :hover > a.drop {
background:#c9ba65;
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
.menu ul ul ul :hover > a {
background:#b2ab9b;
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t¥op:31px;
/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px;
/* yet another hack for IE5.5 */
* html .menu ul ul a{
width:150px;
w¥idth:129px;
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
-->
</style>
</head>
<body>
<div id="main_div"><table border="0" cellpadding="0" cellspacing="1" width="100%">
<tr><td id="td_header">TITLE OF WEBSITE</td></tr>
<tr><td id="td_trail">PAGE 1</td></tr>
<tr><td id="td_menu"><div class="menu"><ul><li><a href="home.php">HOME
</a>
</li>
<li><a href="home.php">PAGES
</a>
<ul>
<li><a href="page1.php" title="">PAGE 1</a></li>
<li><a href="page2.php" title="">PAGE 2</a></li>
<li><a href="page3.php" title="">PAGE 3</a></li></ul>
</li><li><a href="home.php">MORE ...
</a>
<ul><li><a href="contact.php" title="">CONTACT</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="http://forums.delphi-php.net">DELPHI-PHP</a></li></ul>
</li></ul>
</div></td></tr></table>
</tr>
</td></tr></table>
</body>
</html>
pedro
尊榮會員


發表:152
回覆:1177
積分:865
註冊:2002-06-12

發送簡訊給我
#4 引用回覆 回覆 發表時間:2008-08-11 18:06:19 IP:60.248.xxx.xxx 未訂閱
其實我也只略懂一二,
一般在b/s架構,client端可用的下拉選單,一種是上面貼的html,採css去達到效果,(即上面貼的,直接轉成半形,貼在記筆本上,存成1.html,用ie7去看,即可看到效果)
另一種是用javascript,藉由操縱DOM(在CLIENT端瀏覽器內,看到的的都是一種物件階層),這點小弟還在研究

===================引 用 ry_lee 文 章===================
pedro 你好:
謝謝你的答覆,但我看不太懂,我再問一問題,用記事本程式手工寫下拉式功能選單之網頁,容易嗎?有無範例可供參考?


===================引 用 pedro 文 章===================
用css去定義li下拉行為

Coffee
版主


發表:31
回覆:878
積分:561
註冊:2006-11-15

發送簡訊給我
#5 引用回覆 回覆 發表時間:2008-08-11 18:08:53 IP:220.130.xxx.xxx 訂閱
我實在是搞不清楚都已經問了這麼多問題了,是搞不清楚問題還是搞不清楚版面?

===================引 用 ry_lee 文 章===================
我要建立一個有彈出式或下拉式功能選單之網頁,該用什麼設計工具比較容易完成?
因為frontpage似乎無這項功能,
dreamweaver cs3中文版可以嗎?
自行手寫程式碼會不會很難?有無程式碼範例可供參考 ?
------
不論是否我發的文,在能力範圍皆很樂意為大家回答問題。
為了補我的能力不足之處,以及讓答案可以被重複的使用,希望大家能儘量以公開的方式問問題。
在引述到我的文時自然會儘量替各位想辦法,謝謝大家!
系統時間:2017-12-12 8:48:05
聯絡我們 | Delphi K.Top討論版
本站聲明
1. 本論壇為無營利行為之開放平台,所有文章都是由網友自行張貼,如牽涉到法律糾紛一切與本站無關。
2. 假如網友發表之內容涉及侵權,而損及您的利益,請立即通知版主刪除。
3. 請勿批評中華民國元首及政府或批評各政黨,是藍是綠本站無權干涉,但這裡不是政治性論壇!