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
结构,代码如下:
<!--Start Side Sticky Menu--><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><!--End Side Sticky Menu-->
初始化插件:在页面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" /><!--CSS RESET--><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"><!--ssMenu CSS--><link rel="stylesheet" href="css/ss-menu.css"><link rel="stylesheet" href="css/demo.css"></head><body><!--Start Side Sticky Menu--><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><!--End Side Sticky Menu--><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"><!--Font Awesome--><link href="/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><!--jQuery--><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"><!--ssMenu CSS--><link rel="stylesheet" href="css/ss-menu.css"><!--ssMenu JS--><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"><!--Start Side Sticky Menu--><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><!--End Side Sticky Menu--></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>
效果如下图:
标题jQuery
固定侧边栏插件ss-Menu.js
相关资源离线下载
地址为:固定侧边栏插件ss-Menu.js
相关资源离线下载,提货码:ltgz
如果觉得《jQuery固定侧边栏插件ss-Menu.js》对你有帮助,请点赞、收藏,并留下你的观点哦!