Skip to content

Ajout de la nav-bar #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SoslanGab merged 2 commits into from
May 26, 2023
Merged

Ajout de la nav-bar #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9f33ac
Ajout de la nav-bar
SoslanGab May 26, 2023
4e3d501
Merge branch 'master' into soso
SoslanGab May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions agile-dev/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
nav .imagelogo{
padding-left: 25px;
padding-top: 9px;
}
nav .listenav{
padding-right: 35px;
}
32 changes: 22 additions & 10 deletions agile-dev/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,38 @@
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href=""/>
<link type="text/css" rel="stylesheet" href="css/materialize.css"/>
<!--Import your custom.css-->
<link type="text/css" rel="stylesheet" href=""/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🤙 Yo! app</title>
</head>
<body>

<!-- Start code here -->

<!-- DEB SECTION 2 -->

<!-- FIN SECTION 2-->

<!-- Debut nav-bar -->
<header class="site-header">
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo imagelogo">
<img src="img/logo_application.png" width="50" height="50" alt="">
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down listenav">
<li style="margin-right: 15px;"><span>Sass</span></li>
<li><span>Components</span></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
</header>
<!-- Fin nav-bar -->


<!-- finish code here -->

<!--Import materialize.js - JavaScript at end of body for optimized loading-->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="materialize.js"></script>
<!--Import your custom.js-->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions header-1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
let navToggle = document.querySelector(".nav__toggle");
let navWrapper = document.querySelector(".nav__wrapper");

navToggle.addEventListener("click", function () {
if (navWrapper.classList.contains("active")) {
this.setAttribute("aria-expanded", "false");
this.setAttribute("aria-label", "menu");
navWrapper.classList.remove("active");
} else {
navWrapper.classList.add("active");
this.setAttribute("aria-label", "close menu");
this.setAttribute("aria-expanded", "true");
}
});