michaelbragg/navicon.html

## navicon.html
<!DOCTYPE html>
<html>

  <head>

    <title>Basic Mobile Navicon Navigation</title>
    <style>

    .navicon {
      cursor: pointer;
    }

    .nav-main {
      display: none;
    }

    .js-is-active {
      display: block;
    }
    /*  -- if modernizer finds no JavaScript  --  */

    .no-js .navicon {
      display: none;
    }

    .no-js .nav-main {
      display: block;
    }

    @media screen and (min-width: 480px) {
    /*  Layout for larger screens */
      .navicon {
        display: none;
      }
      .nav-main {
        display: block;
      }
    }
  </style>
  </head>

  <body>

  <nav>

  <img class="navicon" id="navicon" alt="navigation" src="data:image/png;base64,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" />

    <ul class="nav-main" id="nav-main">
      <li><a href="#"  title="">Link 1</a></li><!--
      --><li><a href="#" title="">Link 2</a></li><!--
      --><li><a href="#" title="">Link 3</a></li><!--
      --><li><a href="#" title="">Link 4</a></li>
    </ul>
  </nav>

  <!--  Javascript  -->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

  <script>
    $("#navicon").click(function () {
      $("#nav-main").toggleClass("js-is-active");
    });
  </script>
  </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>

	<title>Basic Mobile Navicon Navigation</title>
	<style>

	.navicon {
	cursor: pointer;
	}

	.nav-main {
	display: none;
	}

	.js-is-active {
	display: block;
	}
	/* -- if modernizer finds no JavaScript -- */

	.no-js .navicon {
	display: none;
	}

	.no-js .nav-main {
	display: block;
	}

	@media screen and (min-width: 480px) {
	/* Layout for larger screens */
	.navicon {
	display: none;
	}
	.nav-main {
	display: block;
	}
	}
	</style>
	</head>

	<body>

	<nav>

	<img class="navicon" id="navicon" alt="navigation" src="data:image/png;base64,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" />

	<ul class="nav-main" id="nav-main">
	<li><a href="#" title="">Link 1</a></li><!--
	--><li><a href="#" title="">Link 2</a></li><!--
	--><li><a href="#" title="">Link 3</a></li><!--
	--><li><a href="#" title="">Link 4</a></li>
	</ul>
	</nav>

	<!-- Javascript -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<script>
	$("#navicon").click(function () {
	$("#nav-main").toggleClass("js-is-active");
	});
	</script>
	</body>

	</html>