这是一个简单的手机面板菜单效果,它的js部分写的很简单,但还可以优化,来试试吧,你可以的!~
导航菜单html
<div id="dashboard" class="tab tabNoSelected"> <!-- Dashboard -->
<h3><span class="entypo-gauge"></span>Dashboard</h3>
<a href="#1" class="notification">1</a>
</div>
<div id="dashboardBody" class="tabBody">
<ul class="tabBodyOptions">
<li><a href="#10"><span class="entypo-phone"></span> Calls</a></li>
<li><a href="#11"><span class="entypo-chart-line"></span>Chart</a></li>
<li><a href="#12"><span class="entypo-map"></span>Map</a></li>
</ul>
</div>
点击展开和收缩
$(document).ready(function() {
$("#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");
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791