2

我不是真正的前端人员，但我正在努力学习。我从我的设计师那里得到了这个 psd，我想知道为菜单项前面的这个小选项卡编写样式和标记的最佳方式是什么。

在此处输入图像描述

我已经开始使用 bootstrap 构建其他所有内容，但这是迄今为止我所拥有的菜单。

再次感谢你的帮助

.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 回答