Difference between revisions of "Template:UI-Indonesia/css/menu bar"

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">
 +
#cssmenu {position: fixed; width: 100%; padding: 0; margin: 0px auto; border: 0;}
 +
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
 +
#cssmenu ul {position: relative; z-index: 597; }
 +
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
 +
#cssmenu ul li.hover,
 +
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
 +
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
 +
#cssmenu ul ul li {float: none;}
 +
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
 +
#cssmenu ul li:hover > ul { visibility: visible;}
 +
#cssmenu ul ul {bottom: 0; left: 0;}
 +
#cssmenu ul ul {margin-top: 0; }
 +
#cssmenu ul ul li {font-weight: normal;}
 +
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
 +
 
 +
#cssmenu {
 +
  background-color: #f8f8f8;
 +
  border-bottom: 4px solid #15bdb6;
 +
  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;}
  
−
<style type="text/css">
+
  #cssmenu:after, #cssmenu ul:after {
−
#cssmenu {position: fixed; width: 100%; padding: 0; margin: 0px auto; border: 0;}
+
    content: '';
−
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
+
  display: block;
−
#cssmenu ul {position: relative; z-index: 597; }
+
    clear: both;  
−
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
+
}
−
#cssmenu ul li.hover,
+
−
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
+
−
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
+
−
#cssmenu ul ul li {float: none;}
+
−
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
+
−
#cssmenu ul li:hover > ul { visibility: visible;}
+
−
#cssmenu ul ul {bottom: 0; left: 0;}
+
−
#cssmenu ul ul {margin-top: 0; }
+
−
#cssmenu ul ul li {font-weight: normal;}
+
−
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
+
  
−
#cssmenu {
+
#cssmenu a {
−
  background-color: #f8f8f8;
+
    background: #f8f8f8;
−
  border-bottom: 4px solid #15bdb6;
+
    color: #1e8380;
−
  font-family: 'Titillium Web', Tahoma, sans-serif;
+
    padding: 0 20px;  
−
  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 ul { text-transform: uppercase; left: 30px; text-align: center;}
 +
 +
    #cssmenu ul ul {
 +
      border-top: 4px solid #15bdb6;
 +
      text-transform: none;
 +
      min-width: 200px;
 +
}
  
−
  #cssmenu:after, #cssmenu ul:after {
+
      #cssmenu ul ul a {
−
    content: '';
+
        background: #15bdb6;
−
    display: block;
+
        color: #FFF;
−
    clear: both;  
+
        border: 1px solid #1e8380;
−
}
+
        border-top: 0 none;
 +
        line-height: 150%;
 +
        padding: 16px 20px;
 +
}
 +
     
 +
#cssmenu ul ul ul { border-top: 0 none; }
  
−
#cssmenu a {
+
#cssmenu ul ul li { position: relative }
−
    background: #f8f8f8;
+
−
    color: #1e8380;
+
−
    padding: 0 20px;
+
−
}
+
−
#cssmenu ul { text-transform: uppercase; left: 30px; text-align: center;}
+
  
−
    #cssmenu ul ul {
+
#cssmenu > ul > li > a { line-height: 48px; }
−
      border-top: 4px solid #15bdb6;
+
−
      text-transform: none;
+
−
      min-width: 200px;
+
−
}
+
−
      #cssmenu ul ul a {
+
−
        background: #15bdb6;
+
−
        color: #FFF;
+
−
        border: 1px solid #1e8380;
+
−
        border-top: 0 none;
+
−
        line-height: 150%;
+
−
        padding: 16px 20px;
+
−
}
+
−
      #cssmenu ul ul ul { border-top: 0 none; }
+
  
−
      #cssmenu ul ul li { position: relative }
+
#cssmenu ul ul li:first-child > a { border-top: 1px solid #332e2e; }
−
#cssmenu > ul > li > a { line-height: 48px; }
+
       
 +
#cssmenu ul ul li:hover > a { background: #1e8380;}
  
−
#cssmenu ul ul li:first-child > a { border-top: 1px solid #332e2e; }
+
        #cssmenu ul ul li:last-child > a {
−
         #cssmenu ul ul li:hover > a { background: #1e8380;}
+
          border-radius: 0 0 5px 5px;
 +
          box-shadow: 0 1px 0 #1e8380;  
 +
}
 +
          
 +
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
  
−
        #cssmenu ul ul li:last-child > a {
+
        #cssmenu ul ul li.has-sub > a:after {
−
          border-radius: 0 0 5px 5px;
+
          content: '+';
−
          box-shadow: 0 1px 0 #1e8380;  
+
          position: absolute;
−
}
+
          top: 50%;
−
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
+
          right: 15px;
 +
          margin-top: -8px;
 +
}
 +
   
 +
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
 +
      background: #1e8380;
 +
  border-radius: 5px 5px 5px 5px;
 +
      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%;
 +
}
  
−
        #cssmenu ul ul li.has-sub > a:after {
+
#nav-box {
−
          content: '+';
+
display: block;
−
          position: absolute;
+
position: relative;
−
          top: 50%;
+
width: 100%;
−
          right: 15px;
+
height: auto;
−
          margin-top: -8px;
+
margin: 0px auto;
−
}
+
margin-bottom: 20px;
−
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
+
background: transparent;
−
      background: #1e8380;
+
        top: 0px;
−
  border-radius: 5px 5px 5px 5px;
+
        clear: both;
−
      color: #FFF;
+
}
−
}
+
</style>
−
    #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 {
+
<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">
−
display: block;
+
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:UI-Indonesia/css/stylesheet/standard?action=raw&ctype=text/css">
−
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>
 
−
<div id="nav-box">
 
−
<div id="cssmenu">
 
−
  <ul>
 
−
    <li class='active'><a href='#'>Home</a></li>
 
−
    <li class='has-sub '><a href='#'>Our Project</a></li>
 
−
<li class='has-sub '><a href='#'>Parts</a></li>
 
−
<li class='has-sub '><a href='#'>Modelling</a></li>
 
−
<li class='has-sub '><a href='#'>Human Practice</a></li>
 
−
<li class='has-sub '><a href='#'>Medal Criteria</a></li>
 
−
<li class='has-sub '><a href='#'>Team</a></li>
 
  
−
</div>
+
<body>
−
</div>
+
<div id="nav-box">
−
</body>
+
<div id="cssmenu">
 +
  <ul>
 +
    <li class='active'><a href='#'>Home</a></li>
 +
    <li class='has-sub '><a href='#'>Our Project</a></li>
 +
<li class='has-sub '><a href='#'>Parts</a></li>
 +
<li class='has-sub '><a href='#'>Modelling</a></li>
 +
<li class='has-sub '><a href='#'>Human Practice</a></li>
 +
<li class='has-sub '><a href='#'>Medal Criteria</a></li>
 +
<li class='has-sub '><a href='#'>Team</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 06:36, 14 October 2016