専門家に聞いた!繰り返す痔の原因は!? >>

こんんちは。
cssでホームページ作成中なのですが、独習では解決できない点があり
ご教授いただけたら幸いです!

下記サイトのテンプレートをもとに、カーソルを合わせるとドロップダウンで
階層メニューが表示されるサイドメニューをつくりました。
http://www.webdlab.com/template/dropdownmenu2/

カーソルオンで反転+階層メニューの表示はクリアできたのですが。。

各ページを開いたときに、現在表示されているページにあたる箇所は、
カーソルが離れても文字を反転させたまま、またその階層メニューも常に表示の状態にしたいのです。

テンプレートCSSにうまく加筆できればと思ったのですが、うまくいきません。

何か方法はないでしょうか。

どうぞよろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (3件)

リンク先のHTMLもCSSもあまりに酷いので・・


javascriptで、カレントディレクトリ、カレントファイルを取得してHTMLを書き直します。
カレントディレクトリにはclass名をcurentDir,ファイルにはcurentFileを追加します。
ウェブ標準でのHTMLとCSS・・どちらもとってもシンプルです。--ウェブ標準ですから当然ですが・・
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み。
下記ソースは、タブインデントを__に置換してアルルので戻して。
CSSは、下記を参考に「ウェブ標準なのでCSSもわかりやすいはず」
カスケーディングスタイルシートですから、カスケーディング機能を使うべきです。
一切無駄なclass名やidは使われていませんからHTMLもCSSも簡単でメンテナンスも容易

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
__<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
__<title>サンプル</title>
__<meta name="author" content="ORUKA1951">
__<meta http-equiv="Content-Style-Type" content="text/css">
__<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
__<link rel="START" href="../index.html">
__<style type="text/css">
<!--
/* div.header内のdiv.nav内のol,liについて */
div.header div.nav ol,
div.header div.nav li{
__display:block;list-style:none;
__padding:0;margin:0;
__line-height:30px;
}
/* 枠線をつける */
div.header div.nav li{
__border:solid 1px blue;
}
div.header div.nav ol{
__width:200px;
}
/* 下位のliは枠線を消す */
div.header div.nav ol li ol li{
__border:none;
}
div.header div.nav li a{
__display:block;margin:0;
__background-color:white;
__padding-left:0.5em;
__text-decoration:none;
/* 子孫セレクタで下位のliを消す */
/* 詳細度[25]
div.header div.nav ol li ol{
__width:178px;
__display:none;
__margin-left:20px;
}
/* liにhoverするとdisplayを変える */
/* 詳細度[35]が高いので優先 */
div.header div.nav ol li:hover ol,
div.header div.nav ol li.curentDir ol{
__display:block;
}
}/* おまけ */
div.header div.nav li.curentFile a{color:red;}
div.header div.nav li.curentFile a:after{content:" (現在地)";}
div.header div.nav li a:visited{background-color:gray;}
div.header div.nav li a:hover,
div.header div.nav li a:focus{background-color:green;}
div.header div.nav li a:active{background-color:lime;}
div.header div.nav li a:visited:after{content:" (済み)";}
-->
__</style>
</head>
<body>
__<div class="header">
____<h1>サンプル</h1>
____<div class="nav">
______<ol>
________<li><a href="./abc/index.html">あいうえお</a>
__________<ol>
____________<li><a href="./abc/efg.html">かきくけこ</a></li>
____________<li><a href="./abc/hij_2.html">さしすせそ</a></li>
____________<li><a href="./abc/klmn.html">たちつてと</a></li>
__________</ol>
________</li>
________<li class="curentDir"><a href="./efg/index.html">なにぬねの</a>
__________<ol>
____________<li><a href="./efg/abc.html">はひふへほ</a></li>
____________<li class="curentFile"><a href="./efg/efg.html">まみむめも</a></li>
__________</ol>
________</li>
________<li><a href="./hij/index.html">やゆよ</a>
__________<ol>
____________<li><a href="./hij/abc.html">らりるれろ</a></li>
____________<li><a href="./hij/efg.html">わゐうゑを</a></li>
__________</ol>
________</li>
______</ol>
____</div>
__</div>
</body>
</html>
    • good
    • 0

