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

谁能建议我如何才能使下面的代码显示在页面顶部的水平视图菜单。目前，下面的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>

使用一些菜单参数，你可以得到这个工作作为水平菜单

<!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中添加:

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;
}

小提琴

或

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'
        }
    });

小提琴

第一个例子源码如何使jQuery UI导航菜单水平?

第二个示例来源如何横向创建jquery-ui菜单

更新你的CSS:

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

小提琴

交替:

.ul-menu {width: 600px; }

相关内容

最新更新

热门标签：