「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

apycomWordPressを導入しテンプレートを元に徐々にホームページっぽくなってきたけど、どうもメインメニューが今一つ昔風・・・。と思い探してみたらあるではないですか!こんなすばらしいサイトが!

http://www.apycom.com/

 

<使用方法>

1.トップページから自分が気に入ったメニューを選択。

2.「Free Dwonload」をクリックしてダウンロード。

3.ダウンロードしたファイルから、imagesフォルダ、cssファイル、jsファイルを自分のサイトへ適切に配置。

4.index.html(index.php)などへ上記のcss,jsファイルを定義

5.必要ならcssファイルをサイトに併せて修正

※私の場合、WordPressに使用したテンプレートには即マッチせず、css初心者なのでちょっと修正に手間取りました。

たったこれだけで見栄えの良いプルダウンメニューが出来ました。感謝(^^)

Ads by Google

かっこいいドロップダウンメニュー」に2件のコメント

  1. TONTON より:

    はじめまして。htmlやcssをかじり始めた初心者です。
    こちらの記事を見てメニューバーを作ろうと思っているのですが、少し伺いたいことがあります。

    以前に下記のサイトからbxsliderというものを落としたのですが、
    (http://makasete-web.net/bxslider)『超簡単!jQueryスライドショーを10分で実装する方法』

    この際も今回の生地でご紹介頂いているようにcssファイルとjsファイルをダウンロードしました。
    それと同時に、これを使うために(head)内に以下の4点の記述を行う必要がありました。

    1.(script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script)
    2.(script src="js/jquery.bxslider.min.js")(/script)
    3.(link href="css/jquery.bxslider.css" rel="stylesheet" /)
    4.(script type="text/javascript")
       $(document).ready(function(){
       $('.bxslider').bxSlider({
       auto: true,
       controls: true,
       speed: 900,
       pause: 5000,
       slideWidth : 800,}); });

    2、3に関しては、cssファイルとjsファイルを読み込むものだと認識しているのですが、1と4は今回ご紹介頂いている「http://www.apycom.com/」のメニューバーでは必要ないのでしょうか…?

    もし必要であればどのように記述すべき(何を意味する)ものなのでしょうか。。

    本当に初心者のため、非常にお粗末な質問になっていれば大変申し訳ないのですが、
    どうかご助言頂きたく思います。

    よろしくお願いします。

    • admin より:

      TONTON 様。当サイトをご覧頂きありがとうございます。

      ご質問の件ですが、

      まず1についてはjQuery本体になりますので、「http://www.apycom.com/」でも必要となります。
      「http://www.apycom.com/」でダウンロードすると一緒に入っている「jquery.js」がそれに当たります。(2/4時点ではjQueryのバージョンは1.10.1)
      なので、「bxslider」・「http://www.apycom.com/」を併用する場合はどちらか一方を記載すれば良いです。逆に2つ異なるバージョンのjQuery本体を指定してしまうと予期せぬ挙動を引き起こす可能性があります。

      4については「bxslider」を使用する際のオプション設定ですので、「http://www.apycom.com/」では不要となります。「bxslider」を利用するのであればもちろん指定が必要です。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">