りつのひとりごと

りつのひとりごと

ひとりでゆるーくやってます

あの方に憧れグローバルメニューを……

ここだけの話、(?)

シロマティさんのグローバルメニューに勝手に憧れていたんです。

マウスオーバー時にボーダーが引かれるんです。


今日、やっと決心して試みました。


マウスがはなれるときにボーダーが一瞬外に出ちゃったりと

完璧ではないですが、これ以上は私には……ね(;^ω^)



ただborder-bottomを指定しても外側にひかれてしまうのでやりたいことと違う。

自分の知識では解決できなかったので、ぐぐってみました


borderを内側に引くには box-sizing:border-box; を使うといいらしいです。

内側に引くという表現でいいのだろうか。(;^ω^)


たとえばheightとwidthで100×100に指定したdivがあったする、

そこにborderをつけたらborderの分が足されるので、

100×100より大きくなってしまう

そんなときに box-sizing を使うと100×100の中でborderを引いてくれる


ということかな…。たぶん……。

phiary.me



まあやってみよ。そー、ちゃく!ガシャンガシャン

nav.global-menu-normal, .global-menu-normal a {
    transition: all .3s;
}
.global-menu-normal a:hover {
   letter-spacing: 2px;
   border-bottom: 5px solid #f5b2ac;
   box-sizing: border-box;
}


シロマティさんのメニューにほんのちょびっとだけくらいは似たような気がするぞ!

そして!!

……書き方当たっているのかわからない……。(´・_・`)


変かな……?

まあ私自身結果オーライなとこあるので気にしてないんですよね……(-_-;)

ちなみに letter-spacing は私が好きなので勝手に付け加えてしまいました。笑



正直 box-sizing 覚えられたのは良かったかな。

無知の無知の無知無知人間だからね、りつは。



改良の余地ありですね……。


追記

少し直したので改めて続きを書きました。
グローバルメニューへの挑戦はつづく…… りつのひとりごと 
diaace.hatenadiary.jp


星……。Σ(◎Д◎)