使用ss-Menu固定侧边栏插件
任务描述
使用ss-Menu固定侧边栏插件实现侧边栏效果，如图1和l图2所示，选择颜色能更换侧边栏背景色，单击重置按钮，可以重置背景色。
图1 侧边栏部分展开效果
图2 侧边栏展开效果
任务分析
侧边栏导航通常位于左侧，它位于F式布局的最左侧，作为信息主干，也符合用户的浏览习惯。在项目中要使用ss-Menu固定侧边栏插件，需要引入三个文件，一个jQuery库，一个ss-menu插件js文件和一个ss-menu的CSS文件，操作步骤如下：
1. 完成HTML结构设计，设计好侧边栏结构。
2. 在页面引入ss-menu插件的CSS文件。
3. 在页面引入jQuery框架和ss-menu插件文件。
任务实现
1.引入jquery核心库和ssMenu插件库
代码如下：
<script src=“js/jquery-1.12.4.js”type="text/javascript"></script>
<scriptsrc="js/jquery.ss.menu.js"></script>
2.添加样式表文件
<link rel="stylesheet"href="css/ss-menu.css">
在本案例中，使用了FontAwesome提供的矢量图标。在使用Font Awesome前已经将所需字体拷贝到fonts文件夹中，所需样式font-awesome.min.css拷贝到css文件夹中。
在案例中所需要的字体如下：
在页面添加font-awesome.min.css样式：
<linkrel="stylesheet" type="text/css"href="css/font-awesome.min.css" />
3.创建HTML页面
菜单的HTML页面结果：
<!--侧边栏开始-->
<navclass="ss-menu ">
<ul>
<li><ahref="#1"><i class="fa fa-android"></i>系统记录</a></li>
<li><a href="#1"><span>6</span> <i></i>客户管理</a></li>
<li><ahref="#1"><i class="fa fa-heartbeat"></i>渠道管理</a></li>
<li><ahref="#1"><i class="fa fa-bank"></i>APP管理</a></li>
<li><ahref="#1"><i class="fa fa-cc-paypal"></i>在线支付</a></li>
<li><ahref="#1"><i class="fa fa-bookmark-o"></i> 系统管理 </a></li>
<li><ahref="#1"><i class="fa fa-car"></i>素材管理 </a></li>
<li><ahref="#1"><i class="fa fa-bar-chart"></i>统计分析</a></li>
<li><ahref="#1"><i></i>联系我们</a></li>
</ul>
</nav>
<!--侧边栏结束-->
页面内容的HTML页面结果：
<!--页面内容开始-->
<divclass="htmleaf-container">
<headerclass="htmleaf-header">
<h1>jQuery固定侧边栏插件ssMenu <span>客户管理系统</span></h1>
</header>
<mainclass="ss-main">
<article>
<sectionclass="theme-picker">
<h2> 更换侧边栏背景色 </h2>
<p> 单过选择你想更换的侧边栏颜色 </p>
<buttonclass="set-default"> 重置 </button>
<spanclass="red"> </span>
<spanclass="yellow"> </span>
<spanclass="blue"> </span>
<spanclass="green"> </span>
<spanclass="orange"> </span>
<spanclass="brown"> </span>
<spanclass="teal"> </span>
<spanclass="purple"> </span>
<divclass="ad-unit">
</div>
</section>
<div>
<imgsrc="related/content.jpg" width="710" />
</div>
</article>
</main>
</div>
<!--页面内容结束-->
4. 使用ssMenu插件实现侧边栏效果
<scripttype="text/javascript">
$(document).ready(function(){
$(".ss-menu").ssMenu();
});
</script>
5. 设置侧边栏不同背景色
<scripttype="text/javascript">
$(function(){
var ssMenu =$(".ss-menu");
var theme =$(".theme-picker").find("span");
$(theme).click(function(y){
y =$(this).attr("class");
$(ssMenu).removeClass().addClass("ss-menu " +y);
});
$(".set-default").click(function(){
$(ssMenu).removeClass().addClass("ss-menu default");
});
});
</script>
6.本案例的完整代码如下：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<metaname="viewport" content="width=device-width,initial-scale=1.0">
<title>jQuery固定侧边栏插件</title>
<linkrel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
<linkrel="stylesheet" type="text/css"href="css/font-awesome.min.css" />
<!--ssMenuCSS-->
<link rel="stylesheet" href="css/ss-menu.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<!--侧边栏开始-->
<navclass="ss-menu ">
<ul>
<li><ahref="#1"><i class="fa fa-android"></i>系统记录</a></li>
<li><a href="#1"><span>6</span> <i></i>客户管理</a></li>
<li><ahref="#1"><i class="fa fa-heartbeat"></i>渠道管理</a></li>
<li><ahref="#1"><i class="fa fa-bank"></i>APP管理</a></li>
<li><ahref="#1"><i class="fa fa-cc-paypal"></i>在线支付</a></li>
<li><ahref="#1"><i class="fa fa-bookmark-o"></i> 系统管理 </a></li>
<li><ahref="#1"><i class="fa fa-car"></i>素材管理 </a></li>
<li><ahref="#1"><i class="fa fa-bar-chart"></i>统计分析</a></li>
<li><ahref="#1"><i></i>联系我们</a></li>
</ul>
</nav>
<!--侧边栏结束-->
<!--页面内容开始-->
<divclass="htmleaf-container">
<headerclass="htmleaf-header">
<h1>jQuery固定侧边栏插件ssMenu <span>客户管理系统</span></h1>
</header>
<mainclass="ss-main">
<article>
<sectionclass="theme-picker">
<h2> 更换侧边栏背景色 </h2>
<p> 单过选择你想更换的侧边栏颜色 </p>
<buttonclass="set-default"> 重置 </button>
<spanclass="red"> </span>
<spanclass="yellow"> </span>
<spanclass="blue"> </span>
<spanclass="green"> </span>
<spanclass="orange"> </span>
<spanclass="brown"> </span>
<spanclass="teal"> </span>
<spanclass="purple"> </span>
<divclass="ad-unit">
</div>
</section>
<div>
<imgsrc="related/content.jpg" width="710" />
</div>
</article>
</main>
</div>
<!--页面内容结束-->
<scriptsrc=“js/jquery-1.12.4.js” type="text/javascript"></script>
<scriptsrc="js/jquery.ss.menu.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".ss-menu").ssMenu();
});
</script>
<scripttype="text/javascript">
$(function(){
var ssMenu =$(".ss-menu");
var theme =$(".theme-picker").find("span");
$(theme).click(function(y){
y =$(this).attr("class");
$(ssMenu).removeClass().addClass("ss-menu " +y);
});
$(".set-default").click(function(){
$(ssMenu).removeClass().addClass("ss-menu default");
});
});
</script>
</body>
</html>
