裏技shop DDみたいなHPにしたいのですが、どのようにすればいいんでしょうか

質問

裏技shop DDみたいなHPにしたいのですが・・・

どのようにすればいいんでしょうか？
裏技shop DDのサイトのアドレスはhttp://blog.livedoor.jp/gamemasa/です。
したいことは

▼メニューバーをTOP上下に表示する
▼メニューバーにマウスを乗せると以下のものが半透明で表示される

最新コメント
RSS
サイト紹介文
画像付きリンク

です。どのようにすればいいのでしょうか？

回答No.3

askaaska · ベストアンサー

position:absoluteで画像の上に重ねて表示する

あとは、表示していないテキストをdisplay:noneで隠しておくとか
メニューにカーソルを合わせたときにajaxで取得するとか
そんなとこね。

補足

>あとは、表示していないテキストをdisplay:noneで隠しておくとか
>メニューにカーソルを合わせたときにajaxで取得するとか

記入例を回答していただけると在りがたいです。

<!--▼▼▼▼ 上部メニューバー ▼▼▼▼-->
<div id="whole">
<div class="MENU_UP">
<ul>
メニューバーを好きなだけ作成。
要するにここがメニューバーの内容
<div id="top_load"><div id="top_load">
<!--▲▲▲▲ 上部メニューバー ▲▲▲▲-->
<!--▼▼▼▼ 下部メニューバー ▼▼▼▼-->
<div class="MENU_UNDER">
<ul>
メニューバーを好きなだけ作成。
要するにここがメニューバーの内容
</div></div></div>
</li></ul></li>
</ul>
</div>
<br />
</div><!--/outline-->
<!--▲▲▲▲ 下部メニューバー ▲▲▲▲-->

ソースより、自分で考えて作ってみたのが↑のものです。
このままだと、うまく表示されません。
スタイルシートの記述に問題があると考えてるのですが
いまいちわかりませんorz

回答No.4

noname#108428

> スタイルシートの記述に問題があると考えてるのですが

その、貴殿が記述したCSSを晒してみると、
具体的なアドバイスが得られ易いと思いますよ。

補足

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:33px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:30px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:120px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

/* ▼メニューバー（ドロップダウン）▼ */

#menu_bar ul {
position:absolute;
margin:0;
padding:0;
}

#menu_bar li {
position:relative;
margin:0;
padding:0;
}

#menu_bar li ul li {
float:none;
}

#menu_bar li.menu ul,
#menu_bar li.menu ul li.menu ul,
#menu_bar li.menu_on ul li.menu ul {
display:none;
}

#menu_bar li.menu_on ul {
position:absolute;
display:block;
top:100%;
left:0;
}

#menu_bar li.menu_on ul li.menu_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

/* ▽IE6バグ対応▽ */
* html #menu_bar li li,
* html #menu_bar li li li {
font-size:1px;
line-height:0;
}
* html #menu_bar li li a,
* html #menu_bar li li li a {
display:block;
font-size:10pt;
line-height:25px;
}
/* △IE6バグ対応△ */

#menu_bar li li a,
#menu_bar li li li a {
border-top:1px solid #111111; /* 区切り線 */
}

/* ドロップダウンリストの透過（IE6以下未対応） */
#menu_bar > li > ul {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲メニューバー（ドロップダウン）▲ */

と記述しています。

回答No.2

noname#108428

> 試行錯誤でやっているのですがうまくいかないため質問してるわけです。

そういうことなら、
どのようなことを試し、
どのようにうまくいかないのか、
を記述された方が良いですよ。

あまりに漠然としていて、
回答が難しいタイプの質問の仕方です。

補足

メニューバーの使用許可をされているブログに質問をした所、
現在は使用許可はとれないようです。
ので、質問内容を以下のように変えさせていただきます(すみません＞＜)

メニューバーにマウスを乗せるとTOP画像に最新コメントや文章を表示される方法。

試行錯誤とは、ソースよりメニューバーと思われる場所をコピーして、編集してみたりしてます。
が、やってみるとちゃんとしたメニューバーにならなかったりと・・・。

回答No.1

noname#108428

当該サイトのHTMLソースを複製し、
色々と書き換えたりして

どの構文が何を意味しているか
掴んでみてください。

その後、意図の通りにカスタマイズしてみることで、
知識が手に入ります。

流石に、それをそのまま使用するのは盗用となりますので、
それによって得た知識を用いて、自ら構築してください。

補足

ソース表示はかなり前から試しています。
試行錯誤でやっているのですがうまくいかないため質問してるわけです。
使用許可については、テンプレートを作成後メールにて許可をいただきます。
許可をいただけたら新テンプレートを表示するようにします。

裏技shop DDの正しいアドレスはこちらです。
http://shopdd.blog51.fc2.com/