CODEWITHSUNDEEP
htmlcss
alexboorman
alexboorman

Reputation: 53

how can I achieve this with css?

I'm not really a front-end guy but I'm trying to learn. I got this psd from my designer and I'm wondering what is the best way to write the styles and markup for this small tab at the front of the menu item.

enter image description here

I've started building everything else using bootstrap but here's what I have for the menus so far.

Thanks Again For Your Help

.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;
}

Upvotes: 2

Views: 82

Answers (1)

mnsr
mnsr

Reputation: 12437

Here's a basic example.

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: Use borders to get the 'blue tab' thing you're talking about.

Upvotes: 3

Related Questions