Difference between revisions of "Template:ITB Indonesia"

Line 104: Line 104:
  
 
</style>
 
</style>
 +
 +
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<style>
 +
.navbar {
 +
    overflow: hidden;
 +
    background-color: #333;
 +
    font-family: Arial;
 +
}
 +
 +
.navbar a {
 +
    float: left;
 +
    font-size: 16px;
 +
    color: white;
 +
    text-align: center;
 +
    padding: 14px 16px;
 +
    text-decoration: none;
 +
}
 +
 +
.dropdown {
 +
    float: left;
 +
    overflow: hidden;
 +
}
 +
 +
.dropdown .dropbtn {
 +
    font-size: 16px;   
 +
    border: none;
 +
    outline: none;
 +
    color: white;
 +
    padding: 14px 16px;
 +
    background-color: inherit;
 +
}
 +
 +
.navbar a:hover, .dropdown:hover .dropbtn {
 +
    background-color: red;
 +
}
 +
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 +
.dropdown-content a {
 +
    float: none;
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 +
.dropdown-content a:hover {
 +
    background-color: #ddd;
 +
}
 +
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<div class="navbar">
 +
  <a href="#home" style="width: 12.5%">Home</a>
 +
  <a href="#news" style="width: 12.5%">News</a>
 +
  <div class="dropdown" style="width: 12.5%">
 +
    <button class="dropbtn">Dropdown
 +
      <i class="fa fa-caret-down"></i>
 +
    </button>
 +
    <div class="dropdown-content">
 +
      <a href="#">Link 1</a>
 +
      <a href="#">Link 2</a>
 +
      <a href="#">Link 3</a>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
<h3>Dropdown Menu inside a Navigation Bar</h3>
 +
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
 +
 +
</body>
 +
</html>

Revision as of 14:45, 24 October 2017

Home News
Link 1 Link 2 Link 3

Dropdown Menu inside a Navigation Bar

Hover over the "Dropdown" link to see the dropdown menu.