jquery导航栏折叠菜单怎么做

今天给大家带来隐藏折叠的侧边导航栏，让我们先看效果。首先这个菜单栏可以下拉，效果如下， 超链接我没有设置，大家自行设置就好了。然后点击旁边的图标可以隐藏，再次点击可以弹出菜单栏，就是动画过度有点生硬。 来看我们代码结构目录，我采用 gk 酷 css 和图片文件都是采用相对路径， 这样不会影响到项目的开发。一个月的代码我放到 htm 二页面上了，喜欢的话直接用代码，我发不到。马云上了代码链接在简 界里，视频就到这，喜欢的话点个赞呗！

这样的导航栏怎么做？我来教会你！这是 html 代码，用于创建无序列表。下面是 css 代码，设置 d 元素宽度和高度设置网页背景色为浅灰色，去除列表上的默认样式， 设置列表向左浮动，使他们在同一行内排列。设置链接元素的默认样式，将链接元素转化为会计元素， 使其占据整个复元素的宽度。设置链接元素宽度、高度和文字颜色，文字居中对齐。设置链接元素的外编剧为五像素， 用于调整选项之间的间距，去除链接元素的下滑线。鼠标悬停或者点击链接元素时的样式，包括背景颜色为蓝色。大功告成零基础视频课程在我主页课程专栏里，快去领取学习优惠券！

哈喽，亲爱的小朋友们，大朋友们，我是菲菲。前面几节课呢，我们已经达成了这样一个相对漂亮一点的这个放是吧，这个窗体， 那么这个窗体当中，如果左侧这个地方啊，这个地方如果可以有一个导航菜单呢，就更好了对吧？那这节课我们就看看导航菜单应该怎么做好。我们打开工具箱， 找到 dx 这个 navigation and layout， 找到这个啊，那么我们这段时间讲的都是布局空间对吧？都是布局空间啊， 找到它里面有一个叫做 navigation box， ctrl 就是 navba 啊， ctrl 就这个 导航条是吧，把这个拿上来好，我们就得到了这样一个东西对不对？ 那么怎么让他去左侧呢？我们在里面找到一个叫做 dog 的属性啊，这个 dock dog 属性，一定要选择他啊，一定要一定要选择他。之后啊，你如果是选择这个的话，他叫 navigation bar group， 它是分组是吧？哎，你一定要选择把它全部选中了是吧？它如果没有边框的话，你用鼠标拖一下给它全选也行。然后找到这个 dog 属性，把它停靠在窗体的左侧， 拖动一下合适的大小就可以了。然后这个时候呢，你看一下它上面有一个小 三角形的这样一个符号，点他。然后这边有个 run designer， 就是启动设计器的意思啊， run designer 点它。我们现在里面添加几个分组，添加分组用什么呢？就用这个啊，有三个方框，框底下有个加号的，这个叫添加分组。 来看一下他是不是就是这个样子的。我们给他起个名字。 我们选中这个导航导航菜单，然后点击这个软铁餐饮奶，给他起个名字， 或者说给他设置一下这个 tax 的属性，他叫什么呢？他没有 tax 的，他叫 capture 是吧？ capture 的肃清比如说客户管理供应商管理 啊，产品管理， 销售管理，采购管理 仓库碗里 好，这个就变成这个样子了对吧？嗯，你看到的现在没有边框，这个问题我们到下节课再去解决啊。看到这边没有边框，那么点开这个菜单之后，你看里面是没有东西啊，现在没有东西，只有这些什么什么管理是吧？点开这个菜单之后，里面没有任何东西，我怎么给他去添加一些可以 点的这些东西呢？来，还是打开 ruangda 的设计管理器找到这个。客户管理刚才我们是点的这个三个方框的添加组是吧？ 好，这次我们点这个。嗯，给他添加按钮来。 是不是变成这个样子了？给他起个名字啊， 给他一个 cap 性属性。客户信息 国家设置。呃，客户他可能来自不同国家吗？是吧？比如说邮件求发，他就变成这样了对吧？有人说这样也不是很好看呢。 我们点击这个客户管理，在这个 imh 这边 找到中间一个选项卡第 x 啊。 raster images 我们只需用十六乘十六的这个就可以了啊。客户管理我们找一个人的头像一样的东西，比如说这个可以对吧？供应商管理我们也找一个差不多是人的头像的样子。 产品管理你自己挑一个自己喜欢的好吗？ 这个图标多了之后叫做眼花缭乱啊。产品管理 销售管理， 采购管理我们那个购物车 仓库管理找一个小房子，一样的， 找个小房子， 呃，这个房子三十二乘三十二，有点大是吧？我们找前面这个小的。 那么客户信息呢？这边其实也是可以去设置他的应为值也是使用十六乘十六啊。 国家有什么图标长得像国家的，我们可以来看一下。有个地球的行吧，这个吧，有个地球的邮件群发，找一个 email 这样的图标。 那就这个好了。 那这个看起来就舒服多了是吧？看起来就舒服多了。大家都有了图标了，哎，他就比较舒服啊。有人说这个没有边框，没有边框的问题，我们下 下次再解决，因为现在这个问题是什么？现在这个侧边栏，这个这个，这个导航栏，他没有办法给你缩到里面去，就是说我万一这个菜单不想要了，我不想看他，当你不想看的时候，你这边 这个内容所占据的地方只有这么多，不想看的时候，这个内容可以铺满整个窗体对吧？我们要做一个这种操作。那这样的操作像什么呢？就像这个对吧？哎，就让这个工具来。 首先你不固定工具栏的情况下，他会在这个窗体这个边际区域的上方，那么你如果点一下这个固定的话，哎，你看他把这一块给站起来了对吧？哎，把这一块给站起来了。窗体呢？跑到这个地方，他不是在窗体上方了，他是跟窗体平行的，对不对啊？就跟 属性跟姐姐方案管理器一样。那么这个东西是怎么做的呢？我们下节课再说啊。下节课再说。我们先看一下里面的这个按钮怎么去触发， 比如说客户信息，我们点他，然后呢，在这个事件里面有个叫做 link clicked， 选这个啊， link clicked 双击他，那么弹一个提示好吗？ 好，走，你客户信息是不是他就出发了啊？我们到时候要求打开一个新的客户信息的一个窗体， 然后呢，把窗体镶嵌到这个窗体里面，并且这个窗体里面的按钮也会跑到这个上面，跑到这个 等等。好吧，那个看上去就专业多了，对吧？好，这个是导航菜单，大家去拖一拖，设置设置图标。 然后呢，看看写个蛋吧，能不能，能不能别触发啊，这个就算过了。好吧，早上猜猜就算过了。好，拜拜。

