Add down arrow to active menu

on with Leave a reply

Active navigation will have the different appearance to make user understand, where they are. Lets create the active menu like in below image. Active menu has bottom centre down arrow. Lets see how to using css3 :after pseudo create.

down-arrow-menu

 

 

HTML markup to create basic navigation menu!

<ul>
    <li class="current">Home</li>
    <li>About</li>
    <li>Blog</li>
    <li>Contact</li>
</ul>

CSS3 to create the active down arrow menu

ul{
    list-style:none;
}
li{
    display:block;
    float:left;
    margin-right:10px;
    background-color:red;
    padding:10px;
    position: relative;
}
li.current{
    background-color:#78c4dd;
}
li.current:after{
    border-left: 10px solid transparent;
    border-right: 11px solid transparent; content:"";
	border-top: 13px solid #78c4dd;
    position: absolute;
    bottom: -13px;
    width: 0px;
    left: 50%;
    margin-left: -10px;
}

JSFiddle example:

Thanks to contributor Mikedidthis. Hope this will help some one

 

 

 

 

 

Posted in Cocktail by .

About Gowri

I am professional web developer with 4+ years experience. PHP, jQuery, WordPress, Magento and Symfony2 are my key skills in web development. I am working with strong enthusiastic team with spirit. We provide all web related solution like HTML/CSS development, Web graphic design and Logo.

Leave a Reply

Your email address will not be published. Required fields are marked *