人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

xoops cube legacy のマルチメニューでメニューボタンを作っております。
通常は「トップ」のボタン表示でオンマウス(マウスオーバー)で「TOP」に変えたいのですが、良い方法はないでしょうか?

●質問者: kaji0245
●カテゴリ:インターネット ウェブ制作
✍キーワード:CUBE LEGACY TOP XOOPS ボタン
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●100ポイント ベストアンサー

multiMenuのメニューを画像表示にしているのでしょうか?

javascriptを使用する方法と、CSSを使用する方法があります。

multiMenu**に相当する「multimenu_block??.html」を次のように編集してください。

(multiMenu01は「multimenu_block.html」、multiMenu02は「multimenu_block01.html」)


・javascriptを使用する方法

<table cellspacing="0">
 <tr>
 <td id="mainmenu">
 <!-- start module menu loop -->
 <{foreach name=menuloop item=imenu from=$block.contents}>
 <{if $imenu.link != ""}>
 <{if $smarty.foreach.menuloop.first}>
 <a class="menuTop" href="<{$imenu.link}>" target="<{$imenu.target}>"><img src="<{$xoops_url}>/images/menu/<{$imenu.title}>.gif" onMouseOver="this.src='<{$xoops_url}>/images/menu/<{$imenu.title}>_on.gif'" onMouseOut="this.src='<{$xoops_url}>/images/menu/<{$imenu.title}>.gif'" /></a>
 <{else}>
 <a class="menuMain" href="<{$imenu.link}>" target="<{$imenu.target}>"><img src="<{$xoops_url}>/images/menu/<{$imenu.title}>.gif" onMouseOver="this.src='<{$xoops_url}>/images/menu/<{$imenu.title}>_on.gif'" onMouseOut="this.src='<{$xoops_url}>/images/menu/<{$imenu.title}>.gif'" /></a>
 <{/if}>
 <{foreach item=sublink from=$imenu.sublinks}>
 <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>
 <{/foreach}>
 <{else}>
 <{$imenu.title}>
 <{/if}>
 <{/foreach}>
 <!-- end module menu loop -->
 </td>
 </tr>
</table>

参考:

http://webcache.googleusercontent.com/search?q=cache:xhm1TAzTsEIJ:xc-tokai.net/modules/smartsection/item.php%3Fitemid%3D38+xoops+%E3%83%9E%E3%83%AB%E3%83%81%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC+%E7%94%BB%E5%83%8F&cd=4&hl=ja&ct=clnk&gl=jp&source=www.google.co.jp


http://fillcp.net/modules/d3forum/index.php?post_id=8


※未確認ですが、jQueryを使用しても良いかもしれません。(コードは上記とは別になります。)

http://www.webcreatorbox.com/tech/jquery-tips20/



・CSSを使用する方法

<table cellspacing="0">
 <tr>
 <td id="mainmenu">
 <!-- start module menu loop -->
 <{assign var=i value='1'}>
 <{foreach name=menuloop item=imenu from=$block.contents}>
 <{if $imenu.link != ""}>
 <{if $smarty.foreach.menuloop.first}>
 <a class="menuTop<{$i++}>" href="<{$imenu.link}>" target="<{$imenu.target}>"><{$imenu.title}></a>
 <{else}>
 <a class="menuMain<{$i++}>" href="<{$imenu.link}>" target="<{$imenu.target}>"><{$imenu.title}></a>
 <{/if}>
 <{foreach item=sublink from=$imenu.sublinks}>
 <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a>
 <{/foreach}>
 <{else}>
 <{$imenu.title}>
 <{/if}>
 <{/foreach}>
 <!-- end module menu loop -->
 </td>
 </tr>
</table>

※multiMenu01とmultiMenu02を表示する場合など、2つ以上multiMenuのメニューを表示する場合は、「<{assign var=i value='1'}>」の部分を変更して、他のメニューと重複しないようにしてください。(一つ目のメニューで1?5までの5つのメニューを表示する場合は、2個目のメニューは「<{assign var=i value='6'}>」とします。)


  1. 使用しているテーマの「style.css」の最後に次のように追加します。
a.menuTop1 {
display:block;
width:130px;
height:41px;
background:url(http://xxx.example.jp/images/menu/top.gif) no-repeat left 3px;
text-indent: -5000px;
margin: 1px;
border-bottom: 1px dotted #7a7acc;
}

a.menuMain2 {
display:block;
width:130px;
height:41px;
background:url(http://xxx.example.jp/images/menu/diary.gif) no-repeat left 3px;
text-indent: -5000px;
margin: 1px;
}

a:hover.menuTop1 {
background:url(http://xxx.example.jp/images/menu/top_on.gif) no-repeat left 3px !important;
}

a:hover.menuMain2 {
background:url(http://xxx.example.jp/images/menu/diary_on.gif) no-repeat left 3px !important;
}

※背景画像のURLは、環境に合わせて変更してください。

※multiMenuの各メニューaの幅および高さ、余白、背景画像の表示位置は、用意した画像と好みに合わせて変更してください。

※「a.menuTop*」および「a:hover.menuTop*」は、メニューの分だけ用意します。


参考:

http://www.stylish-style.com/csstec/basic/l-rollover4.html



※何れの方法の場合も、multiMenu用のメニュー画像は、「images」内に「menu」フォルダを作成して入れている場合となっています。

(menuフォルダ以外のフォルダ名にする場合は、コードあるいはCSSの該当する部分を変更してください。)

※multiMenuのメニュー追加時、「Title」は英数字で設定してください。(ファイル名は英数字にした方が良い為です。)



※テンプレートのカスタマイズについては、以下の回答を参考にしてください。

http://q.hatena.ne.jp/1251698012#a945358

◎質問者からの返答

詳細な情報をありがとうございます。テーマはsavejapan2ですが、早速試してみますm(_ _)m

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