0

jPanelMenu ( http://jpanelmenu.com ) は、簡単にスタイルを設定してカスタマイズできることを理解しています。

次のように、jPanelMenu-panel クラスを HTML に追加してみました。

<div class="section group jPanelMenu-panel">       
     <div class="menu-trigger">Click Me</div>
     <ul id="menu" style="display: none;">
         <li><a href="/">Overview</a></li>
         <li><a href="#usage">Usage</a></li>
         <li><a href="#inner-workings">Inner-Workings</a></li>
         <li><a href="#animation">Animation</a></li>
         <li><a href="#options">Options</a></li>
         <li><a href="#api">API</a></li>
         <li><a href="#tips">Tips &amp; Examples</a></li>
         <li><a href="#about">About</a></li>
     </ul>                                
</div>

そして、次のように .jPanelMenu-panel クラスを CSS に追加します。

.jPanelMenu-panel {
    background-color: black;
}

何かが変わるかどうかを確認します。独自のクラスを追加して、何かが変わるかどうかを確認してみました。

良いニュースは、h5bp のおかげで最新バージョンの jQuery を持っていることです。次のタグを含めました。

<script type="text/javascript" src="js/jquery.jpanelmenu.js"</script>

私のページではスライダーメニューが機能するので、正しく。「Click Me」テキストをクリックすると、スライダー メニューが期待どおりに表示され、スタイリングはまったく行われません。

私の目標は、jpanelmenu.com のメニューと同じように機能するスタイルを持ち、そこから進むことです。

これは簡単なことだとわかっていますが、迷っています。

事前に助けてくれてありがとう！

4

2 に答える 2

2

<script>開始タグの末尾に > がありません。

<script type="text/javascript" src="js/jquery.jpanelmenu.js"></script>
------------------------------------------------------------^

メニューが期待どおりに機能しているため、あなたのブラウザはおそらくこの問題自体を自動的に修正しています...デフォルトのスタイリングが、追加している余分なスタイリングを上書きしている場合に問題があると思います...変更してみてくださいメインCSSファイル。

編集

以下のCSSのスニペットで正しい

.jPanelMenu-panel {
    background-color: black;
}

ただし、これは、既にリンクされているデフォルトの CSS ファイルでオーバーライドされている可能性があります (Web インスペクターを使用すると、これを確認できます)。その場合は、このメイン ファイルのスタイルを変更してみてください。

于 2013-02-10T18:12:27.857 に答える
1

jPanelMenu は、スタイリングにSASS (CSS プリプロセッサー) を使用します。jPanelMenu (1.3.0) の最新バージョンには、さまざまな .scss ファイルを見つけることができる "Sass" というフォルダーがあります。ファイル名がアンダースコアで始まるものはパーシャルと呼ばれ、スタイルにインポートされます。scssファイルで、後でスタイルにコンパイルされます。css (html ファイルにリンクされているもの)

部分的なファイル名からわかるように、それぞれが「フッター」、「コンテンツ」、「jPanelMenu」、「リセット」などを表しています。これらのパーシャルを編集して、生成された style.css を html にリンクするだけです。

sass の詳細については、上記のリンクとSass Referenceを確認してください。CSS に精通している場合は、理解するのは難しくありません。

jPanelMenu の実験とスタイリングを楽​​しんでください。

于 2013-04-24T08:53:40.500 に答える