当前位置:主页 > 网页特效 > 菜单导航 >

jQuery和css3炫酷折叠菜单插件

发布时间:2018/07/02 来源:互联网 浏览: 关键词:jquery CSS3 折叠菜单 
jQuery和css3炫酷折叠菜单插件 jQuery和css3炫酷折叠菜单插件
阿里云

简要教程

这是一款炫酷、实用的css3和jquery折叠菜单插件。该插件不仅外观精美,而且菜单切换时平滑自然。

HTML

<divid="main-container"><!-- Main Container -->
            <divid="dashboard"class="tab tabNoSelected"><!-- Dashboard -->
                <h3><spanclass="entypo-gauge"></span>Dashboard</h3>
                <ahref="#1"class="notification">1</a>
            </div>
            <divid="dashboardBody"class="tabBody">
                <ulclass="tabBodyOptions">
                    <li><ahref="#10"><spanclass="entypo-phone"></span> Calls</a></li>
                    <li><ahref="#11"><spanclass="entypo-chart-line"></span>Chart</a></li>
                    <li><ahref="#12"><spanclass="entypo-map"></span>Map</a></li>
                </ul>               
            </div>
            <divid="profile"class="tab tabNoSelected"><!-- Profile -->
                <h3><spanclass="entypo-vcard"></span>Profile</h3>
                <ahref="#2"class="notification">8</a>
            </div>
            <divid="profileBody"class="tabBody">
                <ulclass="tabBodyOptions">
                    <li><ahref="#20"><spanclass="fontawesome-user"></span> User</a></li>
                    <li><ahref="#21"><spanclass="entypo-user-add"></span>Add contact</a></li>
                    <li><ahref="#22"><spanclass="entypo-calendar"></span>Calendar</a></li>
                </ul>               
            </div>
            <divid="messages"class="tab tabSelected"><!-- Messages -->
                <h3><spanclass="entypo-mail"></span>Messages</h3>
                <ahref="#3"class="notification">14</a>        
            </div>
            <divid="messagesBody"class="tabBody">
                <ulclass="tabBodyOptions">
                    <li><ahref="#30"><spanclass="entypo-inbox"></span>Inbox</a></li>
                    <li><ahref="#31"><spanclass="entypo-paper-plane"></span>Sent</a></li>
                    <li><ahref="#32"><spanclass="entypo-trash"></span>Deleted</a></li>
                </ul>               
            </div>
            <divid="settings"class="tab tabNoSelected"><!-- Settings -->
                <h3><spanclass="entypo-cog"></span>Settings</h3>
                <ahref="#4"class="notification">16</a>               
            </div>
            <divid="settingsBody"class="tabBody">
                <ulclass="tabBodyOptions">
                    <li><ahref="#40"><spanclass="fontawesome-beer"></span> Fill Beer</a></li>
                    <li><ahref="#41"><spanclass="entypo-adjust"></span>Adjust</a></li>
                    <li><ahref="#42"><spanclass="entypo-bell"></span> Alarm</a></li>
                </ul>               
            </div>
        </div><!-- Main Container END -->

JAVASCRIPT

引入jQuery文件

<scriptsrc='https://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>

jQuery代码

$("#messagesBody").slideToggle("fast");// The Body of "Messages" is already opened in the design sample.
  $("#dashboard").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#dashboardBody").slideToggle("fast");
  });
    $("#profile").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#profileBody").slideToggle("fast");
  });
  $("#messages").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#messagesBody").slideToggle("fast");
  });
  $("#settings").click(function(){
    $(".tab").removeClass("tabSelected");
    $(".tab").addClass("tabNoSelected");
    $(this).removeClass("tabNoSelected");
    $(this).addClass("tabSelected");
    $(".tabBody").slideUp("fast");
    $("#settingsBody").slideToggle("fast");
  });
});

更多详细信息请参看:http://codepen.io/jlalovi/pen/skeud

共有人阅读,期待你的评论!评论
Top