メニューのテキストがマウスオーバーすると、ズレる現象の対処法
2016/03/16
WEBサイトに必要不可欠なナビ。製作者として、1からサイトを構築するうえで避けては通れないナビ。
そのナビには、画像にメニューの文字がかいてあるものもあれば、
背景画像のみをＣＳＳで指定し、テキストでリンク（画像＋テキスト）のものもある。
画像に文字を入れていると変更があった時に画像ごと修正しないといけないが、背景画像のみの場合は変更があった時にテキストを変更するだけで修正が可能なので、修正が楽。
どちらが主流といったら、わたしがよくやるのは画像に文字が入っているサイトばかりだけど、グローバルメニューに関しては変更がないようなサイトなので今までメニューの画像の修正をしたことは一回くらいしかないが、サイドメニューなど、サイトの構成によっては修正しないといけないこともあると思う。
1から構築していくと、私のような凡ミス野郎がたくさん居ることでしょう。
なにをこんなにいっているんだと思うかもしれません。
今私の目の前ではメニューがマウスオーバーするとずれるんです。
動くんです・・・。
なぜなの・・・。
原因は・・・・。
と悩んでいる私の凡ミスの備忘録が役に立てばと思います。
スポンサーリンク
メニューのテキストがずれる
まず、グローバルメニューを作るときに画像+テキストで指定し、表示された場合。
[css]
nav li {
background:url(img/navi.jpg);
width : 131px ;
height : 38px ;
float: left;
line-height: 38px;
text-align: center;
}
nav li :hover{
background:url(img/navi_o.jpg);
width : 131px ;
height : 38px ;
line-height: 38px;
}
[/css]
と指定するとします。そうすると幅131px、高さ38pxのメニューが左ならびに表示されます。
マウスオーバーをすると画像が切り替えられるようになっております。
ですが、この記述のままだと、カーソルをリンクの上に合わせた時に、リンクのテキストが、少しずれます。
ナビのリンクが思っても居ない方向にずれるのです。
これは意図的にやるのだったらいいのですが、意図的ではない場合はマウスオーバーしても文字はそのままで背景画像だけ切り替わるというようにしたいですよね。
その場合は・・・
[css]
nav li :hover{
background:url(img/navi_o.jpg);
width : 131px ;
height : 38px ;
line-height: 38px;
}
[/css]
にするのです。
ちがいはココ。
[css]
nav li :hover{
line-height: 38px;
}
[/css]
line-height: 38px;を指定してあげることによって、アンカーテキストがきちんと自分の居場所を確保できて、ブレないようになれるんですね。
アンカーテキストちゃんも私たちもこれで安心です。
安心パパが歌えそうですね。
ちなみに、文字を真ん中に持っていきたい時も
[css]
nav li {
line-height: 38px;
text-align: center;
}
[/css]
を入れてみてください。整列すると思います。
line-heightおそろしや。うまくつきあっていかないといけませんね。
今回38pxなど、サンプルとして数字をあてていますが、ご自身が製作しているサイトの大きさに合わせてくださいね。
画像の高さと、line-heightの高さは同じにしてあります。
画像全体をリンクエリアにしたい場合
リンクの画像が大きかった場合、文字以外の場所をクリックしてリンク先にいけるようにしたい場合は、
[css]
nav li a {
display: block;
}
[/css]
をアンカーに入れてあげてください。そうすると、画像上ならば文字以外の箇所をクリックしてもリンクできるようになります。
個人的な備忘録でした。（いつものことね）
誰かの役に立ちますように。
スポンサーリンク