Skip to content
Permalink
Browse files

Use CSS :focus-within to tab through the dropdown menu items.

Replace Grunt w/ node script.

Try to update the overall a11y.

Add "native" font stack.
  • Loading branch information...
catalinred committed Jun 25, 2018
1 parent 463059e commit ede5f8bfcee80d8b54eba59b513e57291e401ab3
Showing with 89 additions and 335 deletions.
  1. +3 −1 .gitignore
  2. +0 −39 Gruntfile.js
  3. +2 −204 css/style.css
  4. +43 −55 index.html
  5. +0 −6 js/respond.min.js
  6. +12 −7 package.json
  7. +29 −23 sass/style.scss
@@ -1,2 +1,4 @@
.sass-cache
node_modules
node_modules
.DS_Store
package-lock.json

This file was deleted.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -1,56 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animenu - a responsive dropdown navigation made with SCSS</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script>
document.createElement('nav');
</script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>

<nav class="animenu">
<button class="animenu__toggle">
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
</button>
<ul class="animenu__nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Archive</a>
<ul class="animenu__nav__child">
<li><a href="">Sub Item 1</a></li>
<li><a href="">Sub Item 2</a></li>
<li><a href="">Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Categories</a>
<ul class="animenu__nav__child">
<li><a href="">Sub Item 1</a></li>
<li><a href="">Sub Item 2</a></li>
<li><a href="">Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>

<script src="js/animenu.js"></script>

</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animenu - a responsive dropdown navigation made with SCSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<nav class="animenu" role="navigation" aria-label="Menu">
<button class="animenu__toggle">
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
<span class="animenu__toggle__bar"></span>
</button>

<ul class="animenu__nav">
<li><a href="#">Home</a></li>
<li>
<a href="#" class="animenu__nav__hasDropdown" aria-haspopup="true">Archive</a>
<ul class="animenu__nav__dropdown" aria-label="submenu">
<li><a href="#" role="menuitem">Sub Item 1</a></li>
<li><a href="#" role="menuitem">Sub Item 2</a></li>
<li><a href="#" role="menuitem">Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="#" class="animenu__nav__hasDropdown" aria-haspopup="true">Categories</a>
<ul class="animenu__nav__dropdown" aria-label="submenu">
<li><a href="#" role="menuitem">Sub Item 1</a></li>
<li><a href="#" role="menuitem">Sub Item 2</a></li>
<li><a href="#" role="menuitem">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<script src="js/animenu.js"></script>

</body>
</html>
Oops, something went wrong.

0 comments on commit ede5f8b

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.