jquery - 创建折叠的左侧导航样式列-6ren

jquery - 创建折叠的左侧导航样式列

转载作者：太空宇宙更新时间：2023-11-04 10:47:56

我正在尝试找出如何组合这种类型的 sidebar navigation使用我的 JSfiddle 中的布局.

在第一个示例中，侧边栏折叠成主要图标，我看到了这是如何完成的，但它使用的 Nav 标签并不理想，因为它的物理空间不受页面内容的影响。它在页面内容下方滑动，而不是将其推到上方以调整大小。

理想情况下，我希望将该导航放置在一个保留其自身空间的列中，并像在第二个 JSfiddle 中那样与其他行顶部对齐，根据打开或折叠相应地向右调整行和列的大小它的状态。

或者是否有更简单的方法来实现这一点，完全省去 Nav 标签？

我喜欢的侧边栏功能:

HTML:

<body>

<div class="row">
<div class="col-md-12" style="height:60px;">
Header Area

</div>
</div>

<div class="row">

<div class="col-md-1">
    <nav class='sidebar sidebar-menu-collapsed'> <a href='#' id='justify-icon'>
        <span class='glyphicon glyphicon-align-justify'></span>
      </a>

        <ul class='level1'>
            <li class='active'> <a class='expandable' href='#' title='Dashboard'>
            <span class='glyphicon glyphicon-home collapsed-element'></span>
            <span class='expanded-element'>Dashboard</span>
          </a>

                <ul class='level2'>
                    <li> <a href='#' title='Traffic'>Traffic</a>

                    </li>
                    <li> <a href='#' title='Conversion rate'>Conversion rate</a>

                    </li>
                    <li> <a href='#' title='Purchases'>Purchases</a>

                    </li>
                </ul>
            </li>
            <li> <a class='expandable' href='#' title='APIs'>
            <span class='glyphicon glyphicon-wrench collapsed-element'></span>
            <span class='expanded-element'>APIs</span>
          </a>

            </li>
            <li> <a class='expandable' href='#' title='Settings'>
            <span class='glyphicon glyphicon-cog collapsed-element'></span>
            <span class='expanded-element'>Settings</span>
          </a>

            </li>
            <li> <a class='expandable' href='#' title='Account'>
            <span class='glyphicon glyphicon-user collapsed-element'></span>
            <span class='expanded-element'>Account</span>
          </a>

            </li>
        </ul> <a href='#' id='logout-icon' title='Logout'>
        <span class='glyphicon glyphicon-off'></span>
      </a>

    </nav>
    </div>

    <div class="col-md-11">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    </div>
    </div>
</body>

Javascript:

(function () {
    $(function () {
        var SideBAR;
        SideBAR = (function () {
            function SideBAR() {}

            SideBAR.prototype.expandMyMenu = function () {
                return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
            };

            SideBAR.prototype.collapseMyMenu = function () {
                return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
            };

            SideBAR.prototype.showMenuTexts = function () {
                return $("nav.sidebar ul a span.expanded-element").show();
            };

            SideBAR.prototype.hideMenuTexts = function () {
                return $("nav.sidebar ul a span.expanded-element").hide();
            };

            SideBAR.prototype.showActiveSubMenu = function () {
                $("li.active ul.level2").show();
                return $("li.active a.expandable").css({
                    width: "100%"
                });
            };

            SideBAR.prototype.hideActiveSubMenu = function () {
                return $("li.active ul.level2").hide();
            };

            SideBAR.prototype.adjustPaddingOnExpand = function () {
                $("ul.level1 li a.expandable").css({
                    padding: "1px 4px 4px 0px"
                });
                return $("ul.level1 li.active a.expandable").css({
                    padding: "1px 4px 4px 4px"
                });
            };

            SideBAR.prototype.resetOriginalPaddingOnCollapse = function () {
                $("ul.nbs-level1 li a.expandable").css({
                    padding: "4px 4px 4px 0px"
                });
                return $("ul.level1 li.active a.expandable").css({
                    padding: "4px"
                });
            };

            SideBAR.prototype.ignite = function () {
                return (function (instance) {
                    return $("#justify-icon").click(function (e) {
                        if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
                            instance.adjustPaddingOnExpand();
                            instance.expandMyMenu();
                            instance.showMenuTexts();
                            instance.showActiveSubMenu();
                            $(this).css({
                                color: "#000"
                            });
                        } else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
                            instance.resetOriginalPaddingOnCollapse();
                            instance.collapseMyMenu();
                            instance.hideMenuTexts();
                            instance.hideActiveSubMenu();
                            $(this).css({
                                color: "#FFF"
                            });
                        }
                        return false;
                    });
                })(this);
            };

            return SideBAR;

        })();
        return (new SideBAR).ignite();
    });

}).call(this);

