After all these years I still discover new ways in which to use css. This week I came across css shapes, while looking for a way to make an arrow for a menu rollover.
In this design, each active menu item has a unique shape. I couldn’t use a bitmap here, because the text in each menu item could change in size. The client could add new items, or make existing ones shorter or longer. With css shapes – and a little help of jQuery – the arrow gets dynamically re-sized to match the menu item width.
DEMO
See the Pen EjaYpN by pawel (@paweldebik) on CodePen.
Here’s the html, css, and jQuery that makes it all work:
HTML
<div id="navi-example"> <ul> <li ><a href="">item 1</a></li> <li ><a href="">item 2</a></li> <li ><a href="">item 3</a></li> <li ><a href="">item 4</a></li> <li ><a href="">item 5</a></li> </ul> </div>
CSS
#navi-example ul {
list-style: none;
background-color: black;
}
#navi-example li {
float: left;
width: 20%;
}
#navi-example a {
color: white;
line-height: 50px;
padding: 17px 20px;
text-decoration: none;
text-transform: uppercase;
}
#navi-example a:hover { background-color: #3c89c8; }
jQUERY
$('#navi-example li a').hover(function(){
var w = $(this).width()+40;
var z = (($(this).width())/2)+20;
$(this).after('<div class="hover-bottom" \
style=\'border: #3c89c8; \
border-left: '+z+'px solid transparent; \
border-right: '+z+'px solid transparent; \
border-top: 27px solid #3c89c8; content: ""; \
height: 0; \
margin: 0; \
position: absolute; \
width: 0;\'></div>');
$(this).before('<div class="hover-bottom" \
style=\'height: 15px; \
width: '+w+'px; \
background-color: #3c89c8; \
margin-top: -15px; \
position: absolute; \'></div><div class="hover-bottom" \
style=\'border-bottom: 15px solid #1b5d93; \
border-right: 15px solid transparent; \
height: 0; \
width: 0; \
margin-top: -15px; \
margin-left: '+w+'px; \
position: absolute; \'></div>');
}, function(){
$('.hover-bottom').remove();
});