jquery ui 实现横向导航菜单

最新推荐文章于 2021-08-04 08:01:48 发布

白天里看星星

最新推荐文章于 2021-08-04 08:01:48 发布

阅读量3.5k

点赞数 1

分类专栏： jquery ui 文章标签： menu jquery jquery ui 导航

本文链接：https://blog.csdn.net/u012311282/article/details/51378482

版权

jquery ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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、效果如下

白天里看星星

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
jquery ui 实现横向导航菜单

1、html依次jquery-1.12.3.min.js、jquery-ui.min.js、object.js、jquery-ui.min.css并在项目中引入images文件夹，从jquery ui网站上都可以下载下来。注意选好主题。html>html lang="en">head> meta charset="UTF-8"> script src="jquery
复制链接

扫一扫