jquery.agilebins实现多级下拉菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:jquery.agilebins实现多级下拉菜单效果代码

代码标签: jquery.agilebins 多级 下拉 菜单

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/agilebins.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/abFullDialog.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.agilebins-v1.0.4.min.js"></script>
</head>

<body>
   
    <div class="demo-main">








        <div class="demo-tit">
            <h2>一. (menu类型)导航菜单演示<span class="a1"><a href="help-debug.html?n=menu" target="_blank"></a></span><span class="a2">|</span><span class="a3"><a href="example/view/id-7001" target="_blank"></a></span></h2>
        </div>
        <!-- 一. (menu类型)导航菜单演示代码开始 -->
        <!-- Html代码开始 -->
        <div class="demo-nav">
            <ul class="one">
                <li class="conts">
                    <h3><a href="javascript:;">首页</a></h3>
                </li>
                <li class="conts">
                    <h3><a href="javascript:;">说明</a></h3>
                    <div class="sub">
                        <ul>
                            <li><a href="javascript:;">下拉内容1</a></li>
                            <li><a href="javascript:;">下拉内容2</a></li>
                            <li><a href="javascript:;">下拉内容3</a></li>
                            <li><a href="javascript:;">下拉内容4</a></li>
                            <li><a href="javascript:;">下拉内容5</a></li>
                        </ul>
                    </div>
                </li>
                <li class="conts">
                    <h3><a href="javascript:;">调试</a></h3>
                    <div class="sub">
                        <ul>
                            <li><a href="javascript:;">下拉内容1</a></li>
                            <li><a href="javascript:;">下拉内容2</a></li>
                            <li><a href="javascript:;">下拉内容3</a></li>
                            <li><a href="javascript:;">下拉内容4</a></li>
                            <li><a href="javascript:;">下拉内容5</a></li>
                            <li><a href="javascript:;">下拉内容6</a></li>
                        </ul>
                    </div>
                </li>
                <li class="conts">
                    <h3><a href="javascript:;">扩展</a></h3>
                    <div class="sub">
                        <ul>
                            <li><a href="javascript:;">下拉内容1</a></li>
                            <li><a href="javascript:;">下拉内容2</a></li>
                            <li><a href="javascript:;">下拉内容3</a></li>
                            <li><a href="javascript:;">下拉内容4</a></li>
                        </ul>
                    </div>
                </li>
                <li class="conts">
                    <h3><a href="javascript:;">参数</a></h3>
                    <div class="sub">
                        <ul>
                            <li><a href="javascript:;">下拉内容1</a></li>
                            <li><a href="javascript:;">下拉内容2</a></li>
                            <li><a href="javascript:;">下拉内容3</a></li>
                            <li><a href="javascript:;">下拉内容4</a></li>
                            <li><a href="javascript:;">下拉内容5</a></li>
                            <li><a href="javascript:;">下拉内容6</a></li>
                            <li><a href="javascript:;">下拉内容7</a></li>
                            <li><a href="javascript:;">下拉内容8</a></li>
                        </ul>
                    </div>
                </li>
                <li class="conts">
                    <h3><a href="javascript:;">下载</a></h3>
                    <div class="sub"&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0