Open mhulse opened 5 years ago
Using Font Awesome v5:
.ap_menu { background: #fff; display: none; } .ap_menu ul, .ap_menu li { margin: 0; padding: 0; } .ap_menu ul::after { content: ""; display: table; clear: both; } .ap_menu li { font-size: 1.6rem; line-height: 1.2; list-style: none; width: 100%; float: left; } .ap_menu a { display: block; padding: 1rem 2rem; position: relative; border-bottom: 1px solid #e5e5e5; margin-bottom: -1px; } .ap_menu a, .ap_menu a:visited { color: #000; text-decoration: none; } .ap_menu a:visited:hover, .ap_menu a:focus, .ap_menu a:focus:hover, .ap_menu a:hover, .ap_menu a:active { color: #000; text-decoration: none; background: rgba(59, 169, 207, 0.25); } .ap_menu a.ap_menu-selected, .ap_menu a.ap_menu-selected:visited:hover, .ap_menu a.ap_menu-selected:focus, .ap_menu a.ap_menu-selected:focus:hover, .ap_menu a.ap_menu-selected:hover, .ap_menu a.ap_menu-selected:active { color: #000; text-decoration: none; background: rgba(59, 169, 207, 0.25); box-shadow: none !important; } @media (min-width: 992px) { /* .ap_menu { border: 0; border-top: .5rem solid #355a66; box-shadow: 0 -.5rem 0 #cadae0 inset; margin-top: -.5rem; display: block !important; } .ap_menu li { width: auto; } .ap_menu a { padding-bottom: 1.5rem; box-shadow: none; border: 0; } .ap_menu a:visited:hover, .ap_menu a:focus, .ap_menu a:focus:hover, .ap_menu a:hover, .ap_menu a:active { box-shadow: 0 -.5rem 0 #1bb0ce inset; } */ .ap_menu { display: none; } } .js .ap_menu.menu-closed { display: none; } .ap_menu-toggle { color: #000; cursor: pointer; cursor: hand; position: absolute; left: 2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ap_menu-toggle::after { -webkit-font-smoothing: antialiased; content: "\f0c9"; /* plus */ font-family: "Font Awesome 5 Pro"; font-style: normal; font-variant: normal; font-weight: 400; line-height: 0; text-decoration: inherit; text-rendering: auto; font-size: 3rem; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .ap_menu-toggle.menu-opened::after { content: "\f00d"; } .ap_menu-toggle span { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.05em; padding-left: 3.5rem; display: none; } @media (min-width: 576px) { .ap_menu-toggle span { display: block; } } @media (min-width: 992px) { /* .ap_menu-toggle { display: none; } */ }
jQuery:
$(function() { (function() { var $menu = $('#menu'); var $toggle = $('#menu-toggle'); if ($menu.length && $toggle.length) { $menu.addClass('menu-closed'); $toggle.addClass('menu-closed'); $toggle.on('click', function() { toggleMenu(); }); } function toggleMenu() { $toggle.toggleClass('menu-opened menu-closed'); $menu.slideToggle('fast', function() { $menu.toggleClass('menu-opened menu-closed'); }); } function closeMenu() { if ($menu.hasClass('menu-opened')) { toggleMenu(); } } })(); });
Put this on your page:
<div id="menu-toggle" class="ap_menu-toggle menu-closed"> <span>Menu</span> </div>
And this somewhere else:
<nav id="menu" class="ap_menu menu-closed" role="navigation"> <ul> <li><a href="#videos-grace">Grace Videos</a></li> <li><a href="#videos-sara">Sara Videos</a></li> <li><a href="#videos-maria">Maria Videos</a></li> <li><a href="#videos-sue">Sue Videos</a></li> <li><a href="#videos-brenda">Brenda Videos</a></li> <li><a href="#videos-tina">Tina Videos</a></li> <li><a href="#resources">Resources</a></li> </ul> </nav>
TO BE CLEANED UP!
Using Font Awesome v5:
jQuery:
Put this on your page:
And this somewhere else: