0

CSS3、アンカー タグ、および :target 擬似クラスを使用して、水平アコーディオン ナビゲーション メニューを作成しようとしています。私はほとんどそれを解決しました。トップレベルのリスト項目がページの読み込み時に表示されるように設定する方法が必要です。

jsfiddle はこちら: http://jsfiddle.net/4jpowell/nzAsr/4/ 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.nav {
    border: 1px solid blue;
}
.menu, .menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu a:link {
    color: #9D0C0C; 
}
.menu a {
    margin: 0 10px 0 0;
    text-decoration: none;
    display: block;
    padding: 0.25em;
    border: 2px solid #9D0C0C;
    position: static;
    font-size: 1.1em;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    text-transform: uppercase;
    float: left;
    overflow: hidden;
}
/*top level link is selected*/
/*hide other top level links*/
.menu > li:not(:target) {
    display: none;
}
/*expand*/
    li:target .subnav {
    display: block;
}
/*default*/
.menu > li {
    display: block;
}
.subnav {
    display: none;
    float: left;
    overflow: hidden;
}
/*level 2 nav links*/
    li ul li {
    float: left;
}
</style>
</head>
<body>
    <div class="nav">
        <ul class="menu">
            <li id="about">
                <a href="#about">About</a>
                <ul class="subnav">
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </li>
            <li id="events">
                <a href="#events">Events</a>
                <ul class="subnav">
                    <li><a href="#">Upcoming Events</a></li>
                    <li><a href="#">Past Events</a></li><li><a href="#">Press</a></li>
                </ul>
            </li>
            <li id="programs">
                <a href="#programs">Programs</a>
                <ul class="subnav">
                    <li><a href="#">Festival</a></li>
                    <li><a href="#">Performance</a></li>
                    <li><a href="#">Public Arts</a></li>
                    <li><a href="#">Oral History</a></li>
                </ul>
            </li>
        </ul>
    </div>
<script>
    $(window).trigger('hashchange');
    });
</script>
</body>
</html>
4

1 に答える 1

0

jQuery Accordian UI を使用して実行できます。 リンクはこちら

于 2013-06-20T04:53:59.413 に答える