Skip to content
This repository has been archived by the owner on Sep 2, 2019. It is now read-only.

Commit

Permalink
Fixed menu rendering, now it looks awesome
Browse files Browse the repository at this point in the history
  • Loading branch information
@netroy
netroy committed Mar 17, 2012
1 parent c2e65c8 commit d30c911
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 175 deletions.
30 changes: 16 additions & 14 deletions css/layout.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

328 changes: 172 additions & 156 deletions css/src/css/menu.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,162 +3,178 @@
ul.menu {
color: #fff;
left: 20px;
bottom: 46px;
bottom: 45px;
font-size: 0.9em;
z-index: 20;
}

ul.menu, ul.menu ul {
position: absolute;
border: 1px solid #323232;
border-radius: 3px;
background: #4b4b4b !important;
margin: 0;
padding: 0;
box-shadow: -2px 4px 8px rgba(0,0,0,0.5);
}

ul.menu ul, ul.menu li {
text-indent: 0;
}

ul.menu li > ul {
display: none;
bottom: -4px;
left: 100%;
}

ul.menu:after {
border-color: #4b4b4b transparent transparent transparent;
border-style:solid;
position:absolute;
z-index:101;
left:60px;
bottom: 24;
border-width:6px;
width:0;
height:0;
}

ul.menu li {
position: relative;
display: block;
padding: 8px 15px;
min-width: 110px;
cursor: pointer;
position: relative;
border-bottom: 1px solid rgba(45,45,45,0.1);
border-top: 1px solid rgba(120,120,120,0.15);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

ul.menu li a {
color: #fff;
}

ul.menu li.separator {
border-top: 1px solid rgba(20,20,20,0.2);
border-bottom: 0 none;
padding: 0;
cursor: default;
}

ul.menu li:first-child {
box-shadow:inset 0px 1px 1px #6d6d6d;
border-radius: 3px 3px 0 0;
border-top-width: 0;
}

ul.menu li:last-child {
border-radius: 0 0 3px 3px;
border-bottom-width: 0;
}


ul.menu li.currenttree, ul.menu li:hover {
box-shadow: inset 0px 1px 1px #84c7f4;
background-color: #32a3f0;
text-shadow: 0 1px 2px #000;
}

ul.menu li.separator:hover {
background-color: transparent;
box-shadow: none;
}

li.account:hover::after,
li.downloads:hover::after,
li.settings:hover::after,
li.language:hover::after,
li.aboutus:hover::after {
content: '\25b6';
position: absolute;
right: 8px;
color: #FFE;
opacity: 0.6;
text-shadow: 0 0 1px #000;
}

ul.menu li:hover > ul {
display: block;
}

ul.menu ul.account {
bottom: -60px;
}

ul.menu ul.downloads {
bottom: -33px;
}

ul.menu ul.settings {
width: 195px;
bottom: -64px;
}

ul.menu ul.settings ul.language {
bottom: -295px;
width: 180px;
}

ul.menu ul.settings ul.language li{
padding: 2px 10px;
font-size: 0.9em;
}

ul.menu ul.aboutus {
width: 159px;
}


/* Not Yet implemented Menus */
#left ul li.notyet, #left ul li.notyet:hover {
background:#4b4b4b !important;
cursor:default;
border:none !important;
}

#left ul li.notyet a, #left ul li.notyet:hover a {
color:rgba(255,255,255,0.3) !important;
border:none !important;
}

/* Icon Menus */
ul.menu li.icon {
padding-left: 30px;
background-repeat: no-repeat;
background-position: 8px 6px;
}

ul.menu li.settings {
background-position: -100px -50px;
}
ul.menu li.downloads {
background-position: -100px -25px;
}
ul.menu li.aboutus {
background-position: -50px -50px;
}
ul.menu li.logout {
background-position: -75px -50px;

&, & ul {
position: absolute;
border: 1px solid #323232;
border-radius: 3px;
background: #4b4b4b !important;
margin: 0;
padding: 0;
box-shadow: -2px 4px 10px rgba(0,0,0,0.5);
}

ul, li {
text-indent: 0;
}

li {
position: relative;
display: block;
padding: 8px 15px;
min-width: 110px;
cursor: pointer;
position: relative;
border-bottom: 1px solid rgba(45,45,45,0.1);
border-top: 1px solid rgba(120,120,120,0.15);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);

& > ul {
display: none;
bottom: -4px;
left: 100%;
}

& ul li {
color: #fff;
}

&.currenttree, &:hover {
box-shadow: inset 0px 1px 1px #84c7f4;
background-color: #32a3f0;
text-shadow: 0 1px 2px #ccc;
color: #000;
}

&:after {
border-color: #4b4b4b transparent transparent transparent;
border-style:solid;
position:absolute;
z-index:101;
left:60px;
bottom: 24;
border-width:6px;
width:0;
height:0;
}

a {
color: #fff;
}

&.separator {
border-top: 1px solid rgba(20,20,20,0.2);
border-bottom: 0 none;
padding: 0;
cursor: default;
}

&:first-child {
box-shadow:inset 0px 1px 1px #6d6d6d;
border-radius: 3px 3px 0 0;
border-top-width: 0;
}

&:last-child {
border-radius: 0 0 3px 3px;
border-bottom-width: 0;
}

}

li.settings, li.downloads, li.aboutus,li.logout {
&::before {
content: ' ';
background: url('/images/icon-sprites.png') no-repeat;
display: inline-block;
width: 25px;
height: 16px;
float: left;
}
}


li.settings::before {
background-position: -100px -50px;
}
li.downloads::before {
background-position: -100px -25px;
}
li.aboutus::before {
background-position: -50px -50px;
}
li.logout::before {
background-position: -75px -50px;
}



li.account, li.downloads, li.settings, li.language, li.aboutus {
position: relative;
&::after {
//content: '\25b6';
position: absolute;
right: 8px;
color: #FFE;
opacity: 0.3;
text-shadow: 0 0 1px #000;
}
&:hover::after {
opacity: 0.8;
}
}

&::after {
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -20px;
width: 0;
height: 0;
content: ' ';
border: 10px solid transparent;
border-top-color: #333;
z-index: 6;
}

li.separator:hover {
background-color: transparent;
box-shadow: none;
}

li:hover > ul {
display: block;
}

ul.account {
bottom: -60px;
}

ul.downloads {
bottom: -33px;
}

ul.settings {
width: 195px;
bottom: -64px;
}

ul.settings ul.language {
bottom: -295px;
width: 180px;
}

ul.settings ul.language li{
padding: 2px 10px;
font-size: 0.9em;
}

ul.aboutus {
width: 159px;
}


}
Loading

0 comments on commit d30c911

Please sign in to comment.