Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


An open collection of menu styles that use the line as creative design element.

Subscribe to updates I use LineMenuStyles

Statistics on LineMenuStyles

Number of watchers on Github 645
Number of open issues 4
Average time to close an issue about 16 hours
Main language CSS
Average time to merge a PR about 8 hours
Open pull requests 1+
Closed pull requests 0+
Last commit about 3 years ago
Repo Created over 3 years ago
Repo Last Updated over 1 year ago
Size 128 KB
Homepage http://tympanus.n...
Organization / Authorcodrops
Page Updated
Do you use LineMenuStyles? Leave a review!
View open issues (4)
View LineMenuStyles activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating LineMenuStyles for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Line Menu Styles

An open collection of menu styles that use the line as a creative design element.

Article on Codrops


Line Menu Styles


Please don't add any other changes to a pull request for new styles. If you want to contribute some other updates to the repo, make sure to add those in a different pull request.

You can submit your style in the following way:

  1. Fork this repo
  2. Copy the following snippet and insert it before the dummy section: html <section class="section section--menu" id="Yourstyle"> <h2 class="section__title">Your style</h2> <span class="link-copy"></span> <nav class="menu menu--yourstyle"> <ul class="menu__list"> <li class="menu__item menu__item--current"><a class="menu__link">Home</a></li> <li class="menu__item"><a class="menu__link">Portfolio</a></li> <li class="menu__item"><a class="menu__link">Blog</a></li> <li class="menu__item"><a class="menu__link">Shop</a></li> <li class="menu__item"><a class="menu__link">Contact</a></li> </ul> </nav> <p class="info">Style created by <a href="">[your name]</a></p> </section>
  3. Choose a Shakespeare character name as title and replace it with yourstyle (id, title, menu--[name])
  4. Add your styles to the component.css right before the media query. Please don't forget the -webkit- prefixed properties where necessary.
  5. Add your name and social/website link to the info paragraph.
  6. Please credit if you base your style on an existing design. You can do so by adding a paragraph with the class info after your menu.

Please test your styles in the latest stable releases of all common browsers (Chrome, Safari, Firefox, IE), preferrable on Win and Mac and mobile if possible.

We'll carefully select the best styles.


Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell as-is.

Read more here: License



Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

Codrops 2016

LineMenuStyles open issues Ask a question     (View All Issues)
  • over 3 years Please help to produce the effect on hover.
LineMenuStyles open pull requests (View All Pulls)
  • Add Falstaff Style
LineMenuStyles list of languages used
Other projects in CSS