当前位置：首页 > 网页特效 > 导航菜单

jQuery多级目录手风琴菜单

分类：导航菜单日期：2024-05-14 点击(1) 评论(0)

jQuery多级目录手风琴菜单

简介

##### HTML
```html
<ul class="topnav">
    <li><a href="#" target="scriptbreaker">Home</a></li>
    <li><a href="#">JavaScript<span>[+]</span></a>
        <ul>
             <li><a href="#">Cookies</a></li>
             <li><a href="#">Events</a></li>
             <li><a href="#">Forms</a></li>
             <li><a href="#">Games</a></li>
             <li><a href="#">Images</a></li>
             <li><a href="#">Navigations<span>[+]</span></a>
                <ul>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                </ul>
            </li>
             <li><a href="#">Tabs</a></li>
        </ul>
    </li>
    <li><a href="#">Tutorials<span>[-]</span></a>
        <ul style="display: block;">
             <li class="active"><a href="#">HTML</a></li>
             <li><a href="#">CSS</a></li>
             <li><a href="#">JavaScript</a></li>
             <li><a href="#">Java<span>[+]</span></a>
                <ul>
                    <li><a href="#">JSP</a></li>
                    <li><a href="#">JSF</a></li>
                    <li><a href="#">JPA</a></li>
                </ul>
            </li>
             <li><a href="#">Tabs</a></li>
        </ul>
    </li>
    <li><a href="#" target="_blank">Contact</a></li>
    <li><a href="#">Upload script</a></li>
</ul> 
```               
##### 调用插件
首先引入必要的文件。

```html
<script type="text/javascript" src="jquery-1.5.2.min.js">
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js">
```
使用下面语句调用它。

```html
<script language="JavaScript">
$(document).ready(function() {
//use the scriptbreaker.com multiple accordion menu
    $(".topnav").accordion({
        accordion:true,
        speed: 500,
        closedSign: '[+]',
        openedSign: '[-]'
    });
});
</script>
```

web299.com

jQuery多级目录手风琴菜单

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果