CSS-

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
 body {
    background: none repeat scroll 0 0 white;
}
nav.sidebar-menu-collapsed {
    width: 44px;
}
nav.sidebar-menu-expanded {
    width: auto;
}
nav.sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background: none repeat scroll 0 0 #0099ff;
    color: white;
    padding: 20px 10px;
}
nav.sidebar a#justify-icon {
    outline: 0;
    color: white;
    font-size: 24px;
    font-style: normal;
}
nav.sidebar a#logout-icon {
    outline: 0;
    color: white;
    font-size: 24px;
    font-style: normal;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
nav.sidebar ul.level1 {
    margin: 0;
    padding: 0;
    margin-top: 60px;
}
nav.sidebar ul.level1 li {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    list-style-type: none;
}
nav.sidebar ul.level1 li a.expandable {
    outline: 0;
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    color: white;
    text-decoration: none;
    text-align: left;
    padding: 4px 4px 4px 0px;
    font-size: 20px;
}
nav.sidebar ul.level1 li a.expandable:hover {
    color: #bbbbbb;
}
nav.sidebar ul.level1 li a.expandable span.expanded-element {
    display: none;
    font-size: 11px;
    position: relative;
    bottom: 5px;
}
nav.sidebar ul.level1 li.active {
    margin-left: -4px;
}
nav.sidebar ul.level1 li.active a.expandable {
    background: none repeat scroll 0 0 black;
    border-radius: 4px;
    color: white !important;
    width: 30px;
    padding: 4px;
}
nav.sidebar ul.level1 li.active a.expandable:hover {
    color: white !important;
}
nav.sidebar ul.level1 ul.level2 {
    margin: 20px 6px 20px 30px;
    padding: 0;
    display: none;
}
nav.sidebar ul.level1 ul.level2 li {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    border-bottom: solid white 1px;
}
nav.sidebar ul.level1 ul.level2 li:last-child {
    border-bottom: none;
}
nav.sidebar ul.level1 ul.level2 li a {
    text-decoration: none;
    outline: 0;
    color: white;
    text-decoration: none;
    font-size: 11px;
}

所需的布局:

<div class="row" style="height:60px; margin-bottom:10px;">
    <div class="well">
        Header area
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="well">
            <span class="glyphicon glyphicon-menu-hamburger pull-right" ></span>
            <br/>
            <span class="glyphicon glyphicon-home"></span> &nbsp;&nbsp;Home
            <br/>
            <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;&nbsp;Thumbs Up
            <br/>
            <span class="glyphicon glyphicon-picture"></span> &nbsp;&nbsp;Picture
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>
        </div>
    </div>
</div>

最佳答案

那么，是这样的吗？

