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

我猜你想要这样的东西：http ://www.cssmenus.co.uk/dropdown.html

如果您展示示例或绘图，我们可以为您提供更好的帮助。

score 1 · Accepted Answer

问题出在这一行：

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

它采用菜单中的第一个链接并使其处于活动状态。您<a>在带有类菜单的 ul 中的第一个标签不是第一个菜单项，而是：

<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，因为现在菜单中的第一个链接确实是菜单的第一项。我把它留给你找出最适合你的方法。

javascript - 使用 DIV 容器的导航菜单

2 回答 2

Related

Reference