忍者ブログ

在閱讀裡沉醉,在影像中做夢,在遊戲裡追尋,在生活中漂流,在心靈角落裡,我做我自己。

   
如何製作下拉式選單
因為實在是對原本的版型感到很膩了,所以就做了部落格大改版,之前其實有挑過要用的版型,只是侷限於我的連結選單會無法使用,觀察過CSS樣式還是找不到問題,明明其他自定欄位都可以使用JavaScript,但就是那個JavaScript的寫法不行,所以只好找尋其他作連結選單的方法,其實之前就有找過了,只是我不太喜歡【下拉式選單】產生器的複雜語法,太過冗長了,後來就看到有比較簡單的語法,也就直接套用了,改版型真是花了我好一番功夫,光是做一大堆的微調就花去我整個睌上,幸好忍者部落格有小幫手的功能呀,靠著瞎猜、超菜的日文,還有對於CSS的模糊基礎,只留下基本架構的骨幹,其他的部份都被我改的面目全非了(爆),就介紹一下下拉式選單的簡單語法吧。

【Code】(將此部分複製到部落格的自定欄位即可,需支援JavaScript
<select onchange="window.open(this.options[this.selectedIndex].value)">
<option value="">選單名稱</option>
<option value="">------------------------------------</option>
<option value="連結網址">連結名稱</option>
<option value="連結網址">連結名稱</option>
<option value="連結網址">連結名稱</option>
</select>

【範例說明】


選單名稱:身陷謎團の推理眾
第一個選項
連結網址:http://mysteryexpress.blog111.fc2.com/
連結名稱:謎思推理報

第二個選項
連結網址:http://blog.pixnet.net/mysteryfactory
連結名稱:台灣推理夢工廠

------------------------------------
↑是用來控制選單欄位長度,若各選單字數不一,則下拉式選單會呈現長短不齊的狀況,此時可做一樣的虛線長度控制。

若想要增加連結選項,則在程式碼中新增一筆<option value="連結網址">連結名稱</option>即可,若要增加第二組選單,則整個Code複製起來再做內容的修改,此選單經點選會另開視窗開啟點選的網頁。

【Code】
<select onchange="window.open(this.options[this.selectedIndex].value)">
<option value="">身陷謎團の推理眾</option>
<option value="">------------------------------------</option>
<option value="http://mysteryexpress.blog111.fc2.com/">謎思推理報</option>
<option value="http://blog.pixnet.net/mysteryfactory">台灣推理夢工廠</option>
</select>


若有其他問題可以留言問我,我還在研究怎麼改選單中選項的顏色跟字體大小。XD


拍手[0回]

PR
  
COMMENT
NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 
-----
這語法似乎在上課時有寫過....
不過有時都是偷懶去找範例然後改變數數值亂try...XDD
  • 若雲飛 さん |
  • 2008/08/06 (15:19) |
  • Edit |
  • 返信
Re:-----
反正好玩就好嘛。
  • from |
  • 2008/08/06 (18:14)
無題
這語法我以前也用過 XD
後來因為覺得下拉式的框框很醜就拿掉了(炸)

這版型留言會強迫填標題跟密碼耶 O_O
  • 小云 さん |
  • 2008/08/06 (15:57) |
  • Edit |
  • 返信
Re:無題
填密碼的話,可以修改自己寫過的留言唷,其實是很方便的功能,萬一有錯字或寫錯東西就可以改了,只是大部分的人都不會填密碼。

我覺得框框是不會很醜啦,不過用火狐跟用ie看到的是不一樣的長相,用火狐的看到的會套版型樣式跟字型大小,我找不到修改的地方。orz
  • from |
  • 2008/08/06 (18:16)
la
文章裡的CODE沒有用到CSS(嗅)

目前使用的css<link rel="stylesheet" href="http://twinsyang.blog.shinobi.jp/css/" type="text/css">會對下拉式選單有影響的規則:
body, h1, b, td, th, label, input, option, select, textarea {
color:#333333;/*字的顏色*/
font-family:Verdana;/*字型*/
font-size:12px;/*大小*/
font-weight:normal;/*粗細*/
}
input, option, textarea {
background:#FFFFFF none repeat scroll 0%;/*背景*/
border:1px solid #FFCC00;/*邊框...*/
color:#333333;
font-family:Verdana;
font-size:10px;
font-size-adjust:none; 沒用過,我懶了…
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
vertical-align:middle;
}

如果預設的 css改不到就用 inline-style吧
<select onchange="window.open(this.options[this.selectedIndex].value)" style="width:10em;font-size:2em;background:#ccc;color:#33f;border:none">
<option value="">推理眾</option>
</select>
border:none;這條 ie沒反應
  • drem さん |
  • 2008/08/06 (22:42) |
  • Edit |
  • 返信
Re:la
我就是改inline style的說,可是好像沒有生效才覺得奇怪,假日有空再來改改看好了,感謝drem的指導。:)
  • from |
  • 2008/08/06 (23:57)
密碼是還好啦~
但是要填標題就有點小煩燥 (爆)
  • 小云 さん |
  • 2008/08/07 (17:02) |
  • Edit |
  • 返信
Re:喵
我還滿喜歡人家填標題的說:p
  • from |
  • 2008/08/08 (21:33)
無題
請問一下你右下角的按鈕
就是"千言萬語的重量"按下去會跑出來得下拉式要怎麼用@@我想用我fc2

這是我的:http://nosugarfu.blog126.fc2.com/
怎麼用成像這樣:http://akru.blog13.fc2.com/
Re:無題
不好意思,我是直接套用版型的功能說,不會自己做。Orz
  • from |
  • 2009/07/16 (21:32)
TRACKBACK

TrackbackURL

BloggerAD
逛逛博客來
◎利益揭露:由此連往博客來的訂單,會讓我得到2%-4%的回饋金,特此說明:)
探索心靈深處
Google探索
Loading
流言蜚語
[11/28 Jeffreylogs]
[10/09 忘了留名稱的路人。]
[02/25 包子]
Facebook
旅行者の一步一腳印

Google AD
GoogleAD
Copyright ©  -- 栞 の 心靈角落 --  All Rights Reserved

Design by CriCri / powered by NINJA TOOLS / 忍者ブログ / [PR]

Related Posts Plugin for WordPress, Blogger...