jquery ui 实现横向导航菜单

1、html依次jquery-1.12.3.min.js、jquery-ui.min.js、object.js、jquery-ui.min.css

并在项目中引入images文件夹,从jquery ui网站上都可以下载下来。注意选好主题。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-1.12.3.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="object.js"></script>
    <link rel="stylesheet" href="jquery-ui.min.css">
    <style type="text/css">
        #navigator{
            position: absolute;
            top: 40px;
            left: 35px;
        }
         .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: 150px;
            font-size: 24px;
        }
    </style>
    <title></title>
</head>
<body>
<div id="navigator">
    <ul id="menu">
        <li>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 schönen Donau</li>
            </ul>
        </li>
        <li>Saarland</li>
        <li>Salzburg
            <ul>
                <li>Delphi
                </li>
                <li>Delphi
                </li>
                <li>Perch</li>
            </ul>
        </li>
        <li>Amesville</li>
    </ul>
</div>
</body>
</html>
2、object.js

$(document).ready(function(){
    $("#menu").menu({
        position: { my: "right top", at: "right-5 bottom+5" },
        icons: { submenu: "ui-icon-carat-1-s" }
    });
});
3、效果如下


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页