Skip to content

Instantly share code, notes, and snippets.

@haimingpro
Created January 20, 2015 05:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haimingpro/bc076977f6067e3b7d09 to your computer and use it in GitHub Desktop.
Save haimingpro/bc076977f6067e3b7d09 to your computer and use it in GitHub Desktop.
Mac Finder (not finished)
<div id="bar">
<ul>
<li class="menuItem">
<ul class="submenu">
<li>Om denne mac</li>
<li>Softwareopdatering...</li>
<li>App store...</li>
<hr>
<li>Systemindstillinger</li>
</ul>
</li>
<li class="menuItem">Chrome</li>
<li class="menuItem">Fil</li>
<li class="menuItem">Rediger</li>
<li class="menuItem">Vis</li>
<li class="menuItem">Historik</li>
<li class="menuItem">Bogmærker</li>
<li class="menuItem">Vindue</li>
<li class="menuItem">Hjælp</li>
</ul>
</div>
*{
margin: 0px;
font-family: arial;
}
body{
background-image: url('http://www.tonymacx86.com/attachments/apple-news-rumors/58155d1370539336-mac-os-x-10-0-10-8-wallpaper-intro-videos-defaultdesktop.jpg');
background-size: cover;
}
#bar{
width: 100%;
height: 24px;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
ul, li{
list-style: none;
padding: 0;
cursor: default;
}
.menuItem{
float: left;
margin-right: 10px;
padding-top: 3px;
font-family: arial;
color: #505050;
padding: 3px 8px 3px 8px;
}
.menuItem:first-of-type{
font-size: 1.2em;
margin-left: 10px;
padding: 3px 8px 0px 8px;
height: 21px;
}
.menuItem:nth-child(2){
font-weight: bold;
}
.menuItem:hover{
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #405fed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#405fed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4096ee 0%,#405fed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4096ee 0%,#405fed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4096ee 0%,#405fed 100%); /* IE10+ */
background: linear-gradient(to bottom, #4096ee 0%,#405fed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#405fed',GradientType=0 ); /* IE6-9 */
color: #fff;
}
.submenu{
opacity: 1 !important;
background-color: #fff;
padding: 5px 5px 0px 15px;
position: absolute;
margin-top: -2px;
margin-left: -8px;
border-radius: 0px 0px 5px 5px;
font-size: .85em;
color: #333;
}
.submenu li{
padding: 2px 0px;
}
.submenu li:hover{
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #405fed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(100%,#405fed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4096ee 0%,#405fed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4096ee 0%,#405fed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4096ee 0%,#405fed 100%); /* IE10+ */
background: linear-gradient(to bottom, #4096ee 0%,#405fed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#405fed',GradientType=0 ); /* IE6-9 */
}
.submenu hr{
width: 110%;
margin: 5px 0px 5px -15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment