From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Here is a set of fresh CSS-only menus for your website – no images, no JavaScript. The markup for the menus is always the same and I used 12 different stylesheets for their appearance. The main idea is to have a big title link and some description under the link. The description can be hidden with visibility:hidden and then shown when hovering over the link element. Title and description are inside of spans and can be styled accordingly.
The markup looks like this:
<div id="menu1"> <ul> <li><a href=""> <span class="title">About</span> <span class="text">Who we are</span> </a> </li> <li><a href=""> <span class="title">Portfolio</span> <span class="text">What we do</span> </a> </li> <li><a href=""> <span class="title">Blog</span> <span class="text">What we talk about</span> </a> </li> <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li> </ul> </div>
Enjoy!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Pingback: Fresh Set of CSS-only Menus | Codrops Eating
Pingback: uberVU - social comments
Really great, nice styling, thanks for sharing!
Some of the best styled CSS-only menus I know of on the web. I like the grey one which has this typical typographic look.
…menu number 5, 7 and 12…
Nice menu’s, thanks for sharing
What about vertical menu with submenu?
Nice work. I haven’t tested this yet so I could be wrong, but I don’t think you need to put a span tag or a class on the actual link title. You only need a span tag and class on the description from the looks of it.
Oh and you don’t need the div tag either unless you need to group the list with another element or you need to do some complex positioning. Just a FYI. But I’ve bookmarked this post anyway for future inspiration. Cheers! 🙂
Great tutorial.
I was wondering, how would you get an active state on these links?
I’m having trouble using the
method
Hello Mary Lou, I am having difficulty with alignment, it works perfectly in FF, Chrome and Safari but my menu appears offset in i.e – I know I have done something stupid 🙂 but I can’t see what, so any help would really be appreciated
cheers, thanks again Jeff
Thank you…I’ve been testing your demos and I think your contribution is great! I really like people who knows a little more than the rest and share their knowledge with the rest! good for you! 🙂