A fully responsive menu without any need of JavaScript and using less than 200 lines of functional CSS code.
A Pen by Claudio Holanda on CodePen.
| <!doctype html> | |
| <html lang="en" prefix="op: http://media.facebook.com/op#"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- URL of the web version of this article --> | |
| <!-- TODO: Change the domain to match the domain of your website --> | |
| <link rel="canonical" href="http://example.com/article.html"> | |
| <meta property="op:markup_version" content="v1.0"> | |
| </head> | |
| <body> |
Dropdown with Multiple checkbox select with jQuery.
A Pen by Mahmoud Elmahdi on CodePen.
| <ul class="rp-grid"> | |
| <li> | |
| <div class="rp-item rp-img-1"> | |
| <div class="rp-info"> | |
| <h3>PAUL CACKETT</h3> | |
| <p>CHIEF CREATIVE OFFICER<a href="https://twitter.com/Rockpack">Follow on Twitter</a></p> | |
| </div> | |
| </div> | |
| </li> | |
| <li> |
| <div class="holder"> | |
| <h1> Bounce Effect </h1> | |
| <div class="avatar"> | |
| <a href="https://twitter.com/simonbusborg" target="_blank"> | |
| <img src="http://cl.busb.org/L79J/dj.png" class="user"/> | |
| </a> | |
| </div> | |
| <p>Border bounce effect on hover</p> | |
| </div> |
| <div id="banner"></div> | |
| <span>Curso Integral de CSS3<br /> | |
| <a href="http://maweb.mx/" target="_blank">maweb.mx/</a></span> |