100字范文 > jQuery固定侧边栏插件ss-Menu.js

jQuery固定侧边栏插件ss-Menu.js

时间：2018-08-04 22:25:02

`ss-Menu.js`插件介绍

ssMenu是一款jQuery固定侧边栏插件。ssMenu侧边栏插件使用简单，内置多种颜色主题，也可以自定义侧边栏菜单的颜色，非常实用。

`ss-Menu.js`插件使用

首先是在页面中引入ss-menu.css、jquery和ss-menu.js文件。

<link rel="stylesheet" href="css/ss-menu.css"><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/ss-menu.js"></script>

HTML结构：菜单有基本的html结构，代码如下：

<nav class="ss-menu "><ul><li><a href="#1"><i class="fa fa-android"></i> Apps Development</a></li><li><a href="#1"> <span class="ss-badge">6</span> <i class="fa fa-bar-chart"></i> Business & Marketing </a></li><li><a href="#1"><i class="fa fa-heartbeat"></i> Life Insurance</a></li><li><a href="#1"><i class="fa fa-bank"></i> Bank Loans</a></li><li><a href="#1"><i class="fa fa-cc-paypal"></i> Bank Marketing</a></li><li><a href="#1"><i class="fa fa-bookmark-o"></i> Insurance Policies </a></li><li><a href="#1"><i class="fa fa-car"></i> Vehicle Insurance </a></li><li><a href="#1"><i class="fa fa-briefcase"></i> Online Insurance</a></li><li><a href="#1"><i class="fa fa-location-arrow"></i> Nearest Bank</a></li></ul></nav>

初始化插件：在页面DOM元素加载完毕之后，通过下面的方法来初始化插件。

$(document).ready(function(){$(".ss-menu").ssMenu();});

要使用不同的主题效果，可以在配置参数中设置。

$(document).ready(function(){$(".ss-menu").ssMenu({theme: "theme-name",});});

可用的主题名称有：

redyellowbluegreenorangebrowntealpurple

`ss-Menu.js`插件使用案例

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery固定侧边栏插件ssMenu|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><link href="/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><link rel="stylesheet" href="css/ss-menu.css"><link rel="stylesheet" href="css/demo.css"></head><body><nav class="ss-menu "><ul><li><a href="#1"><i class="fa fa-android"></i> Apps Development</a></li><li><a href="#1"> <span class="ss-badge">6</span> <i class="fa fa-bar-chart"></i> Business & Marketing </a></li><li><a href="#1"><i class="fa fa-heartbeat"></i> Life Insurance</a></li><li><a href="#1"><i class="fa fa-bank"></i> Bank Loans</a></li><li><a href="#1"><i class="fa fa-cc-paypal"></i> Bank Marketing</a></li><li><a href="#1"><i class="fa fa-bookmark-o"></i> Insurance Policies </a></li><li><a href="#1"><i class="fa fa-car"></i> Vehicle Insurance </a></li><li><a href="#1"><i class="fa fa-briefcase"></i> Online Insurance</a></li><li><a href="#1"><i class="fa fa-location-arrow"></i> Nearest Bank</a></li></ul></nav><div class="htmleaf-container"><header class="htmleaf-header"><h1>jQuery固定侧边栏插件ssMenu <span>sticky Side Navigation jQuery ssMenu</span></h1><div class="htmleaf-links"><a class="htmleaf-icon icon-htmleaf-home-outline" href="/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a><a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="/jQuery/Menu-Navigation/03045548.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a></div></header><main class="ss-main"><article><section class="theme-picker"><h2> Choose theme </h2><p> The following are built in and suitable color scheme for side sticky menu. </p><button class="set-default"> Set Default </button><span class="red"> </span><span class="yellow"> </span><span class="blue"> </span><span class="green"> </span><span class="orange"> </span><span class="brown"> </span><span class="teal"> </span><span class="purple"> </span><div class="ad-unit"></div></section><h2> Dependency </h2><p> jQuery 3.3.1 and FontAwesome 4.7.0</p><h2> How to Use </h2><p> 1. Load the jQuery and Font Awesome into HTML document. </p><pre class="prettyprint lang-html"><link href="/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><script src='/ajax/libs/jquery/3.3.1/jquery.min.js'></script></pre><p> 2. Include the ssMenu CSS and JavaScript file into your project. </p><pre class="prettyprint lang-html"><link rel="stylesheet" href="css/ss-menu.css"><script src="js/jquery.ss.menu.js"></script> </pre><p> 3. Create HTML structure for ssMenu with the <code> nav </code> element that contains unordered list with your menu links. </p><pre class="prettyprint lang-html"><nav class="ss-menu "><ul><li><a href="#1"><i class="fa fa-android"></i> Apps Development</a></li><li><a href="#1"> <span class="ss-badge">6</span> <i class="fa fa-bar-chart"></i> Business & Marketing </a></li><li><a href="#1"><i class="fa fa-heartbeat"></i> Life Insurance</a></li><li><a href="#1"><i class="fa fa-bank"></i> Bank Loans</a></li><li><a href="#1"><i class="fa fa-cc-paypal"></i> Bank Marketing</a></li><li><a href="#1"><i class="fa fa-bookmark-o"></i> Insurance Policies </a></li><li><a href="#1"><i class="fa fa-car"></i> Vehicle Insurance </a></li><li><a href="#1"><i class="fa fa-briefcase"></i> Online Insurance</a></li><li><a href="#1"><i class="fa fa-location-arrow"></i> Nearest Bank</a></li></ul></nav></pre><p> 4. Initialize ssMenu Plugin in jQuery document ready function.</p><pre class="prettyprint lang-js">$(document).ready(function(){$(".ss-menu").ssMenu();}); </pre><p> 5. To change the theme, just put the name of theme in the following option. </p><pre class="prettyprint lang-js">$(document).ready(function(){$(".ss-menu").ssMenu({theme: "theme-name",});}); </pre><p> All available themes are as follows:</p><ol><li> red</li><li>yellow </li><li> blue </li><li>green </li><li> orange </li><li>brown </li><li> teal</li><li> purple</li></ol><p> 6. To hide navigation on scroll down. default: false </p><pre class="prettyprint lang-js">$(".ss-menu").ssMenu({hideOnScroll: true,});</pre><p> 7. To add additional CSS properties into ssMenu, put the CSS values in the following object. </p><pre class="prettyprint lang-js">$(".ss-menu").ssMenu({additionalCSS: ({ 'background' : '', //custom background color'color' : '', //custom text color 'boxShadow' : '', //to add box shadow 'textShadow' : '', //to add text shadow }), });</pre></article></main><div class="related"><h3>如果你喜欢这个插件，那么你可能也喜欢:</h3><a href="/jQuery/Menu-Navigation/12075446.html"><img src="related/1.jpg" width="300" alt="移动优先的jquery多级导航菜单插件"/><h3>移动优先的jquery多级导航菜单插件</h3></a><a href="/jQuery/Menu-Navigation/11125408.html"><img src="related/2.jpg" width="300" alt="Bootstrap4导航菜单sina-nav"/><h3>Bootstrap4导航菜单sina-nav</h3></a></div></div><script src="js/jquery-1.11.0.min.js" type="text/javascript"></script><script src="js/jquery.ss.menu.js"></script><script>$(document).ready(function(){$(".ss-menu").ssMenu();}); </script><script>$(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); //Aaah what a nice });$(".set-default").click(function(){$(ssMenu).removeClass().addClass("ss-menu default");});});</script></body></html>

效果如下图：