CSS Menu Hover Effects
Today, we want to share some menu hover effects with you. We hope this collection inspires you and gives you some ideas for your next project. These effects are powered by CSS or with the help of anime.js alone. Some also use Charming for individual letter effects.
The first style is a slight variation, recreating the link hover effect seen on The Feebles. The effect called "Dustu" is inspired by the link hover effect on Flambette.
Note: We are using some modern CSS techniques and properties in these demos (Grid and Flexbox), so please use the latest browsers.Check Them Out。
This demo is sponsored by FullStory.
Example Menu Hover Effects
The menu structure depends on the effect, but let's take a look at the structure inspired by the beautiful The Feebles website. We call it "Adsila":
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 | <nav class="menu menu--adsila"> <a class="menu__item" href="#"> <span class="menu__item-name">Artists</span> <span class="menu__item-label">Explore all artists' portfolios</span> </a> <a class="menu__item" href="#"> <span class="menu__item-name">Exhibitions</span> <span class="menu__item-label">Discover their stories</span> </a> <a class="menu__item" href="#"> <span class="menu__item-name">Schedule</span> <span class="menu__item-label">View our event calendar</span> </a> <a class="menu__item" href="#"> <span class="menu__item-name">Mission</span> <span class="menu__item-label">Read our mission statement</span> </a> <a class="menu__item" href="#"> <span class="menu__item-name">The Gardens</span> <span class="menu__item-label">Get to know our eco village</span> </a> <a class="menu__item" href="#"> <span class="menu__item-name">Buy Tickets</span> <span class="menu__item-label">Purchase event tickets online</span> </a> <a class="menu__item" href="#"> <span class="menu__item-name">Contact</span> <span class="menu__item-label">Get in touch and find us</span> </a></nav> |
The following common styles are used for all the menus:
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | .menu { position: relative; z-index: 10;}.menu__item { position: relative; display: block; outline: none; margin: 0 0 1.5em; line-height: 1;}.menu__item-name,.menu__item-label { position: relative; display: inline-block;}.menu__item-name { font-size: 1.25em;}.menu__item-label { margin: 0 0 0 0.5em;}“Adsila” has these specific styles:.menu--adsila { font-size: 1.15em; font-family: 'Nunito', sans-serif;}.menu--adsila a { color: #272727;}.menu--adsila .menu__item { margin: 0 0 1em;}.menu--adsila .menu__item-name { padding: 0 0.35em; font-weight: bold; line-height: 1.4; transition: color 0.5s; transition-timing-function: cubic-bezier(0.2,1,0.3,1);}.menu--adsila .menu__item-name::before { content: ''; position: absolute; z-index: -1; width: 100%; height: 50%; left: 0; bottom: 0; opacity: 0.3; transform: scale3d(0,1,1); transform-origin: 0% 50%; transition: transform 0.5s; transition-timing-function: cubic-bezier(0.2,1,0.3,1);}.menu--adsila .menu__item-label { font-size: 1em; letter-spacing: 0.05em; transform: translate3d(-0.5em,0,0); transition: transform 0.5s, color 0.5s; transition-timing-function: cubic-bezier(0.2,1,0.3,1);}.menu--adsila .menu__item-label::before { content: ''; position: absolute; z-index: -1; width: 25%; height: 1px; left: 0.05em; top: 1.25em; opacity: 0.3; transform: scale3d(0,1,1); transform-origin: 100% 50%; transition: transform 0.5s; transition-timing-function: cubic-bezier(0.2,1,0.3,1);}.menu--adsila .menu__item:nth-child(odd) .menu__item-name::before,.menu--adsila .menu__item:nth-child(odd) .menu__item-label::before { background: #fe628e;}.menu--adsila .menu__item:nth-child(even) .menu__item-name::before,.menu--adsila .menu__item:nth-child(even) .menu__item-label::before { background: #6265fe;}/* Hover */.menu--adsila .menu__item:nth-child(odd):hover,.menu--adsila .menu__item:nth-child(odd):focus { color: #fe628e;}.menu--adsila .menu__item:nth-child(even):hover,.menu--adsila .menu__item:nth-child(even):focus { color: #6265fe;}.menu--adsila .menu__item:hover .menu__item-name::before,.menu--adsila .menu__item:focus .menu__item-name::before,.menu--adsila .menu__item:hover .menu__item-label::before,.menu--adsila .menu__item:focus .menu__item-label::before { transform: scale3d(1,1,1);}.menu--adsila .menu__item:hover .menu__item-label,.menu--adsila .menu__item:focus .menu__item-label { transform: translate3d(0,0,0);}.menu--adsila .menu__item:hover .menu__item-label::before,.menu--adsila .menu__item:focus .menu__item-label::before { transition-timing-function: ease; transform-origin: 0% 50%;} |
We have added some variations by moving the labels and leaving a line beneath them. As you can see, instead of using different colors for each item, we distinguish between even and odd items.
We hope you enjoy these styles and find some inspiration!