12月23日

■リンクを無効にする方法

右メニュー

子メニューを作ると、親メニューは子メニューを開くだけの動作が望ましく、
親クリック時に該当箇所にスクロールするのは意図するところではないので、
親のリンクだけを無効にしたいよね、という流れになるわけです。

そこだけCSSを上書きすればという助言を頂いたものの、
その時はなんとなく理解した様でいて、それは眠気による勘違いだったという。

メニューの構造上親にaタグが無いと子が開けないわけで、
つまりボタンをaタグの背景からliの背景にした所で変わらず、
画像リンクにしてもやはり子が開けない事態は避けられない。

「aタグは無効にしたくないが、画面遷移は無効にしたい」
というのが求めるところ。

結局、「css リンク 無効」であっさり調べがついたのだけれど、※
検索の仕方が悪いのか、グーグル先生とは言葉の趣味が合わない様です。

あと、子メニューがありますよ的な下矢印とか付けてあげると、
デザイン的におしゃれな感じになるのかもしれないが、
シーケンス的には親クリック以外に無いわけで無用な気がしなくも。
コンテンツによって子の有り無しが発生するなら矢印必須なのだが。
(オリジナルでは矢印つき)

あれがこれがと付け足していくと、
中途半端にCSS3が混じっていく事になり、後々の災いの素的な匂いがw

1)表示しているページ(About)のリンクを無効にする
→bodyにidをつけてそのページだけCSSを適応
http://coliss.com/articles/build-websites/operation/css/css-tips-pointer-events-current-navigation.html

//HTML
<body id=”about”>
<nav>
<ul>
<li class=”home”><a href=”#”>Home</a></li>
<li class=”about”><a href=”#”>About</a></li>
<li class=”clients”><a href=”#”>Clients</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
</ul>
</nav>

//CSS
#about nav .about > a {
pointer-events: none;
cursor: default;
}

2)任意のページ(Home)のリンクを無効にする
→該当するaにclassつけて「pointer-events: none;」「cursor: default;」をCSSに
http://ja.forums.wordpress.org/topic/12181?replies=22

//HTML
<nav>
<ul>
<li class=”home”><a class=”no-links” href=”#”>Home</a></li>
<li class=”about”><a href=”#”>About</a></li>
<li class=”clients”><a href=”#”>Clients</a></li>
<li class=”contact”><a href=”#”>Contact Us</a></li>
</ul>
</nav>

//CSS
.no-links{
pointer-events: none;
cursor: default;
text-decoration:none;
}

CSS3だからnavないと効かないとかないよね?

※ 追記
2)の方やってみたところ、
リンク無効→クリック出来ない→子メニューが開けなくなり。
navタグがないとやはりだめなのか、別の要因なのか。
1)の方はその挙動で問題ないのだけど。

仕方なく、href=”"を空にしてみたらそれでOKという・・え、それでいいの?
まぁ理屈からしたら当たり前の結果なのだが、
あまりお勧めされる方法ではないのかも。
あぁ、&nbsp;入れとけばいいのか。(違う?

あと、子メニュー開いた状態で親をクリックしたら子が閉じる様にしたい。
JavaScriptを1行足したら出来そうなんだけども。ももっもも。

12月23日” への2件のコメント

  1. トップページのソースを見た感じでは、34行目の”#accordion > li > a”部分で判定をかけているので、”.クラス名”で解決するのでは?

    ※ aタグ判定ではなく、クラス判定にかえてあげる。

  2. 親のli(251行目)にclass=”ac”を追加してみまたところ、子が開かなくなりました・・
    全部の親を書き換えないとダメと言うことはないですよね。
    34行目は”#accordion .ac”か”.ac”に書き換えれば良さそうですが、idとclassが同じとこにいるのが不可って事もなさそうですし・・ぬぬ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>