Question

如何使用水平子菜单创建垂直主菜单。

第1项

项目2_ Item2_1 Item2_2 Item2_3

第3项

第4项

以这种方式我如何创建这样的菜单。

Answer 1

我有这个代码，它是一个完整的实现，包括jQuery的触摸功能。

这里还有一个JSFiddle link用于演示。

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="doubletaptogo.js"></script>
    <script>
        $(document).ready(function() { console.log('ready'); $('li:has(ul)').doubleTapToGo();});
    </script>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        body * {
            display:block;
        }
        ul li {
            width:200px;
            height:100px;

            float:left;
            position:relative;

            background-color:red;
        }
        ul li ul {
            top:100px;
            left:0px;
            display:none;
            position:absolute;
        }
        ul li:hover > ul {
            display:block;
        }
        ul li ul li {
            position:relative;
            background-color:green;
        }
        ul li ul li ul {
            top:0px;
            left:200px;
            width:10000px;
        }
        ul li ul li ul li {
            float:left;
            position:relative;
            background-color:blue;
        }
        ul li ul li ul li ul {
            top:100px;
            left:0px;
            width:200px;
        }
        ul li ul li ul li ul li {
            background-color:yellow;
        }
        ul li ul li ul li:hover > ul {
            display:block;
        }
    </style>
</head>
<body>
        <ul>
            <li>
                test 1
            </li>
            <li>
                test 1
                <ul>
                    <li>
                        test 2.1
                        <ul>
                            <li>
                                test 2.1
                            </li>
                            <li>
                                test 3.2
                            </li>
                        </ul>
                    </li>
                    <li>
                        test 2.2
                        <ul>
                            <li>
                                test 3.1
                            </li>
                            <li>
                                test 3.2
                                <ul>
                                    <li>
                                        test 3.1
                                    </li>
                                    <li>
                                        test 3.2
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
</body>

Answer 2

为此你可以尝试制作一个简单的默认列表！

在每个列表项中，创建一个新列表，但这次使用：

ul.child li {
  display: inline;
}

为了展示它们，你可以使用jQuery的API。

Answer 3

我建议使用Superfish菜单。

我一直都在使用它。得到它之后。然后是编辑它以满足您的需求。

http://users.tpg.com.au/j_birch/plugins/superfish/examples/vertical/

如何使用水平子菜单创建垂直主菜单

3 个答案: