りつのひとりごと

読者です 読者をやめる 読者になる 読者になる

りつのひとりごと

暇人による、日記みたいなひとりごと

グローバルメニューへの挑戦はつづく……

ブログ

前回記事の続きです。

diaace.hatenadiary.jp



もうちょっとやってみました。

ほんのちょっとだけ変わったんです。

シロマティさんに少しでも近づけるべくこうしてみました。

nav.global-menu-normal, .global-menu-normal a {
    transition: background-color .3s ease-in-out;
}
.global-menu-normal a:hover {
   border-bottom: 5px solid #f5b2ac;
   box-sizing:border-box;
   transition: border-width .3s ease;
}

コードの色とか場所とかいろいろおかしい気がするけど今回は気にしない方向で(;^_^


hoverのほうにtransitionは変なのかなとも思いましたが、これだとちょっと似たんです。

前はプロパティをallにしていたのですが、border-widthでいい感じに(?)なりました。

ここで勉強しました。→CSS3プロパティ transition | HALAWATA.NET

ただbourder-widthにすると、全体のtransitionがなくなっちゃうので、こんな感じになってしまいました。


難しい……。