Skip to content

Instantly share code, notes, and snippets.

@henshaw

henshaw/close.html

Last active January 14, 2024 03:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save henshaw/748663dd0d5f05dfd59d216a28884ddc to your computer and use it in GitHub Desktop.
Save henshaw/748663dd0d5f05dfd59d216a28884ddc to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript and HTML used to show and hide Close icon
Raw
close.html
<!-- JS for displaying and hiding "Close" icon -->
<script>
function navopen() {
var x = document.getElementById("close");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!-- Jump link to Primary menu -->
<div class="menu"><a title="Jump to primary navigation" href="#primary">Menu</a></div>
<!-- Close icon that displays when the "Menu" jump link is tapped, and hides again when the icon is tapped -->
<a aria-label="Back to Top" href="#top"><img style="display:none;" id="close" alt="Close" width="34" height="34" src="/images/close.svg"></a>
@henshaw
Copy link
Author

henshaw commented Jul 22, 2023

Code referenced in Mobile-first UX considerations: Highlights from a redesign

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment