精华内容
下载资源
问答
  • div+css侧边栏怎么写网页中侧边栏是很常用的功能,尤其是移动端的使用,更是很频繁,今天就来介绍一下如何使用div+css实现侧边栏效果。实现思路如下:1、使用input和label标签,将input隐藏,用css美化label标签...

    152c3df3e3eeb16259ec325fdef01787.png

    div+css侧边栏怎么写

    网页中侧边栏是很常用的功能,尤其是移动端的使用,更是很频繁,今天就来介绍一下如何使用纯div+css实现侧边栏效果。

    实现思路如下:

    1、使用input和label标签,将input隐藏,用css美化label标签实现打开关闭侧边栏按钮。

    2、当input选中时使用伪类选择器:checked选择它的兄弟元素aside将它显示出来即可。

    (相关课程推荐:css视频教程)

    /*隐藏checked复选框*/

    #sidemenu{

    display: none;

    }

    #sidemenu:checked + aside {

    /*为被选中的sidemenu后的aside设置属性(紧邻)*/

    left: 0;

    /*点击按钮即选中checked后,侧边栏位置变为贴着左边,

    配合ease-out使用,有渐变滑出的效果*/

    }

    #sidemenu:checked ~ #wrap {

    /*为被选中的sidemenu后的wrap设置属性(非紧邻)*/

    padding-left: 220px;

    }

    aside {

    /*侧边栏,初始位置为-200px,即隐藏效果*/

    position: absolute;

    top: 0;

    bottom: 0;

    left: -200px;

    width: 200px;

    background: black;

    transition: 0.2s ease-out;

    /*动画效果的执行方式是ease-out,即侧边栏滑动效果为渐变式,

    而不是生硬的突然变化*/

    }

    h2 {

    color: white;

    text-align: center;

    font-size: 2em;

    }

    /*控制侧边栏进出的按钮(外部包裹)*/

    #wrap {

    margin-left: 20px;

    padding: 10px;

    transition: 0.2s ease-out;

    }

    /*控制侧边栏进出的按钮(内部文字样式)*/

    label {

    /*控制侧边栏进出的按钮*/

    background: white;

    border-radius: 70px;

    color: orange;

    cursor: pointer;

    display: block;

    font-family: Courier New;

    font-size: 2em;

    width: 1.5em;

    height: 1.5em;

    line-height: 1.5em;

    text-align: center;

    display: inline-block;

    }

    label:hover {

    background: #000;

    }

    #sideul li {

    list-style: none;

    color: white;

    width: 100%;

    height: 1.8em;

    font-size: 1.5em;

    text-align: center;

    }

    a {

    text-decoration: none;

    }

    #sideul li:hover {

    color: orange;

    }

    主菜单

    首页

    导航1

    导航2

    导航3

    导航4

    导航5

    导航6ʳ

    效果:

    cb56f81ffb28d0197da5c19488c3633d.png

    37781dbb848acc3532dde2188617c2a5.png

    本文来自css答疑栏目,欢迎学习!

    展开全文
  • 侧边栏菜单 纯css

    2017-07-03 15:42:03
    纯css侧边栏菜单
  • 纯css实现炫酷侧边栏

    千次阅读 2020-02-07 00:45:00
    纯css实现炫酷侧边栏 效果展示 网页展示(pc端更佳):http://www.coolxiang.top/siderbar/ GIF动图效果: html结构 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF...

    纯css实现炫酷侧边栏

    有疑问的小伙伴可以深入探讨学习😘

    效果展示

    网页展示(pc端更佳):http://www.coolxiang.top/siderbar/
    GIF动图效果:
    在这里插入图片描述

    html结构

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    	<meta charset="UTF-8">
    	<title>侧边栏</title>
    	<link rel="stylesheet" type="text/css" href="./css/siderbar.css">
    	<link href="./css/font-awesome.min.css" rel="stylesheet">  
    </head>
    <body>
    	<input type="checkbox" id="check">
    	<label for="check">
    		<i class="fa fa-bars" aria-hidden="true" id="show"></i>
    		<i class="fa fa-times" aria-hidden="true" id="cancel"></i>
    	</label>
    	<div class="siderbar">
    		<header>
    			<h1>My App</h1>
    		</header>
    		<ul>
    			<li><a href="#"><i class="fa fa-paper-plane"></i>公司简介</a></li>
    			<li><a href="#"><i class="fa fa-paper-plane"></i>公司简介</a></li>
    			<li><a href="#"><i class="fa fa-paper-plane"></i>公司简介</a></li>
    			<li><a href="#"><i class="fa fa-paper-plane"></i>公司简介</a></li>
    			<li><a href="#"><i class="fa fa-paper-plane"></i>公司简介</a></li>
    			<li><a href="#"><i class="fa fa-paper-plane"></i>公司简介</a></li>
    		</ul>
    	</div>
    	<section>
    		<div class="main">
    			<ul>
    				<li>
    					<h3>公司名称</h3>
    				</li>
    			</ul>
    		</div>
    	</section>
    </body>
    </html>
    

    css

    html,
    ul,
    body {
    	padding: 0;
    	margin: 0;
    }
    ul {
    	list-style: none;
    }
    
    .siderbar {
    	position: fixed;
    	width: 250px;
    	height: 100%;
    	top: 0;
    	left: -250px;
    	background-color: #042331;
    	transition: all 0.5s;
    	z-index: 998;
    }
    
    .siderbar h1 {
    	margin: 0;
    	width: 100%;
    	height: 100px;
    	line-height: 100px;
    	text-align: center;
    	user-select: none;
    	font-size: 30px;
    	color: #fff;
    	background-color: #063146;
    	border-bottom: 1px solid black;
    }
    .siderbar ul {
    	overflow: hidden;
    }
    .siderbar ul a {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	width: 100%;
    	height: 80px;
    	box-sizing: border-box;
    	border-top: 1px solid rgba(255, 255, 255, .1);
    	border-bottom: 1px solid black;
    	color: #aaa;
    	text-decoration: none;
    	font-size: 18px;
    	transition: all 0.5s;
    }
    .siderbar li a i {
    	margin-right: 20px;
    }
    .siderbar ul a:hover {
    	margin-left: 10px;
    	color: #eee;
    }
    #check {
    	display: none;
    }
    #show {
    	background-color: #063146;
    	color: #aaa;
    	width: 20px;
    	height: 20px;
    	border-radius: 5px;
    	text-align: center;
    	padding: 5px;
    	position: fixed;
    	top: 20px;
    	left: 20px;
    	transition: all 0.5s;
    	cursor: pointer;
    	z-index: 997;
    }
    #cancel {
    	background-color: #042331;
    	color: #aaa;
    	width: 20px;
    	height: 20px;
    	border-radius: 5px;
    	text-align: center;
    	padding: 2px;
    	position: fixed;
    	top: 43px;
    	left: -40px;
    	z-index: 999;
    	cursor: pointer;
    	transition: all 0.5s;
    }
    #show:hover,
    #cancel:hover {
    	color: #eee;
    }
    #show::before,
    #cancel::before {
    	line-height: 20px;
    }
    #check:checked ~ .siderbar {
    	left: 0px;
    }
    #check:checked ~ label #cancel {
    	left: 210px;
    }
    section {
    	background: url('../img/background.jpg') repeat center;
    	-webkit-background-size: cover;
    	background-size: cover;
    	z-index: 1;
    	transition: all 0.5s;
    	height: 100vh;
    	padding: 5% 10%;
    	box-sizing: border-box;
    }
    #check:checked ~ section {
    	margin-left: 250px;
    }
    .main {
    	background-color: rgba(1, 1, 1, .6);
    	height: 100%;
    	padding: 20px 50px;
    	border-radius: 20px;
    	box-sizing: border-box;
    	overflow: auto;
    	-ms-overflow-style: none;
    }
    .main h3 {
    	color: #fff;
    }
    .main::-webkit-scrollbar {
    	display: none;
    }
    
    展开全文
  • 这是一款使用纯CSS3制作的抽屉式滑动侧边栏菜单设计效果。该侧边栏在鼠标滑过菜单项时,会以平滑的方式滑出相应的主菜单,就像拉开抽屉的效果,非常的时尚。
  • 纯CSS实现侧边栏/分栏高度自动相等. 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:...

    纯CSS实现侧边栏/分栏高度自动相等.

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定):

    margin-bottom:-3000px; padding-bottom:3000px;

    再配合父标签的overflow:hidden 属性即可实现高度自动相等的效果。

    举个简单的实例吧,如下CSS及HTML代码:

    #content{overflow:hidden;}
    .left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
    .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
    .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}
    <div id="content">
        <div class="left">左边,无高度属性,自适应于最高一栏的高度</div>
        <div class="right">右边,无高度属性,自适应于最高一栏的高度</div>
        <div class="center">中间,高度600像素,左右两栏的高度与之自适应</div>
    </div>
    展开全文
  • bootstrap4侧边栏Making high performant, pure CSS sticky sidebars ... 制作与Bootstrap 4堆叠在一起的高性能,纯CSS粘性侧边栏。 This will be a quick and pretty cool tutorial on a neat trick on how to ...

    bootstrap4侧边栏

    Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4.

    制作与Bootstrap 4堆叠在一起的高性能,纯CSS粘性侧边栏。

    This will be a quick and pretty cool tutorial on a neat trick on how to have multiple sticky sidebars that stack without using any JavaScript!

    这将是一个快速而又很酷的教程,它巧妙地介绍了如何在不使用任何JavaScript的情况下堆叠多个粘性侧边栏

    I figured this out the other day brain storming ideas with @chrisoncode for the new Scotch website sidebar. As fun and cool as JavaScript is, it's just not as snappy and way more bloated than say a pure CSS implementation of stuff like this (which is one of our main goals for our Scotch.io redesign).

    几天前 ,我通过@chrisoncode为新的Scotch网站侧边栏想出了一些令人费解的想法。 作为乐趣和凉爽如JavaScript是,它只是没有那么活泼方式比说像这样的纯CSS实现的东西(这是我们为我们的主要目标之一更加臃肿 Scotch.io重新设计)。

    In this tutorial I will discuss:

    在本教程中,我将讨论:

    • What the heck I mean by this mouthful: "Multiple Stacking Sticky Sidebars.

      我这口是什么意思:“多重堆叠的粘性侧边栏
    • Reasons that you would want to do this.

      您想要这样做的原因。
    • General beefs devs have with doing it with JavaScript or plugins.

      一般的牛肉开发人员都可以使用JavaScript或插件来完成此任务。
    • The technique with CSS3 (position: sticky).

      CSS3( position: sticky )的技术。
    • That same technique with a simple trick I figured out to make it stackable with pure CSS.

      我想出了一种简单的技巧就可以使它与纯CSS堆叠在一起。
    • Bunch of Bootstrap 4 Demos with Dead-Simple Sticky Sidebars

      一堆带有死区简单粘性侧边栏的Bootstrap 4演示

    I'll also have many code samples and demos throughout this post. Then some simple demos / templates to show you how easy it is with Bootstrap 4.

    在这篇文章中,我还将有许多代码示例和演示。 然后是一些简单的演示/模板,向您展示Bootstrap 4的简易性。

    It's so easy, in a lot of ways I am scared to publish this post because of the abuse of the design pattern by websites. You'll see more as you scroll and read below, but let's just roll with the future punches and begin.

    这是如此简单,由于网站滥用了设计模式,我很害怕以多种方式发表这篇文章。 滚动阅读下面的内容时,您会看到更多。但是,让我们随着将来的拳头滚动并开始吧。

    “ Multiple Stacking Sticky Sidebars”到底意味着什么? ( What the heck does "Multiple Stacking Sticky Sidebars" even mean? )

    I'm talking specifically about this design pattern where there's a single sidebar with multiple sticky content in it:

    我正在专门讨论这种设计模式,其中只有一个带有多个粘性内容的侧边栏:

    The word "multiple" regerences if we do more than one of these on page. Stacking references to the single sidebar having multiple stacking pieces.. I know that this is kind-of confusing and weird, but I couldn't find or think up a better term for the concept.

    如果我们在页面上执行多个操作,则表示“多个”单词。 对具有多个堆叠件的单个侧边栏的堆叠引用。 。 我知道这有点令人困惑和奇怪,但是我找不到或想出一个更好的概念。

    Don't worry though, we'll get to that craziness soon enough of "Multiple Stacking Sticky Sidebars"...

    不过请放心,我们会尽早解决“ Multiple Stacking Sticky Sidebars”的疯狂……

    那为什么要这样做呢? (So why do this?)

    There's a couple reason why you would probably want to do this. Just to name a few:

    您可能要这样做有两个原因。 仅举几个:

    1. It's cool, different.

      很酷,不同。
    2. Maybe make a subnav easily accessible.

      也许使subnav易于访问。
    3. You want to highlight your content in your sidebar more as a user scrolls.

      您希望在用户滚动时在侧栏中更多地突出显示您的内容。
    4. You want (have to?) increase your ad impressions, clicks, and page views.

      您想要(必须?)增加广告展示次数,点击次数和网页浏览量。

    旧方法(使用JavaScript) ( The Old Way (with JavaScript) )

    There's a ton of plugins for doing this.

    有一 插件这样做。

    You've probably even done this before with maybe Boostrap Affix. I find plugins like this ALWAYS are a pain to get working and / or make scrolling feel slower, laggier. Or, maybe something weird happens on resize.

    您甚至可能已经通过Boostrap Affix做到了这一点。 我发现像这样的插件总是让您工作很麻烦,并且/或者使滚动感觉更慢,更慢。 或者,可能在调整大小时发生了一些奇怪的事情。

    It's also pretty easy to write a small script for it yourself, but I know most people likely use plugins.

    自己编写一个小脚本也很容易,但是我知道大多数人都可能使用插件。

    JS的基本原理 (How the JS Basically Works)

    The general idea is your script or plugin will do something like this with JavaScript:

    通常的想法是您的脚本或插件将使用JavaScript执行以下操作:

    1. Calculate offset of a position: relative; element from top of window on scroll.

      计算position: relative; offset position: relative; 滚动window顶部的元素。
    2. When that element's offset is or is about 0, calculate the position (left, top, or right) of that element against the window.

      当该元素的offset为或大约为0 ,计算该元素相对于window的位置(左侧,顶部或右侧)。
    3. switch it to position: fixed; with the calculated top, left, or right.

      切换到position: fixed; 计算的顶部,左侧或右侧。
    4. Optionally, have your JS redo these calculations when it reaches the bottom of it's parent.

      (可选)让JS到达父级底部时重做这些计算。
    5. Switch it to position: absolute; and position it at bottom of the container.

      将其切换到position: absolute; 并将其放置在容器底部。

    It's not too bad of work, but it's definitely a lot to juggle even if you have a plugin trying to figure this all out for you.

    这不是很糟糕的工作,但是即使您有一个插件试图为您解决所有问题,也要花很多时间。

    通常的障碍#1:内容跳跃 (That Usual Snag #1: Content Jumping)

    I'm sure you've dealt with this before! There's always a couple bugs you hit.

    我确定您之前已经处理过! 您总是遇到几个错误。

    When you switch from position: relative; to position: fixed; the height is removed from the parent element. This means there might be a "jump" up of content.

    当您从position: relative;切换时position: relative; position: fixed; 高度将从父元素中移除。 这意味着内容可能会“跳起来”。

    Check out this quick and dirty demo of what I mean:

    查看这个快速而肮脏的演示,这是我的意思:

    通常遇到的#2:宽度100%与宽度自动 (That Usual Snag #2: Width 100% vs Width Auto)

    If the element you want to be "sticky" is currently position: relative; and responsive to the container (width: 100%) and then you swap to position: fixed, you'll get an element that is 100% of the window or at width auto depending on your CSS.

    如果您要“粘滞”的元素当前处于position: relative; 并响应容器(宽度:100%),然后交换到position: fixed ,您将获得一个元素,该元素是窗口的 100%或宽度自动(取决于CSS)。

    Here's our demo again. This time watch the width of the "sticky" element.

    这又是我们的演示。 这次注意“粘性”元素的宽度。

    Just another thing you'd have to calculate.

    您还需要计算另一件事。

    通常的障碍#3:性能下降 (That Usual Snag #3: Performance Hell)

    Finally, if you have a crazy website, with multiple sticky sidebars on a single page, that's a lot of JavaScript calculations happening on scroll. You are definitely going to nuke your user's CPU.

    最后,如果您有一个疯狂的网站,并且在一个页面上有多个粘性侧栏,则滚动时会发生很多JavaScript计算。 您肯定要核对用户的CPU。

    "I love it when I visit a webpage and my computer fan starts howling, Chrome eats all my computer RAM, and my CPU goes nuclear. Lag is cool!" - Said no one ever

    “当我访问网页时,我很喜欢它,而且我的计算机风扇开始how叫,Chrome吞噬了我所有的计算机RAM,而我的CPU却变成了核。滞后很酷!” - 没有人说过

    CSS-Tricks has a great tutorial explaining through this issue, but, to be frank and honest in my personal opinion, dealing with this "just sucks in general". There's got to be some serious good reason to be in this territory for most simple projects.

    CSS-Tricks有一个很好的教程,解释了这个问题,但是,坦率地说,以我个人的观点,处理这个“很烂”。 对于大多数简单的项目,在这个领域肯定有一些充分的理由。

    Here's a codepen showing that off, forked from Chris Coyier's Codepen in that article:

    这是在克里斯·科耶尔(Chris Coyier)的Codepen中分叉出来的一个代码笔展示了这一点:

    无需JavaScript即可使用“ Position Sticky”轻松粘贴侧边栏 ( Easy Sticky Sidebars without JavaScript using "Position Sticky" )

    This is no big secret if you've been paying attention to CSS3. You can now make any element essentially behave this way with pure CSS. It's easy.

    如果您一直关注CSS3,这并不是什么大秘密。 现在,您可以使任何元素使用纯CSS本质上都具有这种行为。 这很容易。

    You just need to have the CSS applied and at least one direction property which is usually the top:

    您只需要应用CSS和至少一个direction属性 ,通常通常是top

    .make-me-sticky  {
        position : sticky ;
        top : 0 ;
    }

    Now, all elements with the class will be "sticky to the top of the container, all the way to the bottom.

    现在,具有该类的所有元素都将“粘贴在容器的顶部,一直到底部。”

    Below are some cool demos with Bootstrap 4:

    以下是有关Bootstrap 4的一些不错的演示:

    带引导程序的基本粘性侧边栏4 (Basic Sticky Sidebar with Bootstrap 4)

    浏览器支持 (Browser Support)

    Like anything fun with CSS3 its browser support is all over the place, but honestly this one is not that bad. I'm surprised it's not used more.

    像使用CSS3任何乐趣一样,它的浏览器支持 CSS3在,但是说实话,这还不错。 我很惊讶它没有被更多使用。

    If you can afford to have IE users not have a sticky elements, it's perfect. You wouldn't have to worry about any complex fallback because it just will simply not be sticky.

    如果您可以负担得起IE用户没有粘性的元素,那将是完美的选择。 您不必担心任何复杂的后备,因为它根本不会很粘。

    /* Cross-Browser Support */
    .make-me-sticky {
        position: relative; /* I am the fallback */
    
        /* Give it everything you got! (use an auto prefixer...) */
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
    
        top: 0; /* Required  */
    }

    不使用JavaScript堆叠粘性侧边栏 ( Stacking Sticky Sidebars without JavaScript )

    Now onto the thing that prompted me to write this entire article in the first place! Let's use this cool new CSS3 thing with a clever technique to have a dynamic "stacking sticky sidebar" design pattern as I discussed at the top of the article.

    现在介绍促使我首先撰写整篇文章的内容! 让我们将这种酷炫CSS3新事物与一种巧妙的技术结合使用,以实现动态的“堆叠粘性侧边栏”设计模式,正如我在本文顶部所讨论的那样。

    To reiterate, our goal is:

    重申一下,我们的目标是:

    • Have a sticky sidebar.

      侧边栏有粘性。
    • Space out a bunch of them to show multiple items sticky separately.

      隔开一堆以单独显示多个项目。
    • Don't use JavaScript.

      不要使用JavaScript。
    • Keep it simple.

      把事情简单化。

    带有纯CSS的多重堆叠粘性侧边栏演示 (Multiple Stacking Sticky Sidebar Demo with Pure CSS)

    First, here's a demo of it working in action. This is 100% CSS:

    首先,这是一个实际运行的演示。 这是100%CSS

    这个怎么运作 (How it Works)

    It's actually pretty simple. We know how to use CSS sticky and that it just affixes an element to the top and the bottom of it's container based on scroll position.

    实际上很简单。 我们知道如何使用CSS Sticky,它只是根据滚动位置在容器的顶部和底部附加一个元素。

    So all we need to do, is add a bunch of containers evenly split and put sticky content inside of them. See this blueprint of what we want to create with them marked container 1, container 2, container 3, and container n:

    因此,我们需要做的就是添加一堆均匀分配的容器并将粘性内容放入其中。 请参阅此蓝图,了解我们要使用它们标记为container 1container 2container 3container n

    多个粘性侧栏

    An easy trick to simulate the equal heights would be using position: absolute;. Here's some sample code:

    一个模拟等高的简单技巧是使用position: absolute; 。 这是一些示例代码:

    /* "TITLE HERE" from above */
    . title-section {
        width : 100 % ;
        height : auto
    }
    
    
    /* "CONTENT" From Above */
    . content-section {
    
         /* size of my container minus sidebar width */
        width : calc(100 % - 300px);
    
        /* Estimated height of largest sidebar in case of short content */
        min-height : 800px;
    }
    
    /* SIDEBAR */
    . sidebar-section {
        position : absolute;
        right : 0;
        top : 0;
        width : 300px;
        height : 100 % ; / * Super important! * /
    }
    
    /* "SIDEBAR CONTAINER" in the blueprint */
    . sidebar-item {
        position : absolute;
        top : 0;
        left : 0;
        width : 100 % ;
        height : 25 % ;
    
        /* Position the items */
        & : nth-child(2) { top : 25 % ; }
        & : nth-child(3) { top : 50 % ; }
        & : nth-child(4) { top : 75 % ; }
    }

    Then, the HTML:

    然后, HTML

    < article >
        < div class = " container-fluid " >
            < div class = " col-md-12 " >
    
                < div class = " title-section " >
                    < h1 > TITLE HERE </ h1 >
                </ div >
    
                < div class = " inner-guts " >
    
    
                    < div class = " content-section " >
                        < h2 > Content Section </ h2 >
                    </ div >
    
    
                    < div class = " sidebar-section " >
    
                        < div class = " sidebar-item " >
                            < h3 > Item 1 </ h3 >
                        </ div >
                        < div class = " sidebar-item " >
                            < h3 > Item 2 </ h3 >
                        </ div >
                        < div class = " sidebar-item " >
                            < h3 > Item 3 </ h3 >
                        </ div >
                        < div class = " sidebar-item " >
                            < h3 > Item 4 </ h3 >
                        </ div >
    
                    </ div >
    
    
                </ div >
            </ div >
        </ div >
    </ article >

    And finally a demo:

    最后是一个演示:

    接下来,让我们粘起来 (Next, Let's Make it Sticky)

    Now, to make it sticky we just need that CSS property in each of the sidebar-items. So, add these lines of code:

    现在,要使其具有粘性,我们只需要在每个sidebar-items具有该CSS属性。 因此,添加以下代码行:

    .make-me-sticky {
        position: sticky;
        top: 0;
    }
    <!-- Repeat this -->
    <div class="sidebar-item">
        <div class="make-me-sticky">
    
        </div>
    </div>
    
    ...
    
    ...

    That is it! Pretty simple. We're just using position: absolute; to build the layout we want then position: sticky; to do all our work. Here is the blueprint live:

    这就对了! 很简单 我们只是在使用position: absolute; 建立我们想要的布局,然后position: sticky; 去做我们所有的工作。 这是现场设计图:

    您将面对的问题 (Issues you'll face)

    Real quick, I just want to flag issues you'll face with this approach:

    很快,我只想举报您使用这种方法会遇到的问题:

    • Maybe the content container is shorter than the sidebar.

      内容容器可能比边栏短。
    • Maybe the sidebar items height are taller than their individual container

      侧边栏项目的高度可能比其各自的容器高
    • Maybe you have different quantities than 4 for your sidebar.

      侧边栏的数量可能不同于4。

    Nothing is perfect, but this is pretty great technique. You'll have to adjust the CSS here for your individual use case, but it's not a bad solution at all given we have no javascript.

    没有什么是完美的,但这是非常好的技术。 您必须在此处针对您的个别用例调整CSS,但是鉴于我们没有javascript,这绝对不是一个糟糕的解决方案。

    使它成为不同数量的帮助程序库/ Mixin (Make it a Helper Library / Mixin for Different Quantities)

    For dynamically changing content, I would do something like this in CSS. You could probably make a smarter SASS / LESS mixin though:

    对于动态更改内容,我会在CSS中执行类似的操作。 您可能可以制作更聪明的SASS / LESS mixin:

    .sidebar-item  {
        position : absolute ;
        top : 0 ;
        left : 0 ;
        width : 100% ;
    }
    .has-4-items .sidebar-item  {
        height: 25%;
        & :nth-child(2)  { top : 25% ; }
        & :nth-child(3)  { top : 50% ; }
        & :nth-child(4)  { top : 75% ; }
    }
    .has-3-items .sidebar-item  {
        height: 33 .333333 %;
        & :nth-child(2)  { top : 33.333333% ; }
        & :nth-child(3)  { top : 66.666666% ; }
    }
    .has-2-items .sidebar-item  {
        height: 50%;
        & :nth-child(2)  { top : 50% ; }
    }

    更好的方法? 引导程序和Flexbox? ( A Better Way? Bootstrap and Flexbox? )

    Okay, so in the above example you'll notice I used calc of exactly 300px for the sidebar width. I did this because ad units are that size, so it's basically become the standard on the web for a sidebar.

    好的,因此在上面的示例中,您会注意到我使用的边栏宽度的calc精确为300px。 我这样做的原因是广告单元就是这种尺寸,所以它基本上已成为侧边栏在网络上的标准。

    With Bootstrap 4, their grid system is flexbox by default. This means a bunch of awsome things! The biggest for most users are columns are equal height by default with Bootstrap 4.

    对于Bootstrap 4,默认情况下,其网格系统为flexbox 。 这意味着一堆可怕的东西! 对于大多数用户而言,最大的是默认情况下与Bootstrap 4高度相等的列

    Check out this demo proving that:

    查看此演示,证明:

    Pretty amazing right? Now, let's leverage that with sticky sidebars.

    太神奇了吧? 现在,让我们通过粘性侧边栏来利用它。

    Instead of doing the calc trick, we'll just use a Bootstrap 4 grid system. The only thing we need to update on our code is to make sure the .make-me-sticky has left and right padding that matches your column gutters.

    除了执行计算技巧外,我们仅使用Bootstrap 4网格系统。 我们唯一需要更新的代码就是确保.make-me-sticky 左右填充与您的列 .make-me-sticky 匹配。

    So default setup will be:

    因此,默认设置为:

    .make-me-sticky {
        position: sticky;
        top: 0;
    
        /* For Bootstrap 4 */
        padding: 0 15px;
    }

    Check out the demo below:

    查看下面的演示:

    多个堆叠式粘边栏 ( Multiple Stacking Sticky Sidebars )

    Okay, let's just get crazy with this Bootstrap example. Let's do this in multiple columns at different quantities with just CSS.

    好的,让我们为这个Bootstrap示例疯狂。 让我们仅使用CSS在不同数量的多列中执行此操作。

    This is super performant, snappy, and super easy! This however does scare me a bit for the future of a lot of website designs if this type of pattern catches on and is abused. Ads galore...

    这是超级表现,活泼而且超级容易! 但是,如果这种模式流行并被滥用,这确实会使我对很多网站设计的未来感到有些恐惧。 广告丰盛...

    React灵敏 (Responsive)

    I didn't handle for responsive here or that much in any of the demos, but you can probably figure that one out on your own. You simply need to just disable sticky whenever you have your columns stack.

    在这里或任何演示中,我都没有提供足够的响应,但是您可能可以自行解决。 只要有列堆栈,您只需要禁用粘性即可。

    “等等...我不能只使用Flexbox自动拆分侧边栏部分而不是计算它们吗?” -你 ( "Wait... Couldn't I just use Flexbox to split the sidebar sections automatically instead of calculating them?" - You )

    So the most annoying thing about this is having to configure the has-4-items, has-3-items, etc. What if you could use Flexbox to space the .sidebar-item evenly and automatically regardless of count?

    因此,最烦人的事情是必须配置has-4-itemshas-3-items等。如果您可以使用Flexbox均匀自动地均匀分配.sidebar-item ,而不管计数如何呢?

    It would be something like this:

    就像这样:

    .sidebar-section {
        display: flexbox;
        flex-direction: column;
        justify-content: space-between;
    }

    This would have been a game changer, but despite this great idea, sticky just doesn't work well with Flexbox. Give it a try if you'd like. If anyone can figure it out, please let me know!

    这本来可以改变游戏规则,但是尽管有了这个好主意,但sticky在Flexbox上无法很好地工作。 如果需要,请尝试一下。 如果有人可以解决,请告诉我!

    结论 ( Conclusion )

    This was a fun, quick tutorial on how to use position: sticky; with Bootstrap 4 to create multiple sticky sidebars or multiple multiple sticky sidebars.

    这是一个关于如何使用position: sticky;的有趣,快速的教程position: sticky; 使用Bootstrap 4创建多个粘性侧栏或多个多个粘性侧栏

    It's really easy to do. I have no doubt that most if not all ad based websites will start doing this more and more. I just hope it's not abused.

    这真的很容易做到。 我毫不怀疑,大多数(如果不是全部)基于广告的网站将开始越来越多地这样做。 我只是希望它不会被滥用。

    Either way, thank you for following this tut. I hope you enjoyed it as much as I did!

    无论哪种方式,谢谢您的关注。 希望您能像我一样喜欢它!

    翻译自: https://scotch.io/tutorials/build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4

    bootstrap4侧边栏

    展开全文
  • 纯css三层侧边栏效果

    2016-03-16 13:53:00
    <!DOCTYPE html><...<head> <meta charset="utf-8" /> <...纯css三层侧边栏</title> <style type="text/css"> *{margin: 0;padding: 0;font-size: 14px;font-family: '...
  • 纯css代码实现侧边栏弹窗滑进滑出,鼠标放到侧边栏上实现侧边栏向外滑出
  • CSS实现侧边栏导航

    万次阅读 多人点赞 2017-05-09 22:07:24
    CSS实现侧边栏导航
  • 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定):  margin-bottom:-3000px; padding-bottom:3000px;  再配合父标签的overflow:hidden 属性即可实现高度自动相等的...
  • 纯CSS实现网页侧边栏弹窗滑进滑出

    千次阅读 2019-09-03 11:12:14
      随机打开一个网页,都会发现右侧有一个侧边栏,鼠标悬停在上边会出现一个小小的弹窗,这样子的,觉得很酷炫。   上图,这个是实现效果:(弹窗还有侧边栏的内容后期可以自己加入进去.) html部分代码: <...
  • 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下(数值不固定):margin-bottom:-3000px; padding-bottom:3000px;再配合父标签的overflow:hidden 属性即可实现高度自动相等的效果。举个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,115
精华内容 846
关键字:

纯css侧边栏