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.

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

@@ -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>

0 comments on commit ede5f8b

Please sign in to comment.