各ページで開かれているリストは異なるものですから、まったく同じソースでは無理です。


javascriptだとカレントを取得してHTMLを書き直すことになります。
CSSなら、各リストを変えておきます。

<ol>
__<li><a href=""></a>
____<ol>
______<li><a href=""></a></li>
______<li><a href=""></a></li>
______<li><a href=""></a></li>
____</ol></li>
__</li>
__<li class="curentDir"><a href=""></a>
____<ol>
______<li><a href=""></a></li>
______<li class="curentFile"><a href=""></a></li>
____</ol></li>
__</li>
__<li><a href=""></a>
____<ol>
______<li><a href=""></a></li>
______<li><a href=""></a></li>
____</ol>
__</li>
</ol>

あとは通常の:hover,:visited,:active,:focusなどの擬似クラスで・・
    • good
    • 0

ドロップダウンメニュー(縦)を見てやりました。


あっていますかね?w

まず
>カーソルが離れても文字を反転させたまま

各HTMLページのaタグを外し
CSSに

#ddR1 li {
display: block;
width: 100px;
height: 25px;
text-align: center;
background: url(img/gnavi_bg_on.gif) no-repeat top left;
}

があるので

line-height: 2.1;
color: #f0f0f0;

を追加


>またその階層メニューも常に表示の状態にしたいのです。

すいませんがこちらのこちらのやり方はわかりません…
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qjquery ドロップダウンメニューの挙動不審を治す方法

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tesuto</title>
<style type="text/css">
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
* {
margin: 0px;
padding: 0px;
}
body {
line-height: 180%;
}
header {
text-align: center;
}

nav {
width: 930px;
margin-top: 20px;
}
ul{
list-style-type: none;
padding: 0;
color: #fff;
margin: 0;
}
ul#menu li{
display: block;
padding: 0px;
float: left;
position: relative;
height: 27px;
width: 150px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
color: #FFF;
text-align: center;
background-color: #933;
}
ul#menu li a {
display: block;
color: #FFF;
}
ul.child{
display: none;
position: absolute;
padding: 0;
opacity: 0.9;
background-color: #CCC;
font-size: 14px;
width: 150px;
}
ul.child li a{
display: block;
color: #fff;
}
li a:hover {
background-color: #FFBB00;
color: #FFF;
}
ul#menu2 li {
float: left;
width: 155px;
background-color: #666666;
display: block;
margin-right: 5px;
text-align: center;
height: 26px;
color: #FFF;
}
ul#menu2 li a {
color: #FFF;
display: block;
}
#titlle {
margin-top: 100px;
width: 700px;
}
#navmenu {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#cl2 {
height: 100px;
width: 100%;
float: left;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 3px;
background-color: #FFC;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
</script>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">ご案内</a></li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li class="menu"><a href="#">ご案内</a></li>
</ul>
</nav>
<div id="titlle">
<div id="cl2"></div>
<div id="navmenu">
<ul id="menu2">
<li><a href="#a">ご挨拶</a></li>
<li><a href="#i">ご挨拶</a></li>
<li><a href="#u">ご挨拶</a></li>
<li><a href="#e">ご挨拶</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doc...続きを読む

Aベストアンサー

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。


>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「安定しない」とはこれではないかと推測しました。

スクリプトを修正して対応することも不可能ではないでしょうが、レイアウトの方法を修正する方が遥かに簡単そうです。
(スクリプトの修正で対応するにしても、レイアウトの方法を変えた方がやりやすそうに思います)


要は、隙間部分をなくすか、隙間を設けるにしてもその部分をLI要素の一部として評価されるようなレイアウトになさればよろしいのではないでしょうか。
一番簡単なのは、
 ul.child{ top:27px; }
みたいに、位置を明示的に指定することで隙間をなくしてしまえば、とりあえずはご期待の動作になるのではないかと推測します。

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。


>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「...続きを読む


このカテゴリの人気Q&Aランキング