Skip to content

Instantly share code, notes, and snippets.

@Ondreas
Created September 19, 2013 13:21
Show Gist options
  • Save Ondreas/6623374 to your computer and use it in GitHub Desktop.
Save Ondreas/6623374 to your computer and use it in GitHub Desktop.
Three Line Menu 'Navicon' with CSS Border (in EMS)
<! DOCTYPE html>
<html>
<head>
<title>Three Line Menu 'Navicon' with CSS3 Box-Shadow</title>
<!-- http://css-tricks.com/three-line-menu-navicon/ -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- <link rel="stylesheet" type="text/css" href="navicon.css"> -->
<style type="text/css">
.border-menu {
position: relative;
padding-left: 1.25em;
}
.border-menu:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #000;
border-bottom: 0.125em solid #000;
}
</style>
</head>
<body>
<a href="#menu" class="border-menu">Menu</a>
</body>
</html>
.border-menu {
position: relative;
padding-left: 1.25em;
}
.border-menu:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #000;
border-bottom: 0.125em solid #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment