Skip to content

Instantly share code, notes, and snippets.

@rfischer20

rfischer20/gist:4723977

Created February 6, 2013 16:55
Show Gist options
  • Save rfischer20/4723977 to your computer and use it in GitHub Desktop.
Save rfischer20/4723977 to your computer and use it in GitHub Desktop.
Download ZIP
Example files for How To Create An Admin Menu Using CSS on 20spokes' Blog http://www.20spokes.com/2013/02/how-to-create-an-admin-menu-using-css/
Raw
gistfile1.html
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet"/>
</head>
<body>
<ul class="submenu">
<li class="active">
<a href="overall" class="overall">
Overall
</a>
</li>
<li>
<a href="recent_tests" class="recent_tests">
Recent Tests
</a>
</li>
<li>
<a href="users" class="users">
Users
</a>
</li>
<li>
<a href=activity" class="activity">
Activity
</a>
</li>
</ul>
</body>
</html>
Raw
gistfile2.css
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
ul.submenu {
background: #6c747e;
list-style: none;
margin: 0;
padding: 0;
width: 200px;
}
ul.submenu li {
-moz-box-shadow: inset 0px 1px 8px -3px white;
-webkit-box-shadow: inset 0px 1px 8px -3px white;
box-shadow: inset 0px 1px 8px -3px white;
background-color: #4f555e;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6c747e), to(#4f555e));
background-image: -webkit-linear-gradient(top, #6c747e, #4f555e);
background-image: -moz-linear-gradient(top, #6c747e, #4f555e);
background-image: -ms-linear-gradient(top, #6c747e, #4f555e);
background-image: -o-linear-gradient(top, #6c747e, #4f555e);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$color2, endColorstr=$color1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=$color2, endColorstr=$color1)";
border-bottom: 1px solid #363636;
}
ul.submenu li.active {
background-color: #2f96b4;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5bc0dc), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0dc, #2f96b4);
background-image: -moz-linear-gradient(top, #5bc0dc, #2f96b4);
background-image: -ms-linear-gradient(top, #5bc0dc, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0dc, #2f96b4);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$color2, endColorstr=$color1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=$color2, endColorstr=$color1)";
}
ul.submenu li a {
font-family: Arial;
font-weight: 500;
font-size: 16px;
color: #fff;
text-shadow: 1px 1px #000;
display: block;
padding: 22px 0 22px 47px;
text-decoration: none;
background-position: 15px;
}
ul.submenu li a:hover{
background-position: 15px;
}
a.overall {
background: url(images/glyphicons-chart.png) center left no-repeat;
}
a.recent_tests {
background: url(images/glyphicons-calendar.png) center left no-repeat;
}
a.users{
background: url(images/glyphicons-user.png) center left no-repeat;
}
a.activity {
background: url(images/glyphicons-history.png) center left no-repeat;
}
a.overall:hover {
background: url(images/glyphicons-chart-highlight.png) center left no-repeat;
}
a.recent_tests:hover {
background: url(images/glyphicons-calendar-highlight.png) center left no-repeat;
}
a.users:hover{
background: url(images/glyphicons-user-highlight.png) center left no-repeat;
}
a.activity:hover {
background: url(images/glyphicons-history-highlight.png) center left no-repeat;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment