2

私はフロントエンドの専門家ではありませんが、学ぼうとしています。デザイナーからこの psd を入手しましたが、メニュー項目の前にあるこの小さなタブのスタイルとマークアップを記述する最良の方法は何か疑問に思っています。

ここに画像の説明を入力

ブートストラップを使用して他のすべてを構築し始めましたが、これまでのところメニュー用に持っているものは次のとおりです。

ご協力ありがとうございました

.sideMenu {
    width: 230px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
}

.sideMenu > li {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    text-indent: 25px;
    position: relative;
    z-index: 2;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #E1E6EF;
    -webkit-backface-visibility: hidden;
    /* Chrome transition flicker & double border fix */
    -webkit-transition: height .2s ease;
        -moz-transition: height .2s ease;
            transition: height .2s ease;
}

.sideMenu > li.open {
    background-color: #F5F5F5;
    position: relative;
    -webkit-backface-visibility: hidden; 
    /* Chrome transition flicker & double border fix */
    -webkit-transition: height .4s ease;
        -moz-transition: height .4s ease;
            transition: height .4s ease;
}

.sideMenu > li.active {
    background-color: #E5E9EA;
    color: #6E787E;
    font-weight: bold;
    border-top: 1px solid #E1E6EF;
}


.sideMenu > li > a {
    display: block;
    height: 50px;
}
4

1 に答える 1

3

これが基本的な例です。

CSS:

.menu { width: 300px; border-bottom:1px solid #ddd; margin:0; padding:0 }
.menu-item { border-left:5px solid #fff; border-top: 1px solid #ddd; color:#666; list-style:none; padding:5px; }
.menu-item:hover { border-left:5px solid #ddd; background: #eee; }

HTML:

<ul class="menu">
    <li class="menu-item">Item 1</li>
    <li class="menu-item">Item 2</li>
</ul>

http://jsfiddle.net/G2fcY/

TL;DR: 境界線を使用して、話している「青いタブ」を取得します。

于 2013-06-15T05:02:19.610 に答える