代码之家 › 专栏 › 技术社区 › aherrick

jquery css自定义弹出菜单样式问题

menu css jquery

aherrick · 技术社区 · 14 年前

我很快就要敲定这个弹出式菜单了,我一直在努力,只是有一些当前的痛点。

我试图在我的子菜单项上加上左/右填充,你可以看到我并不完全在那里。另外,当第一个子菜单显示时,我想在列表项的第一行和子项之间创建一点间隙。

下面是我当前的代码和显示我想要的内容的屏幕截图。基于我目前的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 回复 | 直到 14 年前

orokusaki 14 年前

这是一个经过编辑的版本。把它放进去 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>