メニューの作成

添付URLのサイトのように、メニューのボタンをクリックするとメイン画面が切り替わるような
ページを作成したいのですが、これは何をどのようにつかって作成しているのでしょうか…
ソースを表示で見てみたのですが、結局解決しませんでしたので質問させていただきます。

http://www.heavenlyblue.info/hinemosu/
HEAVENLY BLUE様のサイトからお借りしました。

No.3 ベストアンサー 回答者： tracer 回答日時： 2012/10/29 01:55

ソース見てませんが、この程度のものであれば、CSSだけでできますよ。

基本的には、初期表示の要素以外は隠しておいて、ボタンによってdisplayの値を切り替えるだけです。
切り替えの方法は、javascript使ってもいいですし、cssだけでもできます。
たとえばjqueryを使うならこんな感じ。


--------------HTML
<nav>
<ul>
<li data-target="content1">menu 1</li>
<li data-target="conetnt2">menu 2</li>
<li data-target="content3">menu 3</li>
</ul>
</nav>
<article >
<div id="content1" class="content show">
<h1>content1</h1>
<p>conetnt comment</p>
</div>
<div id="content2" class="content hide">
<h1>content2</h1>
<p>conetnt comment</p>
</div>
<div id="content3" class="content hide">
<h1>content3</h1>
<p>conetnt comment</p>
</div>
</article>


-----------------CSS
article .content.hide{
display:none;
}
article .content.show{
display:block;
}


------------------JS
$(function(){
$("li","nav").on("click",function(){
$(".content.show").addClass("hide").removeClass("show");
$("#"+$(this).data("target")).addClass("show").removeClass("hide");
});
});


勢いで書いたにも関わらず、まったくテストしてませんが、たぶん動きます。

No.2 回答者： shockatz 回答日時： 2012/10/27 13:10

左側の「PostIt」画像、内部のページ切替ボタンとも、"Yetii"という名前のタブ切換え型Javascriptライブラリを呼び、そいつが画面領域の一部を切り替えていますね。

動作原理はAjaxによる部分読み込みですが、このライブラリは、泥臭いJavascript操作を完全に隠していますね。

Yetii= Yet (E)Another Tab Interface Implementation
http://www.kminek.pl/lab/yetii/

コンテンツの途中に直リンクされるのが嫌な場合はい方法ではないでしょうか。

何でもかんでも<a href="">なベタなリンクにするのは原理厨です。
Ajaxが流行した理由を全く考えてないｗｗ

No.1 回答者： ORUKA1951 回答日時： 2012/10/26 23:52

javascriptでページ内容を書き換えています。

この程度のものにjavascriptを使用するのは感心しません。検索エンジンには理解できないでしよう。
　普通に目次とそのコンテンツを書いて、スタイルシートで切り替えるほうが楽ですし、javascriptやスタイルシートを理解しないユーザーエージェントにも利用できるでしょう。