Difference between revisions of "Team:Linkoping Sweden/Description"
| Line 55: | Line 55: | ||
} | } | ||
| + | |||
| + | <!-- CSS-kod för meny --> | ||
| + | |||
| + | ul | ||
| + | li {float: left;} /*Where the menu is in the block */ | ||
| + | |||
| + | .dropbtn { /* The color, border and other stuff to form the box */ | ||
| + | background: #019966; | ||
| + | border: 1px solid #019966; | ||
| + | border-radius: 3px; | ||
| + | color: white; | ||
| + | display: inline-block; | ||
| + | margin: 10px 10px; | ||
| + | padding: 14px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | .dropbtn:hover:not(.active) { /* color of the dropdown box and text when hovering*/ | ||
| + | background-color: white; | ||
| + | color: #019966; | ||
| + | } | ||
| + | |||
| + | .active { /*Color of the box that the user is on*/ | ||
| + | background-color: white; | ||
| + | color: #019966; | ||
| + | } | ||
| + | |||
| + | |||
| + | .dropbtn .menu-content a { /*Shape and size of the dropdown box*/ | ||
| + | display: inline-block; | ||
| + | color: #019966; | ||
| + | text-align: center; | ||
| + | padding: 14px 16px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | .dropbtn:hover, .dropmenu:hover .dropbtn { /*Color of the mainbox when hovering*/ | ||
| + | background-color: white; | ||
| + | color: #019966; | ||
| + | |||
| + | } | ||
| + | |||
| + | .dropmenu { /*Determine what type of attribute the box is*/ | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | .menu-content { /*The background of the dropdown box*/ | ||
| + | display: none; | ||
| + | position: absolute; | ||
| + | background-color: #019966; | ||
| + | min-width: 160px; | ||
| + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
| + | |||
| + | } | ||
| + | |||
| + | .menu-content a { /*Color of the text in the dropdown box*/ | ||
| + | color: white; | ||
| + | padding: 12px 16px; | ||
| + | text-decoration: none; | ||
| + | display: block; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .dropmenu:hover .menu-content { /*Makes sure that the menu drops*/ | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | .menu-content a:hover{ | ||
| + | background: white; | ||
| + | color: #019966; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
| Line 61: | Line 135: | ||
<div class="topnav" id="myTopnav"> | <div class="topnav" id="myTopnav"> | ||
| − | |||
<ul> | <ul> | ||
<li class="dropmenu"> | <li class="dropmenu"> | ||
| − | + | <a href="#" class="dropbtn">The Project</a> | |
<div class="menu-content"> | <div class="menu-content"> | ||
| − | <a href=" | + | <a href="#">What</a> |
| − | <a href=" | + | <a href="#">Why</a> |
| + | <a href="#">How</a> | ||
</div> | </div> | ||
</li> | </li> | ||
| − | + | <li class="dropmenu"> | |
| − | <a class="dropbtn"> | + | <a href="#" class="dropbtn">The team</a> |
<div class="menu-content"> | <div class="menu-content"> | ||
| − | <a href=" | + | <a href="#">About us</a> |
| + | <a href="#">Why</a> | ||
| + | <a href="#">How</a> | ||
</div> | </div> | ||
</li> | </li> | ||
| − | <li class="dropmenu"> | + | <li class="dropmenu"> |
| − | <a class="dropbtn">Human | + | <a href="#" class="dropbtn">Modeling</a> |
| + | <div class="menu-content"> | ||
| + | <a href="#">What</a> | ||
| + | <a href="#">Why</a> | ||
| + | <a href="#">How</a> | ||
| + | </div> | ||
| + | </li> | ||
| + | |||
| + | <li class="dropmenu"> | ||
| + | <a href="#" class="dropbtn">Human Practice</a> | ||
<div class="menu-content"> | <div class="menu-content"> | ||
| − | <a href=" | + | <a href="#">What we have done</a> |
| + | <a href="#">Silver</a> | ||
| + | <a href="#">Gold</a> | ||
</div> | </div> | ||
</li> | </li> | ||
| Line 88: | Line 175: | ||
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> | <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> | ||
| − | |||
</div> | </div> | ||
Revision as of 09:25, 19 June 2017
