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

 
(43 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">
−
@charset "UTF-8";
+
#cssmenu {position: fixed; width: 100%; padding: 0; margin: 0px auto; border: 0;}
−
#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, #cssmenu li {list-style: none; margin: 0; padding: 0;}
+
#cssmenu ul {position: relative; z-index: 597; }
−
#cssmenu ul {position: relative; z-index: 597; }
+
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
−
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
+
#cssmenu ul li.hover,
−
#cssmenu ul li.hover,
+
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
−
#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 {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
+
#cssmenu ul ul li {float: none;}
−
#cssmenu ul ul li {float: none;}
+
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
−
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
+
#cssmenu ul li:hover > ul { visibility: visible;}
−
#cssmenu ul li:hover > ul { visibility: visible;}
+
#cssmenu ul ul {bottom: 0; left: 0;}
−
#cssmenu ul ul {bottom: 0; left: 0;}
+
#cssmenu ul ul {margin-top: 0; }
−
#cssmenu ul ul {margin-top: 0; }
+
#cssmenu ul ul li {font-weight: normal;}
−
#cssmenu ul ul li {font-weight: normal;}
+
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
−
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
+
  
−
#cssmenu {
+
#cssmenu {
−
  background-color: #f8f8f8;
+
  background-color: #f8f8f8;
−
  border-bottom: 4px solid #15bdb6;
+
  border-bottom: 4px solid #eea69d;
−
  font-family: 'Titillium Web', Tahoma, sans-serif;
+
  font-family: 'Titillium Web', Tahoma, sans-serif;
−
  font-size: 14px;
+
  font-size: 14px;
−
  font-weight: bold;
+
  font-weight: bold;
−
  margin: 0px auto;
+
  margin: 0px auto;
−
  z-index: 7000;  
+
  z-index: 7000;  
−
  clear: both;
+
  clear: both;
−
  top: 14px;
+
  top: 14px;
−
}
+
}
  
−
  #cssmenu > ul { *display: inline-block; text-align: center;}
+
  #cssmenu > ul { *display: inline-block; text-align: center;}
  
−
  #cssmenu:after, #cssmenu ul:after {
+
  #cssmenu:after, #cssmenu ul:after {
−
    content: '';
+
    content: '';
−
    display: block;
+
  display: block;
−
    clear: both;  
+
    clear: both;  
−
}
+
}
  
−
#cssmenu a {
+
#cssmenu a {
−
    background: #f8f8f8;
+
    background: #f8f8f8;
−
    color: #1e8380;
+
    color: #e74c3c;
−
    padding: 0 20px;  
+
    padding: 0 20px;  
−
}
+
}
−
#cssmenu ul { text-transform: uppercase; left: 30px; text-align: center;}
+
  
−
    #cssmenu ul ul {
+
#cssmenu ul { text-transform: uppercase; left: 30px; text-align: center;}
−
      border-top: 4px solid #15bdb6;
+
−
      text-transform: none;
+
    #cssmenu ul ul {
−
      min-width: 200px;  
+
      border-top: 4px solid #e74c3c;
−
}
+
      text-transform: none;
−
      #cssmenu ul ul a {
+
      min-width: 200px;  
−
        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 a {
−
#cssmenu > ul > li > a { line-height: 48px; }
+
        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:first-child > a { border-top: 1px solid #332e2e; }
+
#cssmenu ul ul li { position: relative }
−
        #cssmenu ul ul li:hover > a { background: #1e8380;}
+
  
−
        #cssmenu ul ul li:last-child > a {
+
#cssmenu > ul > li > a { line-height: 48px; }
−
          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.has-sub > a:after {
+
#cssmenu ul ul li:first-child > a { border-top: 1px solid #332e2e; }
−
          content: '+';
+
       
−
          position: absolute;
+
#cssmenu ul ul li:hover > a { background: #1e8380;}
−
          top: 50%;
+
−
          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%;
+
−
}
+
  
−
#nav-box {
+
        #cssmenu ul ul li:last-child > a {
−
display: block;
+
          box-shadow: 0 1px 0 #e74c3c;
−
position: relative;
+
}
−
width: 100%;
+
       
−
height: auto;
+
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 0; }
−
margin: 0px auto;
+
 
−
margin-bottom: 20px;
+
        #cssmenu ul ul li.has-sub > a:after {
−
background: transparent;
+
          content: '+';
−
        top: 0px;
+
          position: absolute;
−
        clear: both;
+
          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>
+
 
−
<div id="nav-box">
+
<body>
−
<div id="cssmenu">
+
</body>
−
  <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>
+
−
        <ul>
+
−
          <li><a href='https://2014.igem.org/Team:UI-Indonesia/Log_Book/Lab_Diary'>Lab Diary</a></li>
+
−
          <li><a href='https://2014.igem.org/Team:UI-Indonesia/Log_Book/Protocol'>Protocol</a></li>
+
−
  <li><a href='https://2014.igem.org/Team:UI-Indonesia/Log_Book/Safety'>Safety</a></li>
+
−
  <li><a href='https://2014.igem.org/Team:UI-Indonesia/Log_Book/References'>References</a></li>
+
−
        </ul>
+
−
    </li>
+
−
<li class='has-sub '><a href='#'>Team</a>
+
−
        <ul>
+
−
          <li><a href='https://2014.igem.org/Team:UI-Indonesia/Team/Profile'>Profile</a></li>
+
−
          <li><a href='https://2014.igem.org/Team:UI-Indonesia/Team/Universitas_Indonesia'>Universitas Indonesia</a></li>
+
−
  <li><a href='https://2014.igem.org/Team:UI-Indonesia/Team/IHVCB-UI'>IHVCB-UI</a></li>
+
−
  <li><a href='https://2014.igem.org/Team:UI-Indonesia/Team/Sponsors'>Sponsors</a></li>
+
−
  <li><a href='https://2014.igem.org/Team:UI-Indonesia/Team/Attributions'>Attributions</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="https://2014.igem.org"><img src="https://static.igem.org/mediawiki/2014/2/2e/UI-Indonesia_Image_IGEMgreen.png"  height="40px"></a></li>
+
−
</div>
+
−
</div>
+
−
</body>
+
 
</html>
 
</html>

Latest revision as of 03:29, 20 October 2016