-1

CSS と JS を組み合わせてナビゲーション メニューを作成しようとしています。メイン トピック (メニュー レベル 0) にマウスを移動すると、サブトピックのリストが表示され、別のメイン トピックにマウスを移動するとすぐにサブトピックが非表示になります。私が試した方法は、JS 関数を使用して、サブトピックのリストを含む要素の「表示」プロパティを「なし」と「ブロック」の間で変更することです。サブトピック リストは、メイン トピックを含む div ブロック内にネストされた div ブロックにあります。

何が起こっているのかを明確にするために、さまざまな要素の種類の周りにさまざまな色の境界線を設定しました。問題は、ネストされたサブトピック div ブロックが実際にはネストされていないことですが、サブトピック ブロックを囲む緑色の境界線がメイン トピック ブロックを囲む青い境界線の外側にあるという事実によって示されるように、メインのトップ div ブロックの下にレンダリングされます。 . Chrome と Firefox の両方でテストしていますが、動作は同じなので、理解できず、間違っていることがあるはずです。

ドロップダウン メニューについて多くの質問があるようですが、私が望むものを実現するためのより良い方法を教えていただければ幸いです。しかし、CSS と JS の理解を深めるために、私の例で間違っていることも理解したいと思います。

4

2 に答える 2

0

これは、cssのみで実行されるサブメニューを含むメニューのフィドルです。それはあなたが達成しようとしていることではありませんが、それはあなたを正しい道に導くはずです。

ここから、垂直方向に配置したり、ページの読み込み時に1つのdivを表示したりするのは、それほど簡単ではありません。

cssにコメントしたので、基本的な実装に実際に必要なコードがどれだけ少ないかがわかります。

編集これは あなたがそれを必要とすることをするだろうと私が思う更新されたフィドルです。ホバー時にサブメウンを開くと、コンテンツが下にスライドします。

于 2012-08-31T19:15:43.387 に答える
0

私が目指していたことを正確に実行する CSS のみのソリューション、つまり、エントリにマウスを合わせると、そのエントリをサブリストで展開するリストを持つことが可能であることが判明しました。私の最悪の問題は、「position: absolute;」を含めていたことです。これにより、新しく表示されたサブリストに対応するために含まれる要素が拡張されなくなりました。以下は、Chrome と Firefox でテストされ、validome.org によって検証された完全なコード例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<!-- DropDownExpandMenuExample2\TestWEMenus.html - 2012-09-01 -->

<head>
<title>Test of menu styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<meta name="author" content=" Bruce Bon "></meta>
<style type="text/css">

div.navcontainer{
    font:           10pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
    background:     transparent;
    width:          220px;
    margin-left:    0px;
    /* position:      absolute; top: 210px; left: 660px;*/
    position:       absolute; top: 20px; left: 660px;
    padding-left:   10px;
    padding-bottom: 20px;
    color:          #22657F;
    z-index:        10;        /* make sure in front */
    border-left:    2px solid #BB77FF;
    }

/* main topic styles */
ul#navmaintopiclist {
    margin:     0;
    margin-top: 15px;
    padding:    0;
    }
ul#navmaintopiclist li {
    font-size:        14px;
    padding-top:      5px;
    padding-bottom:   5px;
    font-weight:      bold;
    list-style:       none;
    }
ul#navmaintopiclist li a {
    display:         block;
    text-decoration: none;
    }

/* Add the link and hover effects */
ul#navmaintopiclist li:link    {
    color: #333388; text-decoration:none; }
ul#navmaintopiclist li:visited {
    color: #6633AA; text-decoration:none; }
ul#navmaintopiclist li:hover   {
    color: #5555BB;
    text-decoration: none;
    }

ul#navmaintopiclist li:hover ul {
    display: block;
    }

/* Hide the subtopics, set subtopic size, etc */
ul.subtopiclist {
    display:          none; 
    background-color: #BBFFBB;
    width:            180px;        /* Width to help Opera out */
    position:         relative;
    left:             0px;
    }

ul#navmaintopiclist li ul li {
    background:       transparent;
    list-style-type:  none;
    font-family:      'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size:        14px;
    letter-spacing:   -1px;
    font-weight:      bold;
    margin-left:      -20px;
    }

</style>

</head>


<body>

<div class="navcontainer">

  <ul id='navmaintopiclist'>

    <li><a href="index.html">Home</a></li>

    <li><a href="index.html">Healthy Mind</a>
      <ul class='subtopiclist'>
        <li>Stress and Anxiety</li>
        <li>Emotional Freedom</li>
        <li>Self-Hypnosiss</li>
      </ul>
    </li>

    <li><a href="index.html">Healthy Body</a>
      <ul class='subtopiclist'>
        <li>SubOne</li>
        <li>SubOne</li>
        <li>SubOne</li>
      </ul>
    </li>

</ul>


</div>

</body>

</html>
于 2012-09-02T00:27:23.287 に答える