### 基础概念 Bootstrap 4 是一个流行的前端框架,用于快速开发响应式和移动优先的网站。切换按钮(Toggle Button)通常用于在用户界面中切换状态,例如打开或关闭侧边菜单。 #...
padding-left: 40px; } /* 第二层级缩进 */ .page-sidebar .sidebar-menu .submenu>li .submenu>li>a { padding-left: 50px; } .page-sidebar .sidebar-menu a:hover { color: #262626; } /* 选中增加蓝色border */ .page-sidebar .sidebar-menu .active:before { display: block; content: "";...
首先我们在初始化菜单的那个做如下更改,在sidebar-menu.js文件改成这样 (function($){$.fn.sidebarMenu=function(options){options=$.extend({},$.fn.sidebarMenu.defaults,options||{});vartarget=$(this);target.addClass('nav');target.addClass('nav-list');if(options.data){init(target,options.data)...
<ul class="sub-menu sidebar-dropdown-menu"> ... </ul> </li> ... </ul> </div> 使用下拉菜单需要在你的页面头部添加dropdown.js。 高亮显示二级菜单 你要高亮显示二菜单,需要添加类名light. <div class="page-sidebar"> <ul> <li> <a>Item</a> <ul class="sub-menu light"> ... ...
再来看看sidebar-menu.js这个文件里面封装的方法: (function ($) { $.fn.sidebarMenu = function (options) { options = $.extend({}, $.fn.sidebarMenu.defaults, options || {}); var target = $(this); target.addClass('nav'); target.addClass('nav-list'); ...
.sidebar-menu{ border-right:1pxsolid#c4c8cb; } /*一级菜单*/ .menu-first{ height:45px; line-height:45px; background-color:#e9e9e9; border-top:1pxsolid#efefef; border-bottom:1pxsolid#e1e1e1; padding:0; font-size:14px; font-weight:normal; ...
4、标签页带图标 标签页里面仅仅显示文字和关闭的图标给人感觉太空洞,我们增加页面的图标。首先首页的标签页我们增加一个home图标,在index.html增加如下i标签: 然后其他每一个动态打开的tab页前面的图标就是对应的点击左边菜单对应的图标。首先我们在初始化菜单的那个做如下更改,在sidebar-menu.js文件改成这样 ...
经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。
$('#menu').sidebarMenu({url:"/api/Api/GetMenuByUser/",param:{strUser:'admin'}}); 即可,呵呵,很简单吧。 2、Tab页效果 Tab页的效果其实是和左边菜单息息相关的,首先还是看看Tab页效果的js引用。 <scriptsrc="/Scripts/bootstrap-tab.js"></script> ...
{ //设置关闭 $(".page-sidebar").css("width","75px"); $(".page-content").css("margin-left","75px"); $("#drawer").attr("data-state",'close'); $(".menu-p").css("display","none"); $(".collapse").css("display","none"); $(".arrow").css("display","none"); } }...