Difference between revisions of "Template:UCopenhagen/Header"

 
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
−
ul {
+
.navbar {
−
  list-style-type: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
 
   overflow: hidden;
 
   overflow: hidden;
−
   position: fixed;
+
   background-color: #fff;
−
   top: 25;
+
   font-family: Arial;
−
  width: 100%;
+
 
}
 
}
  
−
li {
+
.navbar a {
 
   float: left;
 
   float: left;
 +
  font-size: 16px;
 +
  color: black;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 
}
 
}
  
−
li a {
+
.dropdown {
−
   display: block;
+
   float: left;
−
   color: #666;
+
   overflow: hidden;
−
   text-align: center;
+
}
 +
 
 +
.dropdown .dropbtn {
 +
   cursor: pointer;
 +
  font-size: 16px; 
 +
  border: none;
 +
  outline: none;
 +
  color: black;
 
   padding: 14px 16px;
 
   padding: 14px 16px;
 +
  background-color: inherit;
 +
  font-family: inherit;
 +
  margin: 0;
 +
  transition-duration: 0.35s;
 +
}
 +
 +
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
 +
  background-color: #f7909b;
 +
  color: white;
 +
}
 +
 +
.dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  background-color: #f9f9f9;
 +
  min-width: 160px;
 +
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
 +
  z-index: 1;
 +
}
 +
 +
.dropdown-content a {
 +
  float: none;
 +
  color: black;
 +
  padding: 12px 16px;
 
   text-decoration: none;
 
   text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
  transition-duration: 0.3s;
 
}
 
}
  
−
li a:hover:not(.active) {
+
.dropdown-content a:hover {
 
   background-color: #fde9eb;
 
   background-color: #fde9eb;
 
}
 
}
  
−
li a.active {
+
.show {
−
   color: white;
+
   display: block;
−
  background-color: #f7909b;
+
 
}
 
}
−
</style>
 
  
−
<ul>
+
.dropdown:hover .dropdown-content {display: block;}
−
  <li><a class="active" href="#home">Home</a></li>
+
−
  <li><a href="#news">News</a></li>
+
−
  <li><a href="#contact">Contact</a></li>
+
−
  <li><a href="#about">About</a></li>
+
−
  <li><a href="#DinFar">Din Far</a></li>
+
−
</ul>
+
  
 +
</style>
 
</head>
 
</head>
 +
<body>
 +
 +
<div class="navbar">
 +
  <a href="#home">Home</a>
 +
  <a href="#news">News</a>
 +
  <div class="dropdown">
 +
  <button class="dropbtn">Dropdown</button>
 +
  <div class="dropdown-content" id="myDropdown">
 +
    <a href="#">Link 1</a>
 +
    <a href="#">Link 2</a>
 +
    <a href="#">Link 3</a>
 +
  </div>
 +
  </div>
 +
</div>
 +
 +
</body>
 
</html>
 
</html>

Latest revision as of 18:19, 7 July 2020

Home News
Link 1 Link 2 Link 3