Responsive menu in pure CSS

Having menus that gracefully adapt to the size of your screen can be troublesome. Inspired by the collapsible menu of Bootstrap, here is a pure CSS implementation using the checkbox trick to toggle visibility.

The example attached features a smaller menu when the screen is narrower than 900px and is collapsed then narrower than 650px. I encourage you to test whatever suits you best.

On collapse toggle, the height and visibility are animated for a smooth transition. height: auto; is not directly supported, so we instead animate the max-height property. The downside is that you need to specify the max-height your menu will ever have. If you set this too high, you will experience a slight graphic glitch.

The toggle handle is also inspired from Bootstrap, but with minimal markup.

* the :checked selector is not supported prior to IE9, you may use a polyfill like http://selectivizr.com/ if you need to.

Happy coding !

To test it, resize your browser.

Live demo on CodePen.io

	<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
	<nav class="menu">
	<ul>
	<li>Home</li>
	<li>About us</li>
	<li>Our company</li>
	<li>Our team</li>
	<li>Contact us</li>
	</ul>
	<label for="navbar-checkbox" class="navbar-handle"></label>
	</nav>

view raw responsive-menu.html hosted with ❤ by GitHub

	// Smaller menu when on small screen
	// All padding and margin are in em, so they will scale as well
	@media (min-width : 900px) {
	.menu {
	font-size: 1.2em;
	}
	}
	.menu {
	padding: 0.5em;
	background: #eee;
	min-height: 2em;
	line-height: 1em;
	ul {
	transition: max-height .25s linear;
	margin: 0;
	padding: 0;
	text-align: center;
	}
	li {
	// visibility transition is on li because multiple transition selectors is not well supported
	transition: visibility .25s linear;
	display: inline-block;
	border: 1px solid;
	padding: .45em 1.1em;
	margin: 0 .3em;
	}
	}
	@media (max-width : 650px) {
	.menu {
	ul {
	max-height: 0;
	overflow: hidden;
	margin: 0 3.5em 0 1em;
	}
	li {
	visibility: hidden;
	display: block;
	padding: 0.5em 0.6em;
	border: none;
	}
	.navbar-handle {
	display: block;
	}
	}
	#navbar-checkbox:checked + .menu {
	ul {
	max-height: 300px; // Set this to the maximum height your menu will ever have.
	}
	li {
	visibility: visible;
	}
	.navbar-handle {
	&, &:after, &:before {
	border-color: #aaa;
	}
	}
	}
	}
	.navbar-checkbox {
	display: none;
	}
	// Will scale based on font-size
	// Appears as 3 parallel horizontal bars
	.navbar-handle {
	@height: 45px; // just a reference to compute em values on the fly
	display: none;
	cursor: pointer;
	position: relative;
	font-size: @height;
	padding: .5em 0;
	height: 0;
	width: 1em * 75px / @height;
	border-top: (1em * 6px / @height) solid;
	&:before, &:after {
	position: absolute;
	left: 0;
	right: 0;
	content: ' ';
	border-top: (1em * 6px / @height) solid;
	}
	&:before {
	top: 1em * 17px / @height;
	}
	&:after {
	top: 1em * 40px / @height;
	}
	}
	///////////
	.menu {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	.navbar-handle {
	position: absolute;
	font-size: 1.2em;
	top: 0.7em;
	right: 12px;
	z-index: 10;
	}
	}

view raw responsive-menu.less hosted with ❤ by GitHub

Tips for an efficient interview

I have only been in the Web industry for 5-6 years but I am already a bit sceptical when giving an interview. Some people are so good at talking about stuff they do not know at all. Hiring someone takes a lot of time and energy so when you end up with someone not up to the task, it can be really frustrating and demotivating.

I am absolutely not an interview specialist but here are some ideas I would have liked to have before.

Basic questions

Some competences are easy to verify in a verbal interview. I once had a front-end developer candidate who was claiming he was very competent in about everything I asked him. I was skeptical so I asked him very simply: “How would you write it in CSS if you wanted to put all links in a page in red ?” His answer was that he was a bit rusted about this one and would need to google it. The interview was over and no more time was wasted. 

In the interview aftermath, we asked ourselves how we could have lost less time and thus, the idea of basic questions over the phone quickly emerged and a lot of interviews were avoided.

Speed jobbing

For a second year in a row, me and one of my partner went to an event where around 50 candidates are meeting about 10 companies. They are matched by the organizers based on the needs of the companies and the resumes of the candidates. We met almost 15 very varied candidates for 5 minutes each; really in the concept of speed dating. It is a very efficient way to meet a lot of people. It they are interesting, you can call them for a real interview later and if not, well you only lost 5 minutes.

Real-world test

We recently made interviews where we tried a different approach. We let each candidate an hour to install and configure Symfony with the idea of creating a micro blog platform. They start with a fully functional LAMP environment, but have to do all the rest. In their hour, they have to get the hang of composer, understand Symfony’s documentation, download all the dependencies, start a bundle, etc. We are giving them full Internet access because we want to test their ability to work in a real-world environment. The idea is not to test their speed or if they already know the technology, but more to see how they work individually.

The results were amazing. The major point was when we asked them to explain what they did, where they found the documentation and what they were planning to do next. Some brought material, some had already practiced because we had told them it was about Symfony. We did not think it was unfair, it only shows their motivation and their ability to get everything they need to be up the task.

What do they like

Something I love to ask is what they preferred the most while discovering various technologies. I do not care if you like Ruby on Rails, Wordpress or Drupal, but if you have a strong feeling towards a technology, that you tested its virtues and alternatives, and that you want to promote it for what it is good at, you clearly show me that you like your job and you are not the average doer that simply executes an order without any opinion or passion.