0

私はフラット デザインの Web サイトに取り組んでおり、最近はナビゲーション バーに注目しています。伝統的に、ユーザーのマウスがその上に置かれたときに暗くなる色付きの背景の上にシンプルなアイコンを使用したいと考えていました。そのため、リスト項目の背景を色として使用し、写真の「アンカー」項目を使用してそれを実現しました。しかし、もう少し双方向性を持たせたいと思いました。そのため、シンプルなアイコンを同じサイズに保ち、他のリスト項目の配置に影響を与えないようにしながら、リスト項目を拡大することにしました。これまでのところ、リスト アイテムが大きくなり、所定の位置にとどまるようになりましたが、リスト アイテムにカーソルを合わせると、背景がゆがみ、残りのリスト アイテムが下に移動します。これは私のCSSです：

div#nav{
    width:auto;
    height:43px;
    padding-top:15px;
    padding-right:15px;
    padding-bottom:5px;
    background-color:rgba(100,100,100,0.2);
    border-left-color:rgba(255,255,255,0.2);
    border-right-color:rgba(255,255,255,0.2);
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:rgba(255,255,255,0.2);
    margin-left:auto;
    margin-right:auto;
}
#nav ul{
    padding:0;
    list-style:none;
    display:inline-block;
    margin:0;
}
#nav ul li{
    width:48px;
    height:48px;
    margin-left:15px;
    display:inline-block;
    background-color:#000000;
    padding:0;
}
#nav ul li a{
    z-index:10;
}
#googleplus{
    width:48px;
    height:48px;
    background-image:url('images/googleplus.png');
    display:block;
}
#facebook{
    width:48px;
    height:48px;
    background-image:url('images/facebook.png');
    display:block;
}
#twitter{
    width:48px;
    height:48px;
    background-image:url('images/twitter.png');
    display:block;
}
#youtube{
    width:48px;
    height:48px;
    background-image:url('images/youtube.png');
    display:block;
}
#minecraft{
    width:48px;
    height:48px;
    background-image:url('images/minecraft.png');
    display:block;
}
#nav ul li#googleplus{
    background-color:#d34836;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#googleplus:hover{
    background-color:#c23725;
}
#nav ul li#facebook{
    background-color:#3b5998;
    transition:background-color,padding,margin-left,margin-right,margin-top,margin-bottom;
    transition-duration:0.17s,0.17s,0.17s,0.17s,0.17s,0.17s;
}
#nav ul li#facebook:hover{
    background-color:#2a4887;
    padding:5px;
    margin-left:10px;
    margin-right:-5px;
    margin-top:-5px;
    margin-bottom:5px;
}
#nav ul li#twitter{
    background-color:#4099ff;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#twitter:hover{
    background-color:#2077dd;
}
#nav ul li#youtube{
    background-color:#de443e;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#youtube:hover{
    background-color:#bc221c;
}
#nav ul li#minecraft{
    background-color:#5e5645;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#minecraft:hover{
    background-color:#4d4534;
}
.p-flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
.flex-hcc{
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

これが HTML です。

<div id="nav" class="p-flexbox flex-hcc">
    <ul>
        <li id="facebook" ><a id="facebook" href="#" ></a></li>
        <li id="twitter" ><a id="twitter" href="#" ></a></li>
        <li id="youtube" ><a id="youtube" href="#" ></a></li>
        <li id="minecraft" ><a id="minecraft" href="#" ></a></li>
    </ul>
</div>

リスト項目を大きくする方法を誰かが見つけ出すことができますが、アンカーへの背景画像を同じ場所とサイズに保ち、他のリスト項目の配置に影響を与えませんか?

4

1 に答える 1