其实呢，没 k t s 会有 my exist， 呃，制作了 tsp 页面里面的导航栏， 这里呢，这是创建的这个 vivo 工程，这个工程呢， my butt 在显示在服务器的了，有这样一个效果， 那在浏览器里面呢，就这样一个效果。 这里呢，这个导航来，这导航来了，我们该如何把它 c s s 的样式啦，写得比较美观一点。 画面，这里呢，这是一个扫手框，然后这个打开应该如何来？这扫手框呢？显示出来这个导航来了， 是有多个了。盒子切透而成， 这个地位呢，是背面的最大的一个盒子。这里结束了，这个大盒子里面呢，又切透了三个小盒子，两边是导航来的扁叶盒子。 总结呢，这是切到的左右两个核磁。这个地位呢，就切到在这个大盒子里面左边叶的这个小位呢， 这是这个盒子的配件。图片配件，嗯，浏览器里面呢，就是这个图片。 背景图片，这是一个小盒子，这个小盒子呢，就 只有二十像素宽。那现在呢，如果把正面这个右边也这个盒子呢？ 这是用了背景颜色，嗯，把这个背景颜色了，那这个小盒子在什么地方了？这里我也想把这个 顶部这个图片来 get 一下，把这个图片概括一下， get 完成了， mark 点 p n g 补锤刷新 啊，这个顶部这个图片呢，改坏了，现在就是呢，要把这个别野盒子的背景颜色呢改成这个和这个右左别野的盒子呢一样。 接下来要把这个这页面中的对应的代码拉批走正确 to be 的盒子是哪一个盒子呢？ 这是少数跨 烧乳矿，这个烧乳矿来里面有点醋， 这个 floors lead， 这后面又有一个 floors right， 不用，这个 floors right 是另一个的，那像一个方向。 sets up 以后，这是左互动啊，这是右互动啊， 我又给一盒子了，小盒子了，给一盒子了，是哪一个了？是这个 dv， 这个电源的快，是二十像素，收入框的快，是二倍像素。 现在呢，我们不用这个背景颜色，把它改成了背景图片， 一张背景图片，那左边和这个背景图片呢？一样， 这，这是做作品。一个盒子，这是背景图片的 background， the image 图形，然后把它复制， 复制了以后啦， 快，而且在这个地方再贴， 再点到这里，然后勾出来刷一下。好了，现在呢，就是 左右边的两个小盒子了，带一点图片的呀，现在就看这个扫手框，扫手框了，在页面上走一下 搜索框是哪一个 dna 啦，这个， 这点快，是日本限速。 flows 是 呃，左浮动，因为把它改成了右浮动，右浮动， right， 然后它的背景颜色 baggy on the color purple。 那把这个背景颜色呢？改成白色， 配件颜色，给一下配件颜色收入狂浪，一般用的是白色，白色在什么地方？改成白色 补裁，可以页面的我看一下。什么效果啊？现在这个。