javascript - DIV コンテナーを使用したナビゲーションメニュー

Question

デフォルトで「menu1」の下に「submenu11」のコンテンツを表示するように定義するにはどうすればよいですか?

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
        <ul id="css3menu1" class="menu">
        <li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
                <ul>
                    <li><a href="#submenu11">SUBMENU11</a></li>
                    <li><a href="#submenu12">SUBMENU12</a></li>
                    <li><a href="#submenu13">SUBMENU13</a></li>
                    <li><a href="#submenu14">SUBMENU14</a></li>
                </ul></li>
                <li class="menu"><a href="#menu2" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/schedule.png"/>MENU2</a></li>
                <li class="menu"><a href="#menu3" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/analysis.png"/>MENU3</a></li>
                <li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/gps.png"/>MENU4</a></li>
            </ul>

    <div id='submenu11'>
    <p> Content </p>
    </div>

    <div id='submenu12'>
    <p> Content </p>
    </div>

    <div id='submenu13'>
    <p> Content </p>
    </div>

    <div id='submenu14'>
    <p> Content </p>
    </div>

    <script>
        $('ul.menu').each(function() {
            var $active, $content, $links = $(this).find('a');
            $active = $links.first().addClass('active');
            $content = $($active.attr('href'));
            $links.not(':first').each(function() {
                $($(this).attr('href')).hide();
            });

            $(this).on('click', 'a', function(e) {
                $active.removeClass('active');
                $content.hide();
                $active = $(this);
                $content = $($(this).attr('href'));
                $active.addClass('active');
                $content.show();
                e.preventDefault();
            });
        });
    </script>
</body>

CSS スタイルシート:

html,body {
    font: normal .8em/1.5em Arial, Helvetica, sans-serif;
    background: #ffffff;
    width: 100%;
    margin: 0px auto;
}

p {
    margin: 0 0 2em;
}

h1 {
    margin: 0;
    font:bold 12px Arial;
}

h2 {
    margin:0;
    color: #55aaff;
    font:bold 12px Arial;
}

h3 {
    margin:0;
    font:normal 10px Arial;
}

h4 {
    margin:0;
    font:normal 12px Arial;
}

a {
    color: #339;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

div#header {
    padding:1em;
    background:#00557f 100% 10px no-repeat;
    border-bottom:6px double gray;
}

div#header p {
    font:normal 10px Arial;
    text-align:right;
    color:#b7ddf2;
    margin:0;
}

div.scrollbar {
    height: 300px;
    overflow: auto;
    border: solid 1px #000;
    padding: 5px;
}

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}

div#content p {
    text-align:justify;
    padding:0 1em;
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    padding:1em;
    background:#ddd 98% 10px no-repeat;
    border-bottom:6px double gray;
}
div#footer p {
    font-style:italic;
    font-size:1.1em;
    margin:0;
}

/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
    margin:0;
    list-style:none;
    padding:0;
    background-color:#dedede;
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
ul#css3menu1 ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    -moz-box-shadow:3.5px 3.5px 5px #000000;
    -webkit-box-shadow:3.5px 3.5px 5px #000000;
    box-shadow:3.5px 3.5px 5px #000000;
    background-color:#FFFFFF;border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#d4d4d4;
    padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
    display:block;
}
ul#css3menu1 li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu1 li:hover{
    z-index:1;
}
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    *display:inline;
}
ul#css3menu1>li{
    margin:0;
}
* html ul#css3menu1 li a{
    display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;
}
ul#css3menu1 a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 12px Arial;
    color:#000000;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:10px;
    background-color:#ebf4fb;
    background-image:url("mainbk.png");
    background-repeat:repeat;
    background-position:0 0;
    border-width:0 0 0 1px;
    border-style:solid;
    border-color:#C0C0C0;
}
ul#css3menu1 ul li{
    float:none;
    margin:10px 0 0;
}
ul#css3menu1 ul a{
    text-align:left;
    padding:4px;
    background-color:#FFFFFF;
    background-image:none;
    border-width:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    font:11px Arial;
    color:#000;
    text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
    background-color:#b7ddf2;
    border-color:#C0C0C0;
    border-style:solid;
    color:#000000;
    text-decoration:none;
    text-shadow:#FFF 0 0 1px;
    background-position:0 100px;
}
ul#css3menu1 img{
    border:none;
    vertical-align:middle;
    margin-right:10px;
}
ul#css3menu1 img.over{
    display:none;
}
ul#css3menu1 li:hover > a img.def{
    display:none;
}
ul#css3menu1 li:hover > a img.over{
    display:inline;
}
ul#css3menu1 li a.pressed img.over{
    display:inline;
}
ul#css3menu1 li a.pressed img.def{
    display:none;
}
ul#css3menu1 span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-color:#b7ddf2;
    background-position:0 100px;
    border-style:solid;
    border-color:#C0C0C0;
    color:#000000;
    text-decoration:none;
    text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
    background-color:#FFFFFF;
    background-image:none;
    color:#868686;
    text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
    border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */

EDIT1:スクリプトとスタイルシートを含めました。ここに画像の説明を入力

EDIT2：写真を見てください。問題を明確にする必要があります。

score 1 · Accepted Answer

問題は次の行にあります。

 $active = $links.first().addClass('active');

メニューの最初のリンクを取得し、アクティブにします。class menu を使用した ulの最初の<a>タグは、最初のメニュー項目ではありませんが、次のとおりです。

<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>

そのため、必ず最初のメニュー項目をターゲットにする必要があります。たとえば、ID を割り当てることができます。

<li><a href="#submenu11" id="submenu-default">SUBMENU11</a></li>

そして、その JavaScript の行を次のように書き換える必要があります。

$active = $('#submenu-default').addClass('active');

これでうまくいくはずです。明らかに、他の方法を使用してそのリンクを見つけることができます。

編集: html を次のように書き直すことで、より良い解決策が得られるかもしれません。

<ul id="css3menu1">
    <li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
            <ul  class="menu">
                <li><a href="#submenu11">SUBMENU11</a></li>
                <li><a href="#submenu12">SUBMENU12</a></li>
                <li><a href="#submenu13">SUBMENU13</a></li>
                <li><a href="#submenu14">SUBMENU14</a></li>
            </ul></li>
            <li class="menu"><a href="#menu2" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/schedule.png"/>MENU2</a></li>
            <li class="menu"><a href="#menu3" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/analysis.png"/>MENU3</a></li>
            <li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/gps.png"/>MENU4</a></li>
        </ul>

この方法では、メニューの最初のリンクが実際にメニューの最初の項目になるため、javascript を変更する必要はありません。あなたに最適なものを見つけるのはあなたに任せます。

score 1 · Accepted Answer

次のようなものが必要だと思います: http://www.cssmenus.co.uk/dropdown.html

例や図面を見せていただければ、さらに良いお手伝いができます。

javascript - DIV コンテナーを使用したナビゲーション メニュー

2 に答える 2

Related

Reference

javascript - DIV コンテナーを使用したナビゲーションメニュー