精华内容
下载资源
问答
  • jquery隐藏侧边栏和折叠侧边栏方法

    千次阅读 2018-06-25 12:09:26
    两种效果如下所示:隐藏侧边栏: 折叠侧边栏: 下面,分享隐藏侧边栏实现方法:实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果html部分:12<div class="sidebar"&...

    两种效果如下所示:

    隐藏侧边栏:

     

    折叠侧边栏:

     

    下面,分享隐藏侧边栏实现方法:

    实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果

    html部分:

    1
    2
    <div class="sidebar">侧边栏</div>
    <div class="main">主体部分</div>

     

    css部分:

    1
    2
    3
    4
    .sidebar{background#333645;width200pxpositionabsoluteleft0top0height100%overflowauto; transition: all 0.2s ease 0s;}
    .main{overflowhiddenpositionabsoluteleft200pxright0height100%; transition: all 0.2s ease 0s;}
    .big-page .sidebar{left-200px;}
    .big-page .main{left0;}

     

    js部分:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 切换侧边栏
    $(function(){
        // 切换侧边栏
        $(".navbar-left li").click(toggleSidebar);
    });
     
     
    //切换侧边栏显示隐藏
    function toggleSidebar(){
        $("body").toggleClass("big-page");
        return false;
    }

     

    折叠侧边栏实现方法:

    实现思路:和隐藏侧边栏实现基本上相同,折叠后(只显示图标的时候)使用css控制栏目显示和隐藏。

    在线效果:折叠侧边栏效果, 我真是操碎了心(捂脸)

    htm部分:

    复制代码
    <body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <h4>博客管理系统(四月)</h4>
                <div class="cover">
                    <h2><img class="img-circle" src="images/icon_face.jpg"/></h2>
                    <b>Hi~ 小主</b>
                    <p>超级管理员</p>
                </div>
                <ul class="sidenav animated fadeInUp">
                    <li><a class="withripple" href=""><i class="icon icon-home"></i><span class="sidespan">首页</span></a></li>                
                    <li><a class="withripple hover" href="javascript:;"><i class="icon icon-article"></i><span class="sidespan">文章管理</span><i class="iright pull-right">&gt;</i></a>
                        <ul class="sidebar-dropdown">
                            <li><a href="list.html" class="withripple" target="myframe">文章列表</a></li>
                            <li><a href="add.html" class="withripple" target="myframe">添加文章</a></li>
                        </ul>
                    </li>
                    <li><a class="withripple" href="javascript:;"><i class="icon icon-ui"></i><span class="sidespan">UI设计</span><i class="iright pull-right">&gt;</i></a>
                        <ul class="sidebar-dropdown">
                            <li><a href="" class="withripple">UI设计列表</a></li>
                            <li><a href="" class="withripple">添加作品</a></li>
                        </ul>
                    </li>
                    <li><a class="withripple" href="javascript:;"><i class="icon icon-web"></i><span class="sidespan">WEB前端</span><i class="iright pull-right">&gt;</i></a>
                        <ul class="sidebar-dropdown">
                            <li><a href="" class="withripple">文章列表</a></li>
                            <li><a href="" class="withripple">添加WEB作品</a></li>
                        </ul>
                    </li>
                    <li><a class="withripple" href="javascript:;"><i class="icon icon-php"></i><span class="sidespan">PHP后台</span><i class="iright pull-right">&gt;</i></a>
                        <ul class="sidebar-dropdown">
                            <li><a href="" class="withripple">PHP项目</a></li>
                            <li><a href="" class="withripple">添加项目</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 侧边栏 完-->
    <!-- 主体部分  -->
            <div class="main">    主体部分的内容</div>
    </body>
    复制代码

     

    css部分:

    复制代码
    /* sidebar
     ---------------------------------------- */
    .sidebar{
      position: fixed; 
      width: 215px; height: 100%; background: #262930; 
      transition: all .3s ease;
    }
    .sidebar > h4{
      margin: 0; padding: 18px 10px;
      background: #00bfa5; color: #fff; font-size: 18px;  
      white-space: nowrap;
    }
    .cover{
      padding-top:40px; padding-bottom: 10px;
      text-align: center;  background: #20242c; 
    }
    .cover > h2{
      position: relative; 
      margin: 0 auto; max-height: 80px; max-width: 80px; 
      background: #3d4147; border: 1px solid #1ab394; border-radius: 50%;
    }
    .cover > h2 img{
      position: relative; z-index: 100; 
      width: 100%; margin-left: -5px;
      border: 1px solid #1ab394; 
    }
    .cover > h2:after{
      content:''; 
      position: absolute; left: -12px; top: -8px; 
      height: 96px; width: 96px; 
      background: #3d4147; border-radius: 50%; 
    }
    .cover > b{
      display: block;
      margin-top: 20px; 
      color: #f3f3f4; font-size: 13px; 
    }
    .cover > p{ margin-top: 4px;color: #acb0b8; font-size: 12px;}
    
    /*sidenav*/
    .sidenav,.sidebar-dropdown{padding: 0; }
    .sidenav a{color: #9d9d9d; }
    .sidenav > li > a{
      display: block; padding: 10px;
      font-size: 14px; border-left: 2px solid transparent; 
      transition: .3s linear; 
    }
    .sidenav > li > a > i{margin-right: 10px;}
    .sidenav > li > a.hover,
    .sidenav > li > a:hover{
      border-left: 2px solid #21b496; background: #20242c; text-decoration: none;
    }
    .iright{margin-top: 4px; font-family:"宋体"; font-style: normal; }
    .sidebar-dropdown{
      display: none;
      font-size: 14px; background: #20242c; border-left: 2px solid #21b496; }
    .sidebar-dropdown > li > a{display: block; padding: 10px 0 10px 36px;}
    
    /*伸缩侧边css代码*/
    .sidebar-collapse .main{margin-left: 60px;}
    .sidebar-collapse .sidebar{width: 60px;}
    .sidebar-collapse .sidenav > li{position: relative; z-index: 9999; text-align: center;}
    .sidebar-collapse .sidenav > li:hover > a{border-left: 2px solid #21b496; background: #20242c; text-decoration: none;}
    .sidebar-collapse .sidenav > li:hover .sidebar-dropdown{display: block!important;}
    .sidebar-collapse .cover > b{font-size: 12px;}
    .sidebar-collapse .cover > p,
    .sidebar-collapse .sidespan,
    .sidebar-collapse .iright,
    .sidebar-collapse .cover > h2:after{
        display: none;
    }
    .sidebar-collapse .cover{padding-top: 30px;}
    .sidebar-collapse .cover > h2{margin: 6px;}
    .sidebar-collapse .sidebar-dropdown{
      position: absolute; top: 0; left: 60px; z-index: 9999;
      display: none!important;
      width: 150px; border-left: none; list-style: none;   
    }
    .sidebar-collapse .sidebar-dropdown > li > a{padding-left: 0; }
    .sidebar-collapse .sidebar-dropdown > li > a:hover{background: #191e26; text-decoration: none; color: #fff;}
    .sidebar-collapse .cover > h2 img{margin-left: 0; border: none;}
    /* main
     ---------------------------------------- */
    .main{overflow: hidden; margin-left: 215px; transition: all .3s ease; padding-top: 50px;}
    复制代码

     

    js部分:

    复制代码
    /* 侧边栏切换形态 */
    $(".navbar-side a").click(function(){
        $("body").toggleClass("sidebar-collapse");
        if($("body").hasClass("sidebar-collapse")){
            $(".sidebar > h4").html("博客");
        }else{
            $(".sidebar > h4").html("博客管理系统(四月)");
        }
        return false;
    })
    
    $(".sidenav>li>a").click(function(){
        $(this).addClass("hover");
        $(this).next().slideToggle();    
        $(this).parent().siblings().children("a").removeClass("hover").next().slideUp();
        
    })
    复制代码

     原文:原文

    展开全文
  • jquery基于Bootstrap隐藏侧边栏菜单代码 jquery基于Bootstrap隐藏侧边栏菜单代码
  • 这是一款非常实用的谷歌Material design风格隐藏侧边栏特效。用户可以通过点击左上角的汉堡包图标来打开和隐藏侧边栏菜单。在侧边栏菜单打开时,整个页面就像是被向右下推动一些距离,效果非常不错。
  • 隐藏侧边栏

    2012-03-05 10:47:42
    请问大家,有个页面,侧边是个treeview控件,请问如何隐藏和显示整个侧边。
  • cbFlyout是一款简单实用的响应式jQuery多级隐藏侧边栏菜单插件。该隐藏侧边栏插件实用简单,通过简单的设置最小视口参数就可以在小于该视口宽度时,将导航菜单转换为隐藏侧边栏菜单。
  • jquery.secretnav是一款效果非常炫酷的jQuery推拉式3D隐藏侧边栏菜单特效。该隐藏侧边栏特效支持从左侧和顶部显示菜单,并且在显示菜单的时候带有3D透视的推拉效果,非常的优美。
  • 这是一款非常实用的HTML5和CSS3 Material Design风格隐藏侧边栏网页布局模板。该模板设计简洁,侧边栏带动画效果,点击或触摸菜单项时会有点击波特效。
  • 这是一款仿irBnb网站在ios7上的app应用的隐藏侧边栏效果的jQuery和css3页面3d倾斜打开隐藏侧边栏特效插件。该隐藏侧边栏插件在点击特定的按钮后,当前页面会3d倾斜缩小,隐藏侧边栏会从设定的页面边部滑出。
  • 这是一款jquery隐藏侧边栏导航菜单插件。当点击菜单按钮后,隐藏的侧边栏导航菜单出现,并且菜单选项带有很炫的动画效果。再次点击菜单按钮,侧边栏消失。
  • 这是一款效果非常炫酷的创意旋转式打开隐藏侧边栏UI界面设计。该侧边栏设计中,当用户点击侧边栏按钮的时候,整个页面会旋转一个角度,然后隐藏在页面下的侧边栏会被显示出来,效果非常的酷。
  • 这是一款炫酷的jQuery和css3隐藏侧边栏菜单特效插件。该侧边栏插件初始化时是隐藏的,当用户点击了导航按钮,侧边栏从又侧边被滑动推出,该侧边栏还可以有二级子菜单。
  • 手机端点击滑动隐藏侧边栏菜单基于CSS3制作,4种侧边栏菜单实例。
  • slide-and-swipe-menu是一款支持移动手机滑动触摸的隐藏侧边栏菜单jQuery插件。该侧边栏菜单基于touchSwipe插件,可以通过按钮来触发打开侧边栏菜单,并通过滑动触摸来关闭菜单。
  • 这是一款带炫酷过渡动画效果的响应式隐藏侧边栏界面设计效果。该隐藏侧边栏采用推拉式设计,侧边栏打开时页面的主内容会被推动。另外,在侧边栏打开的状态下,缩放浏览器到一定大小的时候,侧边栏会像被吸附一样扩展...
  • 如下图所示,很容易看出:显示 / 隐藏侧边栏的快捷键为Ctrl+K,Ctrl+B。开始我还以为是Ctrl+K或者Ctrl+B随便选一个,结果我按了ctrl+B,死活没反应,再按按Ctrl+K,也是没反应,后来我就两个互相按,一会按按这个...

     

    目录

    一、显示 / 隐藏 侧边栏的快捷键

    二、修改侧边栏颜色

          1. SideBarEnhancements插件:(如果sublime没有侧边栏,可以安装这个插件)

          2. SyncedSidebarBg插件:(通过安装插件,更改侧边栏颜色)

    三、修改侧边栏字体大小、行间距等


    一、显示 / 隐藏 侧边栏的快捷键

    参考:https://blog.csdn.net/jiulongls/article/details/81041949 Sublime Text 3 隐藏/显示侧边栏的快捷键

              如下图所示,很容易看出:显示 / 隐藏侧边栏快捷键为Ctrl+K,Ctrl+B。开始我还以为是Ctrl+K或者Ctrl+B随便选一个,结果我按了ctrl+B,死活没反应,再按按Ctrl+K,也是没反应,后来我就两个互相按,一会按按这个一会按按那个,结果侧边栏只有几次被打开,我也不知道是按哪个键被触发的。。。。。后来,看到上面那篇博客,明白了!!!Salute!!!

           so,快捷键就是:先按一下Ctrl+K,然后再按一下Ctrl+B,,,,就能触发侧边拦的显示和隐藏啦!!!

     

     

    二、修改侧边栏颜色

    参考:https://blog.csdn.net/keyunq/article/details/53282634  sublime text 3 侧边栏 增强插件

              https://blog.csdn.net/zhangyu_h321/article/details/54709503  sublime text怎么显示及修改侧边栏颜色(参考这篇!

    1. SideBarEnhancements插件:(如果sublime没有侧边栏,可以安装这个插件)

        有效地改进了Sublime Text的侧边栏。安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开、新建文件、新建文件夹、以…打开、在浏览器中打开。

    2. SyncedSidebarBg插件:(通过安装插件,更改侧边栏颜色

         Ctrl+Shift+P -> install -> 搜索安装包SyncedSidebarBg,自动同步侧边栏底色为编辑窗口底色。安装完此插件后,效果如下图所示:

        

     

    注:

    好像还可以通过修改配置文件,来更改侧边栏的颜色、字体大小等。可以参考下面两篇博客:

    https://blog.csdn.net/weixin_41161263/article/details/102955302   Sublime Text3 修改侧边栏颜色

    https://blog.csdn.net/crper/article/details/50609370   Sublime text 3更改侧边栏【sidebar】的字体大小

     

    三、修改侧边栏字体大小、行间距等

    参考:https://blog.csdn.net/longzhoufeng/article/details/78809825  修改Sublime Text3 的侧边栏字体大小 (参考这篇博客,有奇效!!!)

                https://blog.csdn.net/luoyu6/article/details/79755804   设置sublime侧边栏字体大小

    具体步骤:

    1. Preference—>设置-默认—>会打开一个Preferences.sublime-settings的文件——>搜索theme,找到主题设置的文件名为Default.sublime-theme

    2. 找到Default.sublime-theme文件并打开,此文件在Sublime Text\Data\Packages\User目录下(针对我电脑而言)

    3. 在Default.sublime-theme里添加字体大小的设置,即可,也可以添加行间距什么的。

    4,效果如下所示:字体大小变大了,行间距也变大了。大功告成!

     

    展开全文
  • 这是一款响应式基于jquery和Bootstrap3的隐藏侧边栏菜单特效。该侧边栏菜单依赖于bootstrap3和Malihu滚动条美化插件,可以在桌面浏览器和移动手机上正常工作。
  • side-by-slide-panel是一款非常有用的纯javascript轻量级可嵌套的隐藏侧边栏插件。通过它可以快速的制作各种隐藏侧边栏效果,甚至可以将这些内容嵌套在一起。
  • blurry-menu是一款效果非常酷的HTML5 Canvas和jQueryUI模糊隐藏侧边栏特效。该侧边栏特效可以将它下面的HTML元素进行模糊处理。模糊效果是动态加入的,任何在侧边栏下方的HTML元素都将被模糊。
  • 这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来...
  • Slidebars是一款简单实用的手机App样式隐藏侧边栏特效jQuery插件。该侧边栏插件十分小巧,仅需1555字节的js文件和600字节的css文件。它使用CSS3动画来制作过渡效果,在不支持的浏览器中会使用jQuery .animate()方法...
  • 这是一款使用jQuery和CSS3制作的带隐藏侧边栏的垂直多面板UI界面布局。这个UI界面使用汉堡包图标作为隐藏菜单触发按钮,点击它时菜单会从上往下滑出。点击相应的菜单项可以直接跳转到相应的面板上。
  • 这是9种效果很炫的html5和css3隐藏侧边栏导航菜单动画效果,点击主菜单按钮,侧边栏导航菜单将以动画的方式出现。有波浪、气泡、弹射等超酷动画效果。
  • blurry-menu是一款效果非常酷的HTML5 canvas和...制作方法使用该模糊隐藏侧边栏插件需要引入以下的一些依赖文件。HTML结构侧边栏的HTML结构如下: Menu 1Menu 2Menu 3你可以创建一个汉堡包图标用于打开和关闭侧...

    blurry-menu是一款效果非常酷的HTML5 canvas和jQueryUI模糊隐藏侧边栏特效。该侧边栏特效可以将它下面的HTML元素进行模糊处理。模糊效果是动态加入的,任何在侧边栏下方的HTML元素都将被模糊。

    制作方法

    使用该模糊隐藏侧边栏插件需要引入以下的一些依赖文件。

    HTML结构

    侧边栏的HTML结构如下:

    你可以创建一个汉堡包图标用于打开和关闭侧边栏菜单。

    b5f990597dde89240d13bb4bf9bff1a4.gif

    CSS样式

    需要给侧边栏菜单一些基本的CSS样式。

    #menu {

    box-shadow: 5px 5px 30px #000000;

    position: absolute;

    width: 0px;

    overflow: hidden;

    top: 0px;

    left: -7px;

    color: #ffffff;

    }

    #menu-content { position: relative; }

    #blurred-bg-canvas { position: absolute; }

    #captured-image { display: none; }

    初始化插件

    可以简单的通过下面的方法来触发侧边栏菜单。

    BlurryMenu.openMenu();

    展开全文
  • 9种html5+css3隐藏侧边栏导航菜单动画效果;有波浪形、滑动形、角落隐藏形,方便用于模板,可直接使用,快速建网
  • 这是一款效果非常炫酷的jQuery和CSS3推拉式隐藏侧边栏网格图片画廊特效。这个图片画廊特效中所有缩略图以网格形式排列,当用户点击相应的缩略图后,整个缩略图面板被向左推,右侧显示大图及图片的文字说明。
  • 显示/隐藏侧边栏

    2020-12-09 09:51:26
    显示/隐藏 显示/隐藏 俺是个js初学者,献丑了。这段js演示其实很简单,俺在这里只是想跟js大大们说一句:js是行为,不要跟样式表打架。有些事还是该由css来做的,例如:display:none || display:block,简直泛滥...
  • sublime Text隐藏侧边栏等快捷键

    万次阅读 2016-03-31 18:13:02
    从视图-侧边栏(view-side bar)可以看出系统给出的默认快捷键为(ctrl+k,ctrl+b),显然很不方便。下面我们进行自定义: 打开首选项-(preferences-key ... {"keys": ["f1"],"command": "toggle_side_bar"},//隐藏侧边栏

    视图-侧边栏(view-side bar)可以看出系统给出的默认快捷键为(ctrl+k,ctrl+b),显然很不方便。下面我们进行自定义:
    打开首选项-<按键绑定-用户>(preferences-key binding-user)(新版3126是首选项-快捷键设置),添加或修改为以下命令:

    [
        {"keys": ["f1"],"command": "toggle_side_bar"},//隐藏侧边栏
        {"keys": ["ctrl+b"],"command": "open_in_browser"},//打开在相应应用
        {"keys": ["ctrl+shift+f"],"command": "reindent"},//代码格式化
    ]
    

    其中f1即为我们自定义的隐藏侧边栏的快捷键,你可以选用其它,但最好不要引起键的冲突。


    事实上,我们也可以在系统默认的快捷键中查看原来的按键绑定,新版(3126)的如下图(用户自定义不要在默认文件中修改),其中查找快捷键ctrl+f,退出esc,从而以此类推:
    这里写图片描述


    好用的插件:
    chineselocalization 相当于汉化包,可切换多种语言
    colorpicker 颜色选择器,安装后快捷键ctrl+alt+c
    emmet 同zen-coding

    展开全文
  • 点击button4可隐藏侧边栏,点击button1可隐藏下拉菜单 using System; using System.Windows.Forms; namespace visiable { public partial class Form1 : Form { public Form1() { InitializeComponent()...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 850
精华内容 340
关键字:

隐藏侧边栏