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"示例未显示

mysql - SUM(COUNT(列)*AVG(列)) AS 列
我正在 csv 上使用 hadoop 来分析一些数据。我使用sql/mysql(不确定)来分析数据，现在陷入了僵局。我花了好几个小时在谷歌上搜索，却没有找到任何相关的东西。我需要一个查询，在该查询中
html - BOOTSTRAP 网格 | 4 列 > 2 列 > 1 列
我正在为 Bootstrap 网格布局的“简单”任务而苦苦挣扎。我希望在大视口(viewport)上有 4 列，然后在中型设备上有 2 列，最后在较小的设备上只有 1 列。当我测试我的代码片段时，似
mysql - 仅选择具有重复(A 列 || B 列)但不同(C 列)值的记录
对于这个令人困惑的标题，我深表歉意，我想不出这个问题的正确措辞。相反，我只会给你背景信息和目标: 这是在一个表中，一个人可能有也可能没有多行数据，这些行可能包含相同的 activity_id 值，也可
sequelize.js - 如何使用 Sequelize 结果查找 A 列 > B 列 + C 列
具有 3 列的数据库表 - A int , B int , C int 我的问题是: 如何使用 Sequelize 结果找到 A > B + C const countTasks = await Ta
MySQL 选择 DISTINCT 列 1、列 2From 表 order by 列 2 DESC
我在通过以下功能编写此查询时遇到问题: 首先按第 2 列 DESC 排序，然后从“不同的第 1 列”中选择只有 Column1 是 DISTINCT 此查询没有帮助，因为它首先从第 1 列中进行选择
css - 使用 bootstrap，台式机中有 4 列，平板电脑中有 2 列，移动设备中有 1 列
使用 Bootstrap 非常有趣和有帮助，目前我在创建以下需求时遇到问题。 “使用 bootstrap 在桌面上有 4 列，在平板电脑上有 2 列，在移动设备上有 1 列”谁能告诉我正确的结构最佳
r - 比较第 1 列(第 1 列)中的连续值并使用第 1 列后比较结果创建新列(第 2 列)
我是 R 新手，正在问一个非常基本的问题。当然，我在尝试从所提供的示例中获取指导的同时做了功课here和 here ，但无法在我的案例中实现这个想法，即可能是由于我的问题中的比较维度更大。我的实
python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
python - 当第 1 列 > 0 且第 2 列 <= 0 时，如何将第 1 列的值分配给第 2 列
我有一个 df , delta1 delta2 0 -1 2 0 -1 0 0 0 我想知道如何分配 delt
MySQL 加入 ON 列 a IN(列 b)
您好，我想知道是否可以执行以下操作。显然，我已经尝试在 phpMyAdmin 中运行它，但出现错误。也许还有另一种方式来编写此查询。 SELECT * FROM eat_eat_restaurants
python - 如何将 listA 列 1 值匹配并替换为与 ListB 列 1 匹配的 ListB 列 2 值，就像我们在 vlookup 中所做的那样
我有 2 个列表(标题和数据值)。我想要将数据值列 1 匹配并替换为头文件列 1，以获得与 dataValue 列 1 和标题值列 2 匹配的值头文件 TotalLoad,M0001001 Hois
linux - 如果 file1 的 B 列 = file2 的 B 列，则将 file1 的 A 列替换为 file2 的 A 列
我有两个不同长度的文件，file2 是一个很大的引用文件，我从中提取文件 1 的数据。我有一行 awk，我通常会对其进行调整以在我的文件中进行查找和替换，但它总是在同一列中进行查找和替换。所以对于
sql - 检查一个表(列)中的日期是否适合另一个表(列)中的另一个日期
假设我有两个表，如下所示。 create table contract( c_ID number(1) primary key, c_name varchar2(50) not
java - 无法将减号插入具有检查约束的 varchar 列(列 <> '')
我有一个带有 varchar 列的 H2 表，其检查约束定义如下: CONSTRAINT my_constraint CHECK (varchar_field <> '') 以下插入语句失败，但当我删
CSS 3 列，为什么第三列接管了其他 2 列？
这是最少量的代码，可以清楚地说明我的问题: One Two Three 前 2 个 div 应该是 2 个左列。第三个应该占据页面的其余部分。最后，我将添加选项来隐藏和
azure - 该查询未返回 TimeGenerate 列。请编辑查询并包含 TimeGenerate 列
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
azure - 该查询未返回 TimeGenerate 列。请编辑查询并包含 TimeGenerate 列
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
java - 为什么 [列,行] 而不是 [行,列]
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
C# 显示数据库的 2 列，共有 28 列
我有一个包含 28 列的数据库。第一列是代码，第二列是名称，其余是值。 public void displayData() { con.Open(); MySqlDataAdapter
html - 我的网页是 2 列，但在放大时重叠成 1 列？
我很沮丧:每当我缩小这个网页时，一切都变得一团糟。我如何将网页居中，以便我可以缩小并且元素不会被错误定位。 (它应该是 2 列，但所有内容都合并为 1)我试过但由于某种原因，这不起作用。 www.o

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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