Jquery中的菜单和菜单项方向问题答案

【问题标题】：Menu and menuitem orientation issue in JqueryJquery中的菜单和菜单项方向问题
【发布时间】：2014-08-29 14:48:31
【问题描述】：

谁能建议我如何制作下面的代码以在页面顶部以水平视图显示菜单。目前，下面的 J-query 代码在页面左侧以垂直视图显示菜单，但我希望菜单项在水平视图中。

有人可以建议我更改我需要参考的 css 链接或对以下代码进行任何更改吗？ Ada、adamsville、Addyston 等都应该位于水平视图而不是垂直视图。

注意：查看以下代码的外观。将其复制到一个test.txt文件中并保存为test.html并在IE或Firefox浏览器中打开。

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
        <title>Test Menu</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
            $(function() {
                  $( "#menu" ).menu();
            });
        </script>
        <style>
            .ui-menu { 
                 width: 150px;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="ui-state-disabled">Aberdeen</li>
            <li>Ada</li>
            <li>Adamsville</li>
            <li>Addyston</li>
            <li>Delphi
                <ul>
                     <li class="ui-state-disabled">Ada</li>
                     <li>Saarland</li>
                     <li>Salzburg an der schnen Donau</li>
                </ul>
            </li>
            <li>Saarland</li>
            <li>Salzburg
                <ul>
                    <li>Delphi
                         <ul>
                             <li>Ada</li>
                             <li>Saarland</li>
                             <li>Salzburg</li>
                         </ul>
                    </li>
                    <li>Delphi
                          <ul>
                            <li>Ada</li>
                            <li>Saarland</li>
                            <li>Salzburg</li>
                          </ul>
                    </li>
                    <li>Perch</li>
                </ul>
             </li>
             <li class="ui-state-disabled">Amesville</li>
          </ul>
    </body>
    </html>

【问题讨论】：

CSS，添加li{display:inline;}
Note: To see the look and feel of the below code. Copy it in a test.txt file and save as test.html and open in IE or Firefox browser. 或者使用jsfiddle。
@ScriptLearner，你在这里得到提示了吗？ 1) 你看到 J Prakash 的编辑了吗？看看用良好的缩进阅读代码有多容易？ 2) 你知道 jsfiddle 是如何工作的吗？

标签： jquery css jquery-ui

【解决方案1】：

使用一些菜单参数，您可以将其用作水平菜单

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Menu</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
    $(function() {
    $( "#menu" ).menu({ position: { my: "left top-10", at: "right" } });
    });
    </script>
<style>
    .ui-menu li{ display: inline-block;}
    .ui-menu li ul { 
        top: 100%!important;
        left: 0!important;
    }
    .ui-menu li ul ul { 
        top: 0%!important;
        left: 100%!important;
    }
</style>
</head>
<body>
<ul id="menu">
    <li class="ui-state-disabled">Aberdeen</li>
    <li>Ada</li>
    <li>Adamsville</li>
    <li>Addyston</li>
    <li>Delphi
    <ul>
        <li class="ui-state-disabled">Ada</li>
        <li>Saarland</li>
        <li>Salzburg an der schnen Donau</li>
    </ul>
    </li>
    <li>Saarland</li>
    <li>Salzburg
    <ul>
        <li>Delphi
        <ul>
            <li>Ada</li>
            <li>Saarland</li>
            <li>Salzburg</li>
        </ul>
        </li>
        <li>Delphi
        <ul>
            <li>Ada</li>
            <li>Saarland</li>
            <li>Salzburg</li>
        </ul>
        </li>
        <li>Perch</li>
    </ul>
    </li>
    <li class="ui-state-disabled">Amesville</li>
</ul>
</body>
</html>

【讨论】：

！很重要，真的吗？我知道我们都在学习，但我建议复习 CSS 的特殊性以及为什么 !important 有一些问题...
Jquery UI 在子

【解决方案2】：

你可以在你的css中添加这个：

css

.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    width:100px;
}
.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width:100px;
}

fiddle

或

css

#menu li {
    float:left;
    list-style:none;
    margin-right:15px;
    padding: 10px 0;
}
#menu li a {
    text-decoration:none;
    font-family:'Kreon', serif;
    font-size:16px;
    color:#385f2d;
    text-transform:uppercase;
}
#menu li a:hover {
    color:#cd6a00;
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
}
#menu li a span.ui-icon-carat-1-e {
    float:right;
    position:static;
    margin-top:2px;
    width:16px;
    height:16px;  background:url(http://download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png) no-repeat -64px -16px;
}
#menu li ul {
    display:block;
    position:absolute;
    padding:5px 0px;
    background:#f0f0f0;
}
#menu li ul li {
    float:none;
    width:200px;
    margin-right:0px;
    padding:5px 10px;
}
#menu li ul li a {
    font-size:14px;
}

$( "#menu" ).menu({
        position: {
            my:'left top',
            at:'left bottom'
        }
    });

fiddle

第一个示例来源How to make jQuery UI nav menu horizontal?

第二个例子来源Howto create jquery-ui menu horizontally

【讨论】：

【解决方案3】：

更新你的 CSS：

li {display: inline-block;}
.ui-menu { width: 80%; }
#menu li ul li {width: 100px; }
#menu li ul {width: 120px; }

fiddle

替代：

.ul-menu {width: 600px; }

【讨论】：

我试过你的建议，但没有成功。这是我添加到 style.css li {display: inline-block;} .ui-menu { width: 100%; }
有趣的是，这就是我开始的地方...这当然取决于菜单的位置...嗯，我使用的是 27" 桌面显示器...