3月, 2012 | BURNOUT.

BURNOUT.

BLOG

WordPressでサブメニュー

WordPressでjQueryを使ったサブメニューをアニメーションで表示(長いな)をしたい!
ということで 調べてみた。

まずはサブメニュー。
これは簡単。
WordPressのメニューにサブメニューに表示するコンテンツを追加。

メニュー画面

サブメニューにしたい項目を親のボタンの右下のスペースにドラッグで、サブメニュー扱いになります。

 

そしてheader.phpに以下のコードを追加する。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(‘jquery’, ‘1.6.4’);</script>
<script type=”text/javascript”>
$(function(){
$(“ul.sub-menu”).hide();
$(“ul#menu-navmenu>li”).hover(function(){
$(“ul:not(:animated)”, this).slideDown();},
function(){$(“ul.sub-menu”,this).slideUp();});
});
</script>

これでとりあえずは機能するはずなので、CSSとかをがんばる!
ここは自分で考えよう!おー!

 

HTML5に対応しました

当サイトのHTMLをxhtmlからhtml5に変更しました。
すべてのコンテンツはWordpressをベースとし、html5+CSS3で構成されています。その為、パソコンでの内容と同じものをCSS3を使用することによりスマートフォンで見た場合にも、スマートフォン用のレイアウトとして表示できます。
つまり、WordPressでページを編集すれば、PC用、スマートフォン用共に内容を更新できます。