valentin
/
unified-navigator
46
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout du responsive

This commit is contained in:
Valentin Moguérou 2023-12-26 16:59:49 +01:00
parent 609c13f826
commit 77fe53c8f2
2 changed files with 84 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
header.html
View File

@ -3,14 +3,38 @@
<head>
<meta charset="UTF-8">
<title>Header</title>
<script src="https://kit.fontawesome.com/0fd87250ec.js" crossorigin="anonymous"></script>
<link href="navigator.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
function toggleMenu() {
if (document.body.clientWidth > 600)
return document.location = "https://mp2i-vms.fr"
if (document.getElementById("menu-sec").classList.contains("hidden")) {
document.getElementById("menu-sec").classList.remove("hidden");
document.getElementById("dropdown-indicator").className = "fa-solid fa-caret-up";
} else {
document.getElementById("menu-sec").classList.add("hidden");
document.getElementById("dropdown-indicator").className = "fa-solid fa-caret-down";
}
}
</script>
<div class="unified_navigator">
<a class="logo" href="https://mp2i-vms.fr"><img src="icon.png"><strong>mp2i-vms.fr</strong></a>
<div class="link"><a href="#">Pages personnelles</a></div>
<div class="link"><a href="#">Git</a></div>
<div class="link"><a href="#">Minecraft</a></div>
<div class="nav-container">
<div class="logo-wrapper" onclick="toggleMenu();">
<a class="logo">
<img src="icon.png" alt="logo"><strong>mp2i-vms.fr</strong>
</a>
<i id="dropdown-indicator" class="fa-solid fa-caret-down"></i>
</div>
<div class="menu-wrapper hidden" id="menu-sec">
<div class="link"><a href="https://mp2i-vms.fr/pages.html"><i class="fa-solid fa-house"></i> Pages personnelles</a></div>
<div class="link"><a href="https://git.mp2i-vms.fr"><i class="fa-brands fa-git-alt"></i> Git</a></div>
<div class="link"><a href="https://play.mp2i-vms.fr"><i class="fa-solid fa-cubes"></i> Minecraft</a></div>
</div>
</div>
</div>
</body>
</html>

67
navigator.css
View File

@ -2,23 +2,68 @@ body {
font-family: sans-serif;
margin: 0;
}
.unified_navigator {
padding: 10px 50px;
display: flex;
justify-content: flex-start;
gap: 40px;
user-select: none;
background: rgb(42,25,93);
background: linear-gradient(90deg, rgba(42,25,93,1) 8%, rgba(60,11,89,1) 49%, rgba(34,0,71,1) 82%);
color: white;
box-shadow: 0 10px 10px rgb(128, 128, 128);
line-height: 3em;
line-height: 2em;
font-size: 14px;
}
.unified_navigator .link {
//padding: 15px 25px;
//border: 2px solid red;
//border-radius: .5em;
//background: black;
.unified_navigator .nav-container {
width: clamp(550px, 60%, 1000px);
margin: auto;
padding: 12px 50px;
display: flex;
justify-content: flex-start;
gap: 40px;
}
.unified_navigator .menu-wrapper {
display: contents;
}
.unified_navigator .logo-wrapper {
display: inline;
width: fit-content;
cursor: pointer;
}
.unified_navigator #dropdown-indicator {
display: none;
}
@media screen and (max-width: 600px) {
.unified_navigator .nav-container {
padding: 12px 0;
width: 100%;
flex-direction: column;
gap: 5px;
text-align: center;
}
.unified_navigator .menu-wrapper.hidden {
display: none;
}
.unified_navigator .logo-wrapper {
margin: auto;
padding: 5px;
border-radius: 5px;
cursor: pointer;
transition: transform 100ms;
}
.unified_navigator .logo-wrapper:hover {
transform: scale(1.1);
}
.unified_navigator i, .unified_navigator #dropdown-indicator {
display: inline;
margin: 0 5px;
}
}
.unified_navigator a:link, .unified_navigator a:visited {