1

次の HTML / CSS に基づいてドロップダウン メニュー ビューを作成したいと考えています。

<!DOCTYPE html>
<html>
    <head>
        <style>
        html * {
            margin: 0;
            padding: 0;
            }
        body {
            color: #FFF;
            }
        #panel, #content {
            position: absolute;
            top: 0;
            bottom: 0;
            }
        #panel {
            left: 0;
            width: 750px;
            background: #333;
            z-index: 100;
            padding-top: 200px;
            padding-left: 250px;
            }
        #content {
            background: #000;
            left: 250px;
            right: 0px;
            }
        #panel > nav {
            margin-bottom: 100px;
            }
    .Dropdown {
        position: relative; /* Has to be set, can be overriden */
        }
    .Dropdown > ul {
        position: absolute;
        display: none;
        list-style-type: none;
        }
    .Dropdown:hover > ul {
        display: block;
        }
    .Dropdown > ul, /* On the right by default */
    .Dropdown.Right > ul { /* Deploys on the right side of the label */
        top: 0;
        left: 100%;
        }
    .Dropdown.Bottom > ul { /* Deploys below the label */
        top: 100%;
        left: 0;
        }
    </style>
</head>
<body>
    <div id="panel">

        <nav class="Dropdown Right" style="width: 200px;"><!-- so it can appear on jsfiddle -->
            <div class="Label Parent">Label</div>
            <ul>
                <li>
                    <div class="Label">Entry</div>
                </li>
                <li>
                    <div class="Label">Entry</div>
                </li>
                <li>
                    <div class="Label">Entry</div>
                </li>
                <li>
                    <nav class="Dropdown Right">
                        <div class="Label Parent">Label</div>
                        <ul>
                            <li>
                                <div class="Label">Entry</div>
                            </li>
                            <li>
                                <nav class="Dropdown Right">
                                    <div class="Label Parent">Label</div>
                                    <ul>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                    </ul>
                                </nav>
                            </li>
                            <li>
                                <div class="Label">Entry</div>
                            </li>
                            <li>
                                <div class="Label">Entry</div>
                            </li>
                        </ul>
                    </nav>
                </li>
            </ul>
        </nav>

    </div>
    <div id="content">
    </div>
</body>

開発者がこのドロップダウン CSS を拡張して、たとえば不透明度 0 と 1 の間のトランジションを追加できるようにしたいと考えています。プロパティの表示がトランジションのものと競合するため、実際にはこのコードでは不可能です。非ホバーに不透明度 0 を追加し、ホバーに不透明度 1 を追加しても、その表示プロパティのために機能しません。この Web サイトのどこかで、display none と display block の代わりに height 0 と height auto を (それぞれ) 使用できると読みましたが、どちらも機能しませんでした。トランジションを追加する方法についてのアイデアはありますか? ご協力いただきありがとうございます ！

4

0 に答える 0