CSSの質問です。下記の質問の続きです。

Question

akaired

186

163もっと見る

60pt

コンピュータインターネット

CSSの質問です。下記の質問の続きです。

http://q.hatena.ne.jp/1285591626

矢印がでないようにするには、どうしたらいいでしょうか？以下がやりたいことになります。
●項目、サブ項目ともに矢印がでないようにするには。
●項目矢印無し、サブ項目矢印有り。
●項目矢印有り、サブ項目矢印無し。

回答の条件

1人2回まで

登録：2010/10/06 01:44:26
終了：2010/10/13 01:45:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

rouge_2008 2010/10/06 09:49:41

CSSで実現する場合は以下のようにします。
ただし、javascriptで生成した要素をCSSで消すという無駄な処理を行っている事になります。
jsファイルを編集する方法の場合、不要な要素を生成しない為、少しですが負荷も少なくなります。
CSSで消すよりは、回答したjavascriptによる方法をおすすめします。

・項目、サブ項目ともに矢印がでないようにする
※項目の右の内側余白を10pxに変更します。
※各矢印画像にはクラス名「downarrowclass」または「rightarrowclass」が指定されているので、これらのクラス名が指定されたimg要素すべてに「display: none;」を適用させます。

#smoothmenu1 ul li a {
padding-right: 10px !important;
}

img.downarrowclass, img.rightarrowclass {
display: none;
}

・項目矢印無し、サブ項目矢印有り。
※項目の右の内側余白を10pxに変更します。
※各矢印画像にはクラス名「downarrowclass」または「rightarrowclass」が指定されているので、これらのクラス名が指定されたimg要素すべてに「display: none;」を適用させます。
※上記を適用した後で、サブ項目以下にある「a」要素下のクラス名「rightarrowclass」が指定されたimg要素すべてに「display: inline;」を適用させる事で、サブ項目だけ矢印画像を生成・表示します。

#smoothmenu1 ul li a {
padding-right: 10px !important;
}

img.downarrowclass, img.rightarrowclass {
display: none;
}

#smoothmenu1 ul li ul li a img.rightarrowclass,
#smoothmenu2 ul li ul li a img.rightarrowclass {
display: inline;
}

・項目矢印有り、サブ項目矢印無し。
サブ項目以下にある「a」要素下のimg要素すべてに「display: none;」を適用させます。

#smoothmenu1 ul li ul li a img,
#smoothmenu2 ul li ul li a img {
display: none;
}

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

rouge_2008 · Answer 1 · 2010-10-06T03:19:34+09:00

CSSではなく、ddsmoothmenu.jsを編集します。

・項目、サブ項目ともに矢印がでないようにする

66行目から5行分を次のようにコメントアウトするか削除します。

		// $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			// '<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
			// +'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			// + '" style="border:0;" />'
		// )

・項目矢印無し、サブ項目矢印有り。

66行目から5行分を次のように変更します。

		if (! this.istopheader) {
		$curobj.children("a:eq(0)").append( //add arrow images
			'<img src="'+ smoothmenu.arrowimages.right[1]
			+'" class="' + smoothmenu.arrowimages.right[0]
			+ '" style="border:0;" />'
		)}

・項目矢印有り、サブ項目矢印無し。

66行目から5行分を次のように変更します。

		if (this.istopheader) {
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
			+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			+ '" style="border:0;" />'
		)}

CSSの質問です。下記の質問の続きです。

回答（1件）

rouge_20085953512010/10/06 03:19:34

コメント（1件)

この質問への反応（ブックマークコメント）