JavaScript 温故：制作一个sidebar

waruqi 发布于2019-08-20 13:49 / 1131人阅读

摘要：是一种常用类型的导航组件，它可从页面旁侧弹出，覆盖在正常内容上。其内有链接到和。

sidebar是一种常用类型的导航组件，它可从页面旁侧弹出，覆盖在正常内容上。

假设你的正常内容为：

    
         Placeholder
         Placeholder

         Placeholder

现在我们可以在内容内加入sidebar。其内有链接到Home和About。并加入一个按钮，可以打开sidebar，代码如下：

Placeholder

要点在于：

默认情况下，sidebar是一个div内置任何html，且width为0，因此不可见

当需要使用sidebar时，可以使用函数设置其width为一个宽度，因此它变得可见

虽然它变得可见，但是因为z-index为1，因此不会引发主要内容的重新渲染和计算新的位置，而是覆盖其上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81255.html

JavaScript温故：制作一个backtotop按钮

摘要：按钮可以在内容滚动时，给用户一个返回顶部的方便。制作一个按钮的关键是告诉浏览器此元素相对于浏览器固定，而不随着内容的滚动而滚动。代码达到此效果的方式是使用的特性而属性组合告诉浏览器，固定此元素在相对于右下角的，位置处。 backtotop按钮可以在内容滚动时，给用户一个返回顶部的方便。制作一个backtotop按钮的关键是告诉浏览器此元素相对于浏览器固定，而不随着内容的滚动而滚动。代码...

sunnyxd 2019-08-20 13:51 评论0 收藏0
Vue自定义全局组件制作方法

摘要：查阅资料后发现，自定义的组件需要提供一个方法提供可选的组件名像这样引入自己编写好的组件，然后创建一个对象，并包含一个方法，并使用方法注册成全局组件，最后导出这个对象。今天解决了一个长期困扰着我的问题，现在记录一下，供日后参考。涉及知识点是Vue.js官网教程中的插件使用首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用，而我之前的解决方法就是简单的，哪里需要在...

qylost 2019-08-21 17:56 评论0 收藏0
CSS Sprite雪碧图的应用

摘要：雪碧图的使用场景静态图片，不随用户信息的变化而变化。使用使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。以上面的雪碧图为例实际雪碧图中各个小图片的起始位置和上面的展示图不同用一个来阐述它的使用方法。 CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 s...

verano 2019-08-02 11:51 评论0 收藏0
CSS Sprite雪碧图的应用

摘要：雪碧图的使用场景静态图片，不随用户信息的变化而变化。使用使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。以上面的雪碧图为例实际雪碧图中各个小图片的起始位置和上面的展示图不同用一个来阐述它的使用方法。 CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 s...

Galence 2019-08-29 17:07 评论0 收藏0
css实现左侧宽度自适应，右侧固定宽度

摘要：页面布局中经常用会遇到左侧宽度自适应，右侧固定宽度，或者左侧宽度固定，右侧自适应。一般固定宽度是导航栏，自适应宽度的是主体内容显示区。页面布局中经常用会遇到左侧宽度自适应，右侧固定宽度，或者左侧宽度固定，右侧自适应。总之就是一边固定宽度，一边自适应宽度。一般固定宽度是导航栏，自适应宽度的是主体内容显示区。所以要实现这种布局，就先给出如下html结构：导航区域 ...

Sunxb 2019-08-30 15:52 评论0 收藏0