0

I currently have a responsive toggle navigation menu which works perfectly fine. The issue I have is with the navigation icon. I'm trying to use Icon Fonts for both the open and close states. Currently my HTML is:

<a href="#menu" class="menu-link" aria-hidden="true" data-icon="&#xe008;"></a>
                <nav id="menu" role="navigation">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html#work">work</a></li>
                        <li><a href="index.html#profile">profile</a></li>
                        <li><a href="index.html#life">life</a></li>
                    </ul>
                </nav>

The Icon that displayes is the open (three lines) icon. I'm having trouble figuring out who I can replace that for the close state using another icon font?

Here is my current CSS for the link:

a.menu-link { float: right; display: block; font-size: 1.75em; margin-right: .75em; margin-top: 1em; }

&.active {?}


@font-face {
font-weight: normal;
font-style: normal;
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg#icomoon') format('svg');

}

[data-icon]:before {
content: attr(data-icon);
text-transform: none;
font-weight: normal;
font-variant: normal;
font-family: 'icomoon';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;

}

I presume i'm supposed to use an if statement? but is there a solution through the markup or CSS? If not then a JS solution would be helpful. Cheers guys!

Charles
  • 50,943
  • 13
  • 104
  • 142
SlightlyClever
  • 401
  • 3
  • 7
  • 20

1 Answers1

0

It seems that all you need to update the displayed icon is to change the data-icon attribute of the anchor element. Here is one way to do that:

document.querySelector('.menu-link').setAttribute('data-icon', 'GLYPH_CODE_HERE');
Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
  • But would that not just change the displayed icon by default? Is there a way to only change the icon when the link is in it's active state? – SlightlyClever May 01 '13 at 03:08
  • Would it be sufficient to only change the icon when the mouse is pressed down on the anchor? That way, you could change the icon when the mouse is depressed, then change it back when the mouse is released. The other idea is to update the selector to `.menu-link:active`. – Rick Viscomi May 01 '13 at 03:13