gpt4 book ai didi

jquery-ui - JQuery 用户界面 : Horizontal Menu

转载 作者:太空宇宙 更新时间:2023-11-03 19:33:03 25 4
gpt4 key购买 nike

我想知道如何将 JQuery UI 菜单的布局从垂直更改为水平。

我试过了,但它只对菜单栏上的主链接有效,对子菜单上的链接无效。

我的意思是“Delphi”下的元素继续水平显示而不是垂直下降,因为这些是 Delphi 的子元素:

<style>   
.ui-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.ui-menu .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: auto;
}
</style>

<nav>
<ul id="ui-menu" class="ui-menu">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>

</ul>
</nav>


$(function () {
$("#ui-menu").menu();
});

编辑

这是我到目前为止所取得的成就以及还需要做的事情的截图:

enter image description here

请让我知道我做错了什么。

非常感谢。

最佳答案

工作示例 http://jsfiddle.net/5a75Z/1/

.ui-menu li {
float: left;
padding: 0 6px;
list-style: none;
}

我删除了你所有的 css 样式,然后只添加了上面的 3 种样式,现在它只用 float: left 水平工作,我只是添加了 padding 和 list 样式,因为。

编辑:

然后让子菜单垂直显示只需添加这个

ul ul {
width: 100px;
position: relative;
left: -50px;
}

http://jsfiddle.net/5a75Z/2/

相应地调整


编辑:

横向是这样__ __ __
纵向是这样的
|
|
|

垂直工作示例 http://jsfiddle.net/5a75Z/3/

ul ul { 
position: relative;
width: 300px;
padding-left: 50px;
}

li { list-style: none; }

ul ul li {
float: left;
padding: 0 5px;
list-style: none;
position: relative;
top: -20px;
}

关于jquery-ui - JQuery 用户界面 : Horizontal Menu,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21652868/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com