Javaの変数でhtmlのメニュー表示を切替したい
- Javaで宣言した変数のtrue,falseによって、html上のメニューバーの表示・非表示を切り替える方法についてまとめます。
- htmlのメニューバーの表示・非表示をJavaの変数を使用して切り替える方法をご紹介します。
- Javaと連携させたページで、変数の値によってhtmlメニューバーの表示・非表示を切り替える方法について解説します。
- ベストアンサー
Javaの変数でhtmlのメニュー表示を切替したい
Javaと連携させたページについてです。 Javaで宣言した変数のtrue,falseによって、html上のメニューバーの表示・非表示を切り替えることができるようにしたいです。 メニューバーは下のようになっています <div class="gNavi" id="isMenu"> <ul> <li id="menu0">～～</li> <li id="menu1">～～</li> <li id="menu2">～～</li> <li id="menu3">～～</li> <li id="menu4">～～</li> <li id="menu5">～～</li> <li id="menu6">～～</li> </ul> </div> このメニューの2番目(menu1)～6番目(menu5)の表示・非表示を切り替えます。 いい方法はないでしょうか？
- yukinoshitait
- お礼率21% (4/19)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
出力・非出力の制御じゃなくて、表示・非表示の設定ですよね？ であればstyle属性にdisplay:noneを付加するような出力にするか idに対してcssで非表示を渡すようなスタイルシートをjavaで出力してみては？
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 おそらくjspを利用していると思うので、jsp側で以下のように判定したらどうでしょうか？ <div class="gNavi" id="isMenu"> <ul> <li id="menu0">～～</li> <c:if test="${flg == 1}"> <li id="menu1">～～</li> <li id="menu2">～～</li> <li id="menu3">～～</li> <li id="menu4">～～</li> <li id="menu5">～～</li> </c:if> <li id="menu6">～～</li> </ul> </div>
お礼
解決しました。 ありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 Javaってサーバ側で動いているJavaのことでしょうか？ それともJavaScriptでしょうか？ サーバ側のJavaで動いているなら、使用しているフレームワーク等、補足ください。 JavaScriptであるのであれば、どこで真偽値を設定しているか補足ください。
補足
サーバ側のJavaで、フレームワークはSeasar2です。
関連するQ&A
- Javaによるstyle属性の切り替え
Java(Seasar2)とXHTMLを用いたWebアプリケーションを作成しています。 Java側で設定した変数menuDispFlg(String型)によって、メニューバーの一部を表示・非表示を制御するのですが、うまくいきません。 メニューバー <div class="gNavi" id="isMenu"> <ul> <li id="menu00">～～</li> <li id="menuDispFlg" style="">～～</li> <li id="menuDispFlg" style="">～～</li> <li id="menuDispFlg" style="">～～</li> <li id="menuDispFlg" style="">～～</li> <li id="menuDispFlg" style="">～～</li> <li id="menu06">～～</li> </ul> </div> Java 内部処理 /** * メニュー表示判定 * * @return boolean */ public boolean isMenuDispFlg() { String menuDispFlgStyle = "display: block; height: 45px; position: relative; float: left; padding: 4px 4px 0px 4px; background: url(../images/menu/gNavi-05.gif) no-repeat right 9px;"; if (menuDispFlg.equals("1")) { // フラグが1の場合、XXXメニューを表示しない return menuDispFlgStyle == "display: none"; } // フラグが0の場合、XXXメニューを表示する return menuDispFlgStyle == "display: block; height: 45px; position: relative; float: left; padding: 4px 4px 0px 4px; background: url(../images/menu/gNavi-05.gif) no-repeat right 9px;"; } 以上のようになっており、メニューバーのid="menuDispFlg"となっている項目だけを、変数menuDispFlg="1"の時に非表示にします。 どこかおかしいところがあればご指摘ください。
- ベストアンサー
- HTML
- プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 ●メニュー1-1 ●メニュー1-2 ●メニュー1-3 ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> <div class="tree_sub"> <ul> <li class="left">●メニュー1-1</li> <li>●メニュー1-2</li> </ul> <ul> <li class="left">●メニュー1-3</li> <li>●メニュー1-4</li> </ul> </div> </div> <div class="tree"> <a href="#">○メニュー2</a> </div> [css] div.tree { border-bottom:1px solid #000000; width:365px; } div.tree_sub ul li { float:left; } div.tree_sub ul li.left { width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
- IE7でのz-index対応について
以下のようにコーディングすると、IE7でドロップダウンリストが後ろ側に隠れるのですが、対応方法はありますか？div#gnavi ul li ul.sublist のz-indexを9999とかにしても効果なくて。。。 <div id="gnavi"> <ul> <li><a href="#">MENU01</a></li> <li><a href="#">MENU02</a> <ul class="sublist"> <li><a href="#">MENU02-01</a></li> <li><a href="#">MENU02-02</a></li> <li><a href="#">MENU02-03</a></li> <li><a href="#">MENU02-04</a></li> <li><a href="#">MENU02-05</a></li> </ul><!-- /.sublist --> </li> <li><a href="#">MENU03</a></li> <li><a href="#">MENU04</a></li> </ul> </div><!-- /#gnavi --> <div id="adArea"> <ul> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> </ul> </div> CSS側では、以下のようにしています。 div#gnavi ul li { float:left; position:relative; } div#gnavi ul li ul.sublist { position:absolute; top:0px; left:0px; display:none; } div#gnavi ul li ul.sublist li { float:none; } div#adArea { clear:both; } div#adArea ul li { float:left; }
- ベストアンサー
- HTML
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- jQueryについて教えてください
http://www.skuare.net/test/jFloatingmenu.html こちらのサイトを参考に製作をしたのですが <div id="floatMenu"> <ul> <li><a href="#" onclick="return false;">メニュー1</a></li> <li><a href="#" onclick="return false;">メニュー2</a></li> </ul> </div> こちらの部分をテキスト表示だと表示されるのですが メニューを画像（CSSを使ったロールオーバー）にすると 点線のみ表示され、画像が表示されなくなります。 <ul> <li class="category1_1"><a href="#" target="_parent">メニュー1</a></li> <li class="category1_2"><a href="#" target="_parent">メニュー2</a></li> </ul> 原因がわかりません 教えていただけませんでしょうか？
- ベストアンサー
- JavaScript
- mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい
javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）
- ベストアンサー
- JavaScript
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- CSSロールオーバーについて教えて下さい。
CSSで横並びのメニューを作っているのですが、背景はそのまま表示され、a:hover時の画像がFirfoxだとずれてしまい、IEだと正しく表示されます。 以下、CSSですが、どこがいけないのでしょうか？ ご教授お願いします。 #gnavi { width: 600px; margin: 0; padding: 0; } #gnavi ul, #gnavi ul li { float: left; list-style-type: none; } #gnavi ul { width: 600px; height: 80px; background: url(./img/gnavi/g_navi.jpg) no-repeat; } #gnavi ul li a { display: block; width: 120px; height: 80px; text-indent: -9999px; font-size: 0; line-height: 0; } #gnavi ul li.gn01 a.active, #gnavi ul li.gn01 a:focus, #gnavi ul li.gn01 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat: no-repeat; background-position: left bottom; } #gnavi ul li.gn02 a.active, #gnavi ul li.gn02 a:focus, #gnavi ul li.gn02 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -120px -80px; } #gnavi ul li.gn03 a.active, #gnavi ul li.gn03 a:focus, #gnavi ul li.gn03 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -240px -80px; } #gnavi ul li.gn04 a.active, #gnavi ul li.gn04 a:focus, #gnavi ul li.gn04 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -360px -80px; } #gnavi ul li.gn05 a.active, #gnavi ul li.gn05 a:focus, #gnavi ul li.gn05 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -480px -80px; } ※メニューはw:600px h:160pxの画像にて背景を利用し各メニュー部分をスライドさせて表示をしようと考えております。 ※各メニューの大きさはw:120px h:80pxです。 以下、HTMLへのタグです。 <div id="gnavi"> <ul> <li class="gn01"><a href="#container" title="トップページ" class="active">トップページ</a></li> <li class="gn02"><a href="#container" title="サービス内容">サービス内容</a></li> <li class="gn03"><a href="#container" title="納品までの流れ">納品までの流れ</a></li> <li class="gn04"><a href="#container" title="会社概要">会社概要</a></li> <li class="gn05"><a href="#container" title="お問合せ">お問合せ</a></li> </ul> </div> 色々と試してはいるのですが、どうも表示が上手く行かず、もしかしたら自分で解決をしようと試み、初心？基本的なことを忘れて入るのではと思い、皆さんに構文を見て頂きご指摘を頂ければ幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- HTML
- メニューの横スクロールバーを消したい
色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。 ※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。 ドロップダウンメニューをセンタリング表示しているのですが、 どうあっても横スクロールバーが出てしまいます。 下記サイトではoverflow:hiddenを使用すると書いていますが 使用するとドロップダウンが非表示になってしまうため難しいです。 http://www.coolwebwindow.com/csstips/csstechnic/000241.php 【html】 <div id="global-nav"> <ul class="menu" id="menu"> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li><a href="dl-1.html">ドロップダウン</a></li> <li><a href="dl-2.html">ドロップダウン</a></li> <li><a href="dl-3.html">ドロップダウン</a></li> </ul> </li> </ul> </div> 【css】 div#global-nav { position:relative; width: 1000px; height: 40px; margin: 0 auto; background: #999; } ul.menu { position: relative; list-style:none; left:50%; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#000; text-decoration:none; } ul.menu li.a { position: relative; left:-50%; float:left; } ul.menu ul { position:absolute; top:40px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none; } ul.menu ul li { position:relative; border-top:none; width:180px; margin:0; } ul.menu ul li a { display:block; padding:3px 7px 5px; background-color:#d1d1d1; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul ul { left:180px; top:-1px; } ul.menu .menulink { width:180px; } ul.menu .menulink:hover, ul.menu .menuhover { background:url(images/header_over.gif); } ul.menuの中のleft:50%を消すと横スクロールバーが消える事はわかったのですが、 それだと中央揃えにならないので…。 どうか宜しくお願いします！
- ベストアンサー
- HTML
- タブ切り替えの初期表示に関して
jQueryを使用したタブの切り替えを実装しています。 下記ソースに関して、デフォルトの状態ですとselectedを設定した <div id="#a">の内容を初期表示します。 別ファイルからのリンクの飛び先が#bの時は初期表示を<div id="#b">にしたいのですが どうすればよいでしょうか？ <ul id="tab"> <li class="selected"><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="#a"> aの内容 </div> <div id="#b"> bの内容 </div> <div id="#c"> cの内容 </div> 下記のスクリプトを使用しています。 http://hyper-text.org/archives/2007/09/javascript_tab.shtml
- ベストアンサー
- JavaScript
お礼
解決しました。 ありがとうございました。