Here’s a cool menu I had to do for a project I’m working on. It’s a simple ul > li menu with a neat transition on the li’s pseudo-element.
It looks like this:
HTML
The HTML couldn’t be easier:
|
1 2 3 4 5 6 7 |
<ul class="menu"> <li> <a href="#">Menu Item</a> </li> </ul> |
LESS
LESS to the rescue! The concept here is to increase the width value of the pseudo-element (:before) when we hover the item.
I’ve added a transition so it looks smooth and continuous.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.transition(@transition){ -webkit-transition: @transition; transition: @transition; } .menu{ li{ list-style-type: none; background: #171717; position: relative; margin-bottom: 1px; z-index: 0; a{ color: white; padding: 0.5em 1em; font-size: 1.2em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; &:hover{ text-decoration: none; } &:hover:before{ width: 100%; } &:before{ content: ''; position: absolute; left: 0; top: 0; width: 11px; height: 100%; z-index: -1; background: #ed177b; .transition(all 0.3s ease-in); } } } } |
CSS
If you want the compiled CSS, here it is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.menu li { list-style-type: none; background: #171717; position: relative; margin-bottom: 1px; z-index: 0; } .menu li a { color: white; padding: 0.5em 1em; font-size: 1.2em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .menu li a:hover { text-decoration: none; } .menu li a:hover:before { width: 100%; } .menu li a:before { content: ''; position: absolute; left: 0; top: 0; width: 11px; height: 100%; z-index: -1; background: #ed177b; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } |
Enjoy!