Loading ...

CSS3: Show triangle on active menu | CodeAsp.Net

CSS3: Show triangle on active menu

 /5
0 (0votes)

In this blog I will show how to show triangle on active menu. You might have seen on chrome extensions where on clicking extensions a nice menu opens. This menu contains a triangle at the top:

We are going to implement very similar kind of triangle in a menu. 

Demo

CSS used:

div.navigation a.menu-link{float:right;}
div.navigation{position:relative;width: 400px; }
div.menu-container{
    display:none;
    width: 165px;    
    font-size: 11px;
    background: none repeat scroll 0 0 white;
    box-shadow: 0 5px 5px #999;
    list-style: none outside none;
    margin: 0 -1px 0 0!important;
    padding: 10px;
    position: absolute!important;
    right: 0;
    top: 37px;
    z-index: 55;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #AAA;
    border: solid 1px #AAA;
}

div.menu-container::after { 
    content: '  '; 
    background: white; 
    border: 1px solid #AAA; 
    border-width: 1px 1px 0 0; 
    top:-7px;
    display: block; 
    left: 80%; 
    height:10px;
    position: absolute;
    width: 10px; 
    z-index: 99;   
    /* Chrome */-webkit-transform: rotate(-45deg); 
    /* Chrome */-webkit-transform-origin: 50% 50%; 
    /* Mozilla */-moz-transform: rotate(-45deg); 
    /* Mozilla */-moz-transform-origin: 50% 50%; 
    /* IE 9 */-ms-transform: rotate(-45deg); 
    /* IE 9 */-ms-transform-origin:50% 50%; 
    /* Opera */-o-transform: rotate(-45deg); 
    /* Opera */-o-transform-origin: 50% 50%; 
    transform: rotate(-45deg); 
    transform-origin: 50% 50%
}
div.menu-container li { position: relative; float: none;font-size: 11px;margin: 0;padding: 4px 0 4px 0;background: transparent!important; } 


HTML:

<div class="navigation">
<a href="#" class="menu-link">Click me</a>
<div class="menu-container">
    <ul class="menu-list">
        <li>One</li>
        <li class="active">Two</li>
        <li>Three</li> 
    </ul>
</div>
</div>    



Code on jsFiddle: http://jsfiddle.net/raghav_khunger/5JGG3/1/

Demo: http://jsfiddle.net/raghav_khunger/5JGG3/1/embedded/result/

Comments (no comments yet)

Top Posts