Skip to content

Instantly share code, notes, and snippets.

@Ondreas

Ondreas/MS 'Navicon' with CSS.html

Created September 19, 2013 12:40
Show Gist options
  • Save Ondreas/6622847 to your computer and use it in GitHub Desktop.
Save Ondreas/6622847 to your computer and use it in GitHub Desktop.
Download ZIP
Microsoft Menu 'Navicon' with CSS http://dabblet.com/gist/3871069
Raw
MS 'Navicon' with CSS.html
<!DOCTYPE html>
<html>
<head>
<title>Microsoft Menu 'Navicon' with CSS</title>
<meta charset="utf-8"/>
<style type="text/css">
.menubar {
background: #f1f1f1;
border: 1px solid #ccc;
padding: 1em;
margin: 0 auto;;
}
.menubutton {
display: inline-block;
width: 1.5em;
height: 1.5em;
border: 1px solid #ccc;
background: #fff;
padding: 0.5em;
border-radius: 3px;
position: relative;
}
.menubutton:before {
/* three lines */
content: "";
position: absolute;
top: 25%;
left: 20%;
width: 1.5em;
height:0.2em;
border-top: .8em double #000;
border-bottom: .3em solid #000;
}
.menubutton:after {
/* vertical background-coloured bar to create 'bullets' */
content: "";
position: absolute;
top: 0;
left: 0.7em;
width: 0.2em;
height: 100%;
background: inherit;
}
.menubutton:hover {
background: #def;
border-color: #bcd;
}
</style>
</head>
<body>
<div class="menubar">
<a class="menubutton" href="#"></a>
<a class="menubutton" href="#"></a>
<a class="menubutton" href="#"></a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment