Skip to content

Instantly share code, notes, and snippets.

@charlycoste

charlycoste/menu.html

Last active December 10, 2015 17:18
Show Gist options
  • Save charlycoste/4466282 to your computer and use it in GitHub Desktop.
Save charlycoste/4466282 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive menu system with media queries
Raw
menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li><a href="#"><span>Item 1</span></a></li>
<li><a href="#"><span>Item 2</span></a></li>
<li><a href="#"><span>Item 3</span></a></li>
<li><a href="#"><span>Item 4</span></a></li>
<li><a href="#"><span>Item 5</span></a></li>
</ul>
</body>
</html>
Raw
style.css
body {
font-size : 62.5%;
}
ul, li, a {
border : 1px solid #000;
border : none;
}
ul {
width : 750px;
list-style : none;
padding : 0;
margin : 0;
}
li {
display : block;
float : left;
overflow : hidden;
}
a {
display : block;
font-size : 3em;
line-height : 3em;
background : transparent url(http://placehold.it/30) no-repeat scroll 0 center;
padding-left : 40px;
width : 110px;
}
@media (max-width: 750px) {
ul {
width : 100%;
}
a {
background : transparent url(http://placehold.it/150) no-repeat scroll 0 0;
width : 150px;
height : 150px;
padding : 0;
margin : 0;
}
span {
height : 1px;
width : 1px;
position : absolute;
overflow : hidden;
top : -1000px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment