« PAE DefalutとPAE ForceEnableは違うのですか? | トップページ | 怒りのWiNDy(Mini-ITXケース)に五号機の製作延期を余儀なくされるが... »

2010年4月 8日 (木)

カテゴリーをプルダウンメニュー化するJavaScript!◆ココログでCSSの編集

ブログ記事をカテゴリー分けするユーザー様も多いかと。
ですが、記事が多くなれば為るほど当然ながらカテゴリーも増えてしまいますよネ。
今回のココログ/CSSの編集は、サイドバーに並ぶ膨大なカテゴリー群をプルダウンメニュー化で「ひとまとめ」にしてしまうJavaScriptの備忘録です...

基ソースは 「esprits top  Esprit's Style-エンジニアの足つぼ-」 様、 「選択ボックスからリンク先にジャンプする」 の記事。
当ブログでは、全面的に参考にさせて頂きました。管理人様には(^人^)感謝♪






カテゴリープルダウンメニュー化するJavaScript (基ソース)
- - - - - - - - - - - - - - - - - - - - -
<head>
  <title> ...... </title>
  <script type="text/javascript">
  <!--
    //初期設定
    //"blank":新規WindowでLinkを開く, "":(指定しない場合)そのままLinkを開く
    var target = "";
   
    function MyJump(){
      var url = document.form.select.options[document.form.select.selectedIndex].value;
      if(url != "" ){
        if(target == ""){
          window.open(url, "window_name");
        }
        else{
          location.href = url;
        }
      }
    }
  //-->
  </script>
</head>
<body>
<form name="form">
    <select name="select" onChange="MyJump()">
      <option value="" selected>選択してください</option>
      <option value="../html/es_html01.html">HTML</option>
      <option value="../css/es_css01.html">CSS</option>
      <option value="../XX/LinkXX.html">?????</option>
      <option value="../XX/LinkXX.html">?????</option>
    </select>
  </form>
</body>
- - - - - - - - - - - - - - - - - - - - -





当ブログでは下記の様にタグを追加し編集させて頂きました。
- - - - - - - - - - - - - - - - - - - - -
<span style="color: #ff0033;">プルダウンメニューで開きます</span>
<script type="text/javascript">
  <!--
    //初期設定
    //"blank":新規WindowでLinkを開く, "":(指定しない場合)そのままLinkを開く
    var target = "";
   
    function MyJump(){
      var url = document.form.select.options[document.form.select.selectedIndex].value;
      if(url != "" ){
        if(target == ""){
          window.open(url, "window_name");
        }
        else{
          location.href = url;
        }
      }
    }
  //-->
  </script>
<form name="form">
    <select name="select" onChange="MyJump()">
      <option value="" selected>カテゴリーを選択</option>
      <option value="○○○">△△△</option>
   .
   .
   .
   (以下繰り返し)
   .
   .
   .
    </select>
  </form>
</body>
- - - - - - - - - - - - - - - - - - - - -
danger青文字が編集箇所。
カテゴリーを選択:プルダウンメニューのTOPに表示する文字。
○○○:カテゴリーのURL
△△△:カテゴリーの名前





ココログへのJavaScriptタグ設置方法は >こちら





オォォーーー!! w(゜ロ゜;w(゜ロ゜)w;゜ロ゜)w オォォーーー!!





か、か、カテゴリーが...


プルダウンメニュー
化できますた


♪⌒ヽ(*゜O゜)ノ スゴイッぞ!!!JavaScript






esprits top  Esprit's Style-エンジニアの足つぼ-」様には、深く御礼申し上げます (人-)謝謝(-人)謝謝 happy01

|

« PAE DefalutとPAE ForceEnableは違うのですか? | トップページ | 怒りのWiNDy(Mini-ITXケース)に五号機の製作延期を余儀なくされるが... »

ココログ/CSS」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/363856/34129365

この記事へのトラックバック一覧です: カテゴリーをプルダウンメニュー化するJavaScript!◆ココログでCSSの編集:

« PAE DefalutとPAE ForceEnableは違うのですか? | トップページ | 怒りのWiNDy(Mini-ITXケース)に五号機の製作延期を余儀なくされるが... »