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

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/10/06 01:44:26
  • 終了:2010/10/13 01:45:02

回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512010/10/06 03:19:34

ポイント60pt

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;" />'
		)}
id:akaired

ご回答ありがとうございます!!

2010/10/06 06:20:35
  • id:rouge_2008
    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;
    }

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません