フラッシュ素材(Flash Works)

プロのウェブデザイナーが作ったカスタマイズ可能なホームページ素材Flash(フラッシュ)とWordPressテーマを無料配布しています。
フラッシュ素材(Flash Works)
» » プルダウンメニューの修正

プルダウンメニューの修正


WordPressテーマ『FlashWork-s』には、『パソコン画面』でグローバルメニューを入れ子にした場合と、『タブレット・スマホ・携帯画面』時のグローバルメニューにプルダウンメニューを利用しています。

マウスオーバーやクリックすると隠れたメニューがオープンする仕掛けで、ドロップダウンメニューやアコーディオンメニューとも呼ばれています。

このウィンドウの幅を狭めると、『タブレット・スマホ・携帯画面』時のグローバルメニューが上部に表示されるので、一度試してみると分かりやすいでしょう。

ページ読み込み時に、このプルダウンメニューが一瞬、開いた状態で表示される不具合があったので修正しました。

以前にダウンロードした方は、下のリンクから再びダウンロードし直してください。

アップロードが必要なファイルは『style.css』です。

プルダウンメニューが一瞬表示された原因

プルダウンメニューはJavascript(jQuery)によって動きを制御しており、そのプログラムでメニューを隠すように指示しています。

しかし、これだと、ページを読み込むときにメニューを隠すことができず、完全に読み込むまでの一瞬ですが、プルダウンメニューが開いた状態で表示されてしまうのです。

そこで、cssであらかじめメニューを非表示にすることによって、読み込み時にプルダウンメニューが開かないように修正しました。

#global-navi-pc ul li ul {
	display: none;
}

#global-navi-mobile ul {
	display: none;
}

このように、隠したい部分に対してdisplay: none;を設定するだけで、読み込み時にプルダウンメニューが開かなくなります。


関連記事

『ウィジェット』の『タグクラウド』を使用してもタイトルが表示されず、cssも適用されない状態になっていたので修正しました。 2015年12...


カスタマイズが簡単なワードプレス無料テーマで、主に次のようなオリジナル機能が備わっています。 レスポンシブデザイン 背景色・...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最新記事

Flash Works

WordPressテーマ『FlashWork-s』で見出しタグが使われている箇...

Flash Works

WordPressテーマ『FlashWork-s』に用意されている装飾コードに...

Flash Works

ワードプレスのヘッダー画像の設定方法について説明いたします。また、簡単な変更で...

Flash Works

WordPressテーマ『FlashWork-s』に組み込まれているGoogl...

Flash Works

WordPressテーマ『FlashWork-s』に組み込まれているサイドバー...

素材ラインナップ

How to ホームページ

インフォメーション

検索