(function () {
    $(function () {
        var SideBAR;
        SideBAR = (function () {
            function SideBAR() {}

            SideBAR.prototype.expandMyMenu = function () {
                return $(".sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
            };

            SideBAR.prototype.collapseMyMenu = function () {
                return $(".sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
            };

            SideBAR.prototype.showMenuTexts = function () {
                return $(".sidebar ul a span.expanded-element").show();
            };

            SideBAR.prototype.hideMenuTexts = function () {
                return $(".sidebar ul a span.expanded-element").hide();
            };

            SideBAR.prototype.showActiveSubMenu = function () {
                $("li.active ul.level2").show();
                return $("li.active a.expandable").css({
                    width: "100%"
                });
            };

            SideBAR.prototype.hideActiveSubMenu = function () {
                return $("li.active ul.level2").hide();
            };

            SideBAR.prototype.adjustPaddingOnExpand = function () {
                $("ul.level1 li a.expandable").css({
                    padding: "1px 4px 4px 0px"
                });
                return $("ul.level1 li.active a.expandable").css({
                    padding: "1px 4px 4px 4px"
                });
            };

            SideBAR.prototype.resetOriginalPaddingOnCollapse = function () {
                $("ul.nbs-level1 li a.expandable").css({
                    padding: "4px 4px 4px 0px"
                });
                return $("ul.level1 li.active a.expandable").css({
                    padding: "4px"
                });
            };

            SideBAR.prototype.ignite = function () {
                return (function (instance) {
                    return $("#justify-icon").click(function (e) {
                        if ($(this).parent(".sidebar").hasClass("sidebar-menu-collapsed")) {
                            instance.adjustPaddingOnExpand();
                            instance.expandMyMenu();
                            instance.showMenuTexts();
                            instance.showActiveSubMenu();
                            $(this).css({
                                color: "#000"
                            });
                        } else if ($(this).parent(".sidebar").hasClass("sidebar-menu-expanded")) {
                            instance.resetOriginalPaddingOnCollapse();
                            instance.collapseMyMenu();
                            instance.hideMenuTexts();
                            instance.hideActiveSubMenu();
                            $(this).css({
                                color: "#FFF"
                            });
                        }
                        return false;
                    });
                })(this);
            };

            return SideBAR;

        })();
        return (new SideBAR).ignite();
    });

}).call(this);

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");

body {
    background: none repeat scroll 0 0 white;
}

nav.sidebar-menu-collapsed {
    width: 44px;
}
nav.sidebar-menu-expanded {
    width: auto;
}
nav.sidebar {
    background: none repeat scroll 0 0 #0099ff;
    color: white;
    padding: 20px 10px;
}
nav.sidebar a#justify-icon {
    outline: 0;
    color: white;
    font-size: 24px;
    font-style: normal;
}
nav.sidebar a#logout-icon {
    outline: 0;
    color: white;
    font-size: 24px;
    font-style: normal;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
nav.sidebar ul.level1 {
    margin: 0;
    padding: 0;
    margin-top: 60px;
}
nav.sidebar ul.level1 li {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    list-style-type: none;
}
nav.sidebar ul.level1 li a.expandable {
    outline: 0;
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    color: white;
    text-decoration: none;
    text-align: left;
    padding: 4px 4px 4px 0px;
    font-size: 20px;
}
nav.sidebar ul.level1 li a.expandable:hover {
    color: #bbbbbb;
}
nav.sidebar ul.level1 li a.expandable span.expanded-element {
    display: none;
    font-size: 11px;
    position: relative;
    bottom: 5px;
}
nav.sidebar ul.level1 li.active {
    margin-left: -4px;
}
nav.sidebar ul.level1 li.active a.expandable {
    background: none repeat scroll 0 0 black;
    border-radius: 4px;
    color: white !important;
    width: 30px;
    padding: 4px;
}
nav.sidebar ul.level1 li.active a.expandable:hover {
    color: white !important;
}
nav.sidebar ul.level1 ul.level2 {
    margin: 20px 6px 20px 30px;
    padding: 0;
    display: none;
}
nav.sidebar ul.level1 ul.level2 li {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    border-bottom: solid white 1px;
}
nav.sidebar ul.level1 ul.level2 li:last-child {
    border-bottom: none;
}
nav.sidebar ul.level1 ul.level2 li a {
    text-decoration: none;
    outline: 0;
    color: white;
    text-decoration: none;
    font-size: 11px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row" style="height:60px; margin-bottom:10px;">
	<div class="well">
		Header area
	</div>
</div>

<div class="row">
	<nav class="sidebar sidebar-menu-collapsed">
		<a href="#" id="justify-icon" style="color: rgb(255, 255, 255);">
			<span class="glyphicon glyphicon-align-justify"></span>
		</a>
		<ul class="level1">
            <li class="active">
				<a class="expandable" href="#" title="Dashboard" style="padding: 4px; width: 100%;">
					<span class="glyphicon glyphicon-home collapsed-element"></span>
					<span class="expanded-element" style="display: none;">Dashboard</span>
				</a>
            </li>
            <li>
				<a class="expandable" href="#" title="APIs" style="padding: 1px 4px 4px 0px;">
					<span class="glyphicon glyphicon-thumbs-up collapsed-element"></span>
					<span class="expanded-element" style="display: none;">Thumbs Up</span>
				</a>
            </li>
            <li>
				<a class="expandable" href="#" title="Settings" style="padding: 1px 4px 4px 0px;">
					<span class="glyphicon glyphicon-picture collapsed-element"></span>
					<span class="expanded-element" style="display: none;">Picture</span>
				</a>
            </li>
        </ul> 
		<a href="#" id="logout-icon" title="Logout">
			<span class="glyphicon glyphicon-off"></span>
		</a>
    </nav>
	<div class="col-md-8">
		<div class="row">
			<div class="col-md-12">
				<div class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
			</div>
		</div>
	</div>
</div>
<style>
  html, body { margin: 0; min-height: 100%; min-width: 100%; padding: 0; }
  .row { margin: 0; width: 100%; }
  .row .row { width: auto; }
  .row nav { position: relative; }
  .row nav, .row nav ~ div { display: table-cell; }
</style>

关于jquery - 创建折叠的左侧导航样式列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35228291/

文章推荐： python - 在 wx.python 中使顶部窗口不可访问

文章推荐： c - 利布夫 : SO_REUSEPORT issue in Linux

文章推荐： python - 将按钮释放视为键盘中断 tkinter

文章推荐： javascript - nvd3 "line plus bar chart"示例未显示

css - 左侧、右侧和底部的阴影
我正在使用这段代码: border-right:0px solid #ddd; height:85px; box-shadow :5px 5px 10px 1px #eaeaea; 但我刚刚得到
html - 对齐图像旁边的文本(左侧)
我遇到的问题是将文本放在图像的左侧... HTML 和 CSS h2, social-hand { font-family: 'PT Sans', sans-serif; display: i
css - 文本未对齐居中，左侧
美好的一天我今天的 CSS 很糟糕。我有 3 列 div(水平，这就是我使用 float 的原因)，但我想将我的文本居中对齐，但在包含列 div 的左侧。 HTML:
android - 如何在android中裁剪imageview的顶部、左侧、右侧和底部
在我的应用程序中，我在截取屏幕截图时在我的 Imageview 中获得了透明像素。如何剪切顶部、左侧、右侧和 Imageview 的底部。我尝试了下面的代码但没有工作 Bitmap bitmap =
android - 左侧 LinearLayout 内部的边框
如何在左侧的以下 LinearLayout 内部添加边框，使其宽度为 5dp 并适合 LinearLayout 的整个高度？ LinearLayout 的高度是动态的，这意味着有时它可以是 50dp
html - 左侧 float 的下拉菜单和导航菜单变得模糊
我是第一次做网站。我在使用下拉菜单时遇到问题。它正在向左侧移动。请帮助我处理代码，使其位于导航菜单的正下方，并且将鼠标悬停在其上时应该可见。提前致谢。这是我的 CSS 代码: ul { li
html - 左侧 float 图像
我对 html 和 css 有点生疏，我无法让 2 个图像 float ，一个在另一个之上。这是代码... &nbs
html - 左侧 div 侧边栏动态向下延伸到底部
我有一个固定宽度 (px) 的左侧边栏，右侧是我的主要内容。这是我的演示:http://jsfiddle.net/fxWg7/4031/ 代码如下: 这是我的 html 代码: left co
javascript - 如何缓解 body 左侧？
所以我正在尝试做一个弹出式菜单，但我遇到了一点问题。我已经申请了: .menu-side, .menu { -webkit-transition: left 0.2s ease; -
css - 左侧 float 列表项的总宽度
在下面的 CSS @media screen and (max-width: 750px) { .flexbox { display: block; } .menu ul {
css - 尝试创建网站标题，左侧/顶部有一个小空间不会消失
@import 'https://fonts.googleapis.com/css?family=PT+Sans'; * { font-family: 'PT Sans', sans-serif
html - 将图标放在 H1 左侧
我想在我的标题旁边放一个图标。但它不合适..我怎样才能让它合适？ My heading 最佳答案使用vertical-align:middle，因此如果您更改文本或图像的大小，位
javascript - 以绝对位置居中图像(顶部，左侧)
我正在使用参数方程围绕一个圆定位图像 ( How do I calculate a point on a circle’s circumference? ) 我使用简单的数学方法以更少的方式完成此操作
css - 左侧 float 图像右侧的列表
我想使用外部列表属性将 ul 列表正确定位在左浮动 img 的右侧，但元素符号未在图像右侧对齐，因为没有任何图像，但更多在左边。 Lorem ipsum dolor sit amet, c
android - 以编程方式更改图层列表项目的顶部/右侧/底部/左侧
我有一个layer-list.xml 现在我想在运行时更改 (top,right) 等项目的
emacs - 如何在每次打开 Emacs 时启用行号(左侧)？
我通过按:M-x linum-mode 来启用它们。如何将其“翻译”到 my.emacs 文件中，以便每次打开 EMACS 时自动启用它？最佳答案如果您希望每个缓冲区都使用它，请将 (global
jquery - 无法手动更改可拖动 div 的顶部/左侧？
我的Code : HTML 1 2 3 CSS #score { height:50px; } .myDiv { width:40px; height:40px;
javascript - HTML5 Canvas 设置顶部/左侧
我可以轻松设置 canvas.width 和 canvas.height 属性。我找不到正确的 JavaScript 语法来使用顶部和左侧设置 Canvas 的偏移量。我尝试过直接在 Canvas 上
C# 循环扫描二维数组的顶部、底部、左侧、右侧元素
我正在尝试为我正在编写的单人纸牌游戏完成条件游戏。我把所有的 Action 和棋子都移除了。每一 block 都作为椭圆 UI 元素保存在一个二维数组中，当一 block 被拿走时，它会被替换为边框
android导航 View 菜单项之前(左侧)的空白空间
我正在使用导航 View 修改 Android 应用程序。对于前几个菜单项，我给出了一个图标，但之后，我只给出了菜单标题。但是在导航面板中，没有图标的菜单项有一个空白区域。如何删除空白区域？我希望菜

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 创建折叠的左侧导航样式列