jQuery UI基础----12jQuery UI Widgets-menu（菜单

最新推荐文章于 2022-05-19 16:50:26 发布

zhaihaohao1

最新推荐文章于 2022-05-19 16:50:26 发布

阅读量409

点赞数

分类专栏： jQuery UI基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/48913727

版权

jQuery UI基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--所需要的支持文件-->
    <script src="jquery-2.1.4.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link href="jquery-ui.min.css" rel="stylesheet" type="text/css">
    <!--自己的js文件-->
    <script src="menu.js"></script>
    <!--默认是竖直菜单，现在设置成水平菜单-->
    <style>
        #menu{
              width: 300px;
          }
        .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: 10px;
            width: auto;
        }
    </style>
</head>
<body>
   <ul id="menu">
       <li>
           <a href="#">java</a>
           <ul>
               <li><a href="#">java EE</a></li>
               <li><a href="#">java SE</a></li>
               <li><a href="#">java ME</a></li>
           </ul>
       </li>
       <li>c
           <ul>
               <li><a href="#">c++</a></li>
               <li><a href="#">c</a></li>
               <li><a href="#">object-c</a></li>
           </ul>
       </li>
       <li>c++</li>
       <li>php</li>
       <li>objectc</li>
   </ul>
</body>
</html>
js:
/**
 * Created by hao on 2015/10/5.
 */
$(function(){
    //设置子菜单的位置
    $("#menu").menu({position:{at:"left bottom"}});
})
需要依赖的库文件：
http://download.csdn.net/detail/zhaihaohao1/9156967