0

私は現在、完全に正常に動作するレスポンシブ トグル ナビゲーション メニューを持っています。私が抱えている問題は、ナビゲーションアイコンにあります。開いた状態と閉じた状態の両方にアイコンフォントを使用しようとしています。現在、私のHTMLは次のとおりです。

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

表示されるアイコンは、開いている (3 本の線) アイコンです。別のアイコン フォントを使用して、閉じた状態の代わりに誰を使用できるかを理解するのに苦労していますか?

リンクの現在のCSSは次のとおりです。

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;

}

私はif文を使用することになっていると思いますか？しかし、マークアップやCSSによる解決策はありますか? そうでない場合は、JS ソリューションが役立ちます。乾杯！

4

1 に答える 1

0

data-icon表示されるアイコンを更新するには、アンカー要素の属性を変更するだけのようです。これを行う1つの方法は次のとおりです。

document.querySelector('.menu-link').setAttribute('data-icon', 'GLYPH_CODE_HERE');
于 2013-05-01T02:55:10.813 に答える