0

現在jQueryを学習しているため、jQueryホバーメニューをゼロからコーディングしようとしています。ホバー メニューの基本を理解しましたが、サブメニューを正しく配置できず、メニュー全体が壊れてしまいます。default.css スタイルシートには * { padding: 0; があります。margin: 0 } その中に。

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="jQuery/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $('.submenu').show();
            }, function() {
                $('.submenu').hide();
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            top:100px;

        }
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>
4

2 に答える 2

2

これが機能することを願っています (とにかく CSS を作り直したいと思うかもしれませんが):

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $(this).children('.submenu').show();
            }, function() {
                $(this).children('.submenu').hide();//Show and hide only child elements
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            /*top:100px; Not needed since it pushes items down...*/

    }
ul
{
list-style-type:none;
margin:0;
padding:0;
}
.dropdown li
{
float:left;
}
.mnLinks li
{
float:none;
}
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>
            </li><!--As stated in comment above.-->

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>
            </li>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>

フィドル

于 2013-08-10T14:20:35.523 に答える
2

これを試して：

実施例

HTML
ネスト<ul class="submenu">_<li class="mnLinks">

<div id="menu">
    <ul class="dropdown">
        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a>
            <ul class="submenu">
                <li><a href="#">SubLink#01</a></li>
                <li><a href="#">SubLink#02</a></li>
                <li><a href="#">SubLink#03</a></li>
            </ul>
        </li>
        <li class="mnLinks"><a href="#">Link #02</a></li>
        <li class="mnLinks"><a href="#">Link #03</a>

            <ul class="submenu">
                <li><a href="#">SubLink#04</a></li>
                <li><a href="#">SubLink#05</a></li>
                <li><a href="#">SubLink#06</a></li>
            </ul>
        </li>
        <li class="mnLinks"><a href="#">Link #04</a></li>
        <li class="mnLinks"><a href="#">Link #05</a></li>
    </ul>
</div>

CSS
ここには多くの変更があり、主に継承されたスタイルの問題を修正するためのものです。

#menu {
    width: 1000px;
    text-transform: uppercase;
    text-align:center;
}
ul, li {
    list-style:none;
    text-decoration:none;
}
.dropdown {
    width: 1000px;
    padding: 0;
    margin: 0;
}
.mnLinks {
    width: 200px;
    padding: 10px 0;
    margin: 0;
    display: inline-block;
    float: left;
    color: #ffffff;
    background: #333337;
    text-decoration: none;
}
.mnLinks a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 0;
}
.submenu {
    position:relative;
    top:10px;
}
.submenu li a {
    display:block;
    float:none;
}

JS
サブメニューの選択方法を変更しました。

$(document).ready(function () {
    $('.submenu').hide();
    $('.dropdown li').hover(function () {
        $(this).children('.submenu').show();
    }, function () {
        $(this).children('.submenu').hide();
    });
});

.children() の API ドキュメント

于 2013-08-10T14:21:24.120 に答える