jQuery CSS自定义弹出菜单样式问题

时间：2010-04-27 00:51:55

标签： jquery css menu

我已经接近确定我一直在努力的这个弹出菜单，只是有几个当前的痛点。

我正试图在我的子菜单项上左/右填充，因为你可以看到我不在那里。此外，当显示第一个子菜单时，我想在第一行列表项和子项之间创建一点差距。

以下是我当前的代码和显示我想要的屏幕截图。基于我目前的CSS，有关如何以干净的方式完成这项工作的任何想法吗？

alt text http://www.ajondeck.net/temp/jFlyout.png 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    function mainmenu() {
        $("#nav ul").css({ display: "none" }); // Opera Fix
        $("#nav li").hover(function() {
            $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
        }, function() {
            $(this).find('ul:first').css({ visibility: "hidden" });
        });
    }


    $(document).ready(function() {
        mainmenu();
    });
</script>

<style type="text/css">
    *
    {
        padding: 0px;
        margin: 0px;
    }
    body
    {
        font-size: 0.85em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #nav, #nav ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
    }
    #nav a
    {
        display: block;
        padding: 4px 0px 4px 0px;
        color: #dfca90;
        text-decoration: none;
        background-color: #ECE9D8;
        font-size: 9px;
        font-weight: bold;
        font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
    }
    #nav > li > a
    {
        font-size: 16px;
        font-variant: small-caps;
        border-right: 1px solid #dfca90;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 6px;
        padding-top: 6px;
        background-color: #fff;
        color: #dfca90;
    }
    #nav li ul li a:hover
    {
        color: #999;
    }
    #nav li
    {
        float: left;
        position: relative;
    }
    #nav ul
    {
        position: absolute;
        display: none;
        width: 170px;
        border: 2px solid #dfca90;
    }
    #nav ul li
    {
    }
    #nav li ul a
    {
        width: 170px;
        height: auto;
        float: left;
    }
    #nav ul ul
    {
        top: -2px;
    }
    #nav li ul ul
    {
        left: 170px;
        background-color: #ECE9D8;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
    {
        display: none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
    {
        display: block;
    }
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript </a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a> </li>
                    <li><a href="#">3.1.2 Tutorial</a> </li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

这是一个经过编辑的版本。把它放在http://www.quickdiff.com/中，看看我改变了什么（左边是你的，右边是我的。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
    function mainmenu() {
        $("#nav ul").css({ display: "none" }); // Opera Fix
        $("#nav li").hover(function() {
            $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
        }, function() {
            $(this).find('ul:first').css({ visibility: "hidden" });
        });
    }


    $(document).ready(function() {
        mainmenu();
    });
</script>

<style type="text/css">
    *
    {
        padding: 0px;
        margin: 0px;
    }
    body
    {
        font-size: 0.85em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #nav, #nav ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        background-color: #ECE9D8;
    }
    #nav a
    {
        display: block;
        padding: 4px 0px 4px 0px;
        color: #dfca90;
        text-decoration: none;
        font-size: 9px;
        font-weight: bold;
        font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
    }
    #nav > li > a
    {
        font-size: 16px;
        font-variant: small-caps;
        border-right: 1px solid #dfca90;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 6px;
        padding-top: 6px;
        background-color: #fff;
        color: #dfca90;
    }
    #nav li ul li a:hover
    {
        color: #999;
    }
    #nav li
    {
        float: left;
        position: relative;
    }
    #nav ul
    {
        left: -1px;
        top: 35px;
        padding: 0 0 0 5px;
        position: absolute;
        display: none;
        width: 170px;
        border: 2px solid #dfca90;
    }
    #nav ul li
    {
    }
    #nav li ul a
    {
        width: 170px;
        height: auto;
        float: left;
    }
    #nav ul ul
    {
        top: -2px;
    }
    #nav li ul ul
    {
        left: 170px;
        background-color: #ECE9D8;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
    {
        display: none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
    {
        display: block;
    }
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript </a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a> </li>
                    <li><a href="#">3.1.2 Tutorial</a> </li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>
</body>
</html>
相关问题
最新问题