[CSS] 傾斜したグローバルメニュー

[CSS] 傾斜したグローバルメニュー

web
対応 対応 9~(-ms-) 対応 対応 対応(-webkit-)
#
斜めになった横並びメニュー

Codepenに面白いカタチのメニューがあったので、試してみました。
CSS3のtransformプロパティを使用するため、対応ブラウザは各モダンブラウザとIE9+。
※CSSは最低限必要なプロパティのみ記述しています
デモはこちら

HTML

<ul>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
</ul>

CSS

ul{
    transform: skew(-20deg);
}

まずはulにtransform: skew(-20deg);を指定。数値はお好みで。

li{
    float: left;
    margin: 0 1px;
    background: #3397de;
}

liをfloat: left;で横並びにし、marginで隙間を調整。

li a{
    display: block;
    padding: 0.5em 2em;
    transform: skew(20deg);
}

そしてaは、ulに指定したtransform: skew(-20deg);でテキストが傾斜した状態なので、反対側へ同じだけ傾斜させます。
ここではulが(-20deg)なので、aは(20deg)。これでリストは傾斜し、テキストは傾斜しない状態となります。

デモページのCSS全文

ul{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 414px;
    height: 35px;
    margin: auto;
    transform: skew(-20deg);
}
li{
    float: left;
    margin: 0 1px;
    background: #3397de;
}
li:hover{
    background: #2d85ba;
}
li:active{
    background: #297aa3;
    position: relative;
    top: 1px;
}
li:first-child{
    border-radius: 3px 0 0 3px;
}
li:last-child{
    border-radius: 0 3px 3px 0;
}
li a{
    display: block;
    padding: 0.5em 2em;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transform: skew(20deg);
}

li:activeにtop:-1px とすると、斜めに-1px動いてくれるので、li同士がかぶらない。
上下左右を真ん中に揃えるため、ulにposition: absolute; を指定しているけど、場合によっては不要です。

Skewed Menuhttps://metrograph.jp

目次へ戻る