スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでかごから飛び出るメニューを設置してみる

どうのようなものか表現しづらいので実際ご覧ください。この記事全体を表示すると右下にかごが現れます。これをクリックするとメニューが飛び出ます。
紹介されていたのはこちらのサイト。 こちらのサイトにサンプルやソースが置いてあります。この中には4種類のスクリプトがあり、ひとつはこのブログでも以前紹介しました。 で個人的に1番気に入っているのが今回設置してみた分です。サンプルには同時にいくつかのメニューが設置されていますが、今回このブログで取り上げたものは非常に簡単です。まず、外部ファイルを呼び出します。
<link rel="stylesheet" type="text/css" media="screen" href="css/all-examples.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/stack-1.js"></script>
でbody部分もとてもシンプル。
<div class="stack">
  <img src="images/stacks/stack.png" alt="stack"/>
    <ul id="stack">
      <li><a href="#"><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li>
      <li><a href="#"><span>All Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li>
      <li><a href="#"><span>Example 3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li>
      <li><a href="#"><span>Example 2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li>
      <li><a href="#"><span>Example 1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li>
    </ul>
</div>
このブログでも使ってみようかと思案中です。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。