Difference between revisions of "Template:UI-Indonesia/css/menu bar"
Ariefpm13597 (Talk | contribs) |
Jihandawami (Talk | contribs) |
||
| (44 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
{{:Template:UI-Indonesia/wiki_reset}} | {{:Template:UI-Indonesia/wiki_reset}} | ||
| + | |||
<html> | <html> | ||
| − | <head> | + | <head> |
| − | <meta charset="utf-8"> | + | <meta charset="utf-8"> |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| − | <meta name="viewport" content="initial-scale=0.5"> | + | <meta name="viewport" content="initial-scale=0.5"> |
| − | + | <style type="text/css"> | |
| − | <style type="text/css"> | + | #cssmenu {position: fixed; width: 100%; padding: 0; margin: 0px auto; border: 0;} |
| − | + | #cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;} | |
| − | #cssmenu {position: fixed; width: 100%; padding: 0; margin: 0px auto; border: 0;} | + | #cssmenu ul {position: relative; z-index: 597; } |
| − | #cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;} | + | #cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} |
| − | #cssmenu ul {position: relative; z-index: 597; } | + | #cssmenu ul li.hover, |
| − | #cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} | + | #cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;} |
| − | #cssmenu ul li.hover, | + | #cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;} |
| − | #cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;} | + | #cssmenu ul ul li {float: none;} |
| − | #cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;} | + | #cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } |
| − | #cssmenu ul ul li {float: none;} | + | #cssmenu ul li:hover > ul { visibility: visible;} |
| − | #cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } | + | #cssmenu ul ul {bottom: 0; left: 0;} |
| − | #cssmenu ul li:hover > ul { visibility: visible;} | + | #cssmenu ul ul {margin-top: 0; } |
| − | #cssmenu ul ul {bottom: 0; left: 0;} | + | #cssmenu ul ul li {font-weight: normal;} |
| − | #cssmenu ul ul {margin-top: 0; } | + | #cssmenu a { display: block; line-height: 1em; text-decoration: none; } |
| − | #cssmenu ul ul li {font-weight: normal;} | + | |
| − | #cssmenu a { display: block; line-height: 1em; text-decoration: none; } | + | |
| − | #cssmenu { | + | #cssmenu { |
| − | + | background-color: #f8f8f8; | |
| − | + | border-bottom: 4px solid #eea69d; | |
| − | + | font-family: 'Titillium Web', Tahoma, sans-serif; | |
| − | + | font-size: 14px; | |
| − | + | font-weight: bold; | |
| − | + | margin: 0px auto; | |
| − | + | z-index: 7000; | |
| − | + | clear: both; | |
| − | + | top: 14px; | |
| − | } | + | } |
| − | + | #cssmenu > ul { *display: inline-block; text-align: center;} | |
| − | + | #cssmenu:after, #cssmenu ul:after { | |
| − | + | content: ''; | |
| − | + | display: block; | |
| − | + | clear: both; | |
| − | } | + | } |
| − | #cssmenu a { | + | #cssmenu a { |
| − | + | background: #f8f8f8; | |
| − | + | color: #e74c3c; | |
| − | + | padding: 0 20px; | |
| − | + | } | |
| − | + | ||
| − | + | #cssmenu ul { text-transform: uppercase; left: 30px; text-align: center;} | |
| − | + | ||
| − | + | #cssmenu ul ul { | |
| − | + | border-top: 4px solid #e74c3c; | |
| − | + | text-transform: none; | |
| − | + | min-width: 200px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #cssmenu ul ul a { | |
| − | #cssmenu | + | background: #e74c3c; |
| + | color: #FFF; | ||
| + | border: 1px solid #ffffff; | ||
| + | border-top: 0 none; | ||
| + | line-height: 150%; | ||
| + | padding: 16px 20px; | ||
| + | } | ||
| + | |||
| + | #cssmenu ul ul ul { border-top: 0 none; } | ||
| − | #cssmenu ul ul li | + | #cssmenu ul ul li { position: relative } |
| − | + | ||
| − | + | #cssmenu > ul > li > a { line-height: 48px; } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #cssmenu ul ul li:first-child > a { border-top: 1px solid #332e2e; } | |
| − | + | ||
| − | + | #cssmenu ul ul li:hover > a { background: #1e8380;} | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | #nav-box { | + | #cssmenu ul ul li:last-child > a { |
| − | + | box-shadow: 0 1px 0 #e74c3c; | |
| − | + | } | |
| − | + | ||
| − | + | #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 0; } | |
| − | + | ||
| − | + | #cssmenu ul ul li.has-sub > a:after { | |
| − | + | content: '+'; | |
| − | + | position: absolute; | |
| − | + | top: 50%; | |
| − | } | + | right: 15px; |
| − | </style> | + | margin-top: -8px; |
| − | <link href="//fonts.googleapis.com/css?family=Titillium+Web:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900" rel="stylesheet" type="text/css"> | + | } |
| − | <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:UI-Indonesia/css/stylesheet/standard?action=raw&ctype=text/css"> | + | |
| + | #cssmenu ul li:hover > a, #cssmenu ul li.active > a { | ||
| + | background: #e74c3c; | ||
| + | color: #FFF; | ||
| + | } | ||
| + | |||
| + | #cssmenu ul li.has-sub > a:after { | ||
| + | content: '+'; | ||
| + | margin-left: 5px; | ||
| + | } | ||
| + | |||
| + | #cssmenu ul li.last ul { | ||
| + | left: auto; | ||
| + | right: 0; | ||
| + | } | ||
| + | |||
| + | #cssmenu ul li.last ul ul { | ||
| + | left: auto; | ||
| + | right: 99.5%; | ||
| + | } | ||
| + | |||
| + | #nav-box { | ||
| + | display: block; | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | margin: 0px auto; | ||
| + | margin-bottom: 20px; | ||
| + | background: transparent; | ||
| + | top: 0px; | ||
| + | clear: both; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <link href="//fonts.googleapis.com/css?family=Titillium+Web:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900" rel="stylesheet" type="text/css"> | ||
| + | <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:UI-Indonesia/css/stylesheet/standard?action=raw&ctype=text/css"> | ||
</head> | </head> | ||
| − | <body | + | |
| − | + | <body> | |
| − | + | </body> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </body> | + | |
</html> | </html> | ||
Latest revision as of 03:29, 20 October 2016
