今天,我们将向您展示仅用CSS如何创建内容导航器。有几个幻灯片或内容层,我们将显示或隐藏使用:伪类目标。 用CSS转换可以使幻灯片的方式出现。我们也会让整个事情的反应。<section class="cn-container"> <div class="cn-slide" id="slide-main"> <h2>Explore this</h2> <nav> <a href="#slide-1">Philosphy</a> <a href="#slide-2">Science</a> <a href="#slide-3">Literature</a> </nav> </div> <!-- Slide 1 and sub-slides --> <div class="cn-slide ts-slide-sub" id="slide-1"> <h2>Philosophy</h2> <a href="#slide-main" class="cn-back">Back</a> <nav> <a href="#slide-1-1">Epistemology</a> <a href="#slide-1-2">Metaphysics</a> <a href="#slide-1-3">Aesthetics</a> <a href="#slide-1-4">Ethics</a> </nav> </div> <div class="cn-slide" id="slide-1-1"> <h2>Epistemology</h2> <a href="#slide-1" class="cn-back">Back</a> <div class="cn-content"> <p>Some text</p> </div> </div> <div class="cn-slide" id="slide-1-2"> <h2>Metaphysics</h2> <!-- ... --> </div> <div class="cn-slide" id="slide-1-3"> <!-- ... --> </div> <div class="cn-slide" id="slide-1-4"> <!-- ... --> </div> <!-- Slide 2 and Sub-slides --> <!-- ... --> </section>sub-slides和幻灯片的内容将有一个链接回到他们以前的“层”。所以,“哲学”部分的所有内容的幻灯片将链接回“slide-1”的sub-slide“哲学”。 让我们看看CSS ! CSS 主容器将min-width和max-width将允许我们使用百分比宽度但保证它不会变得太大或太小:.cn-container{ width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; }绝对的主要标题将被放置,我们将使它淡入和扩大在“开放”下滑。过渡将会有一个延迟,因为我们希望它出现在所有的链接框:.cn-container h2{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; color: #fff; position: absolute; z-index: 10000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right: 0px; white-space: nowrap; opacity: 0; transform: scale(0); transition: all 0.5s linear 0.7s; } .cn-container .cn-slide:target h2{ opacity: 1; transform: scale(1); }幻灯片也将放置绝对。我们将设置幻灯片的初始不透明度为0,表明它一旦我们知道它的目标:.cn-slide{ text-align: center; position: absolute; left: 0px; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; } .cn-slide:target{ opacity: 1; z-index: 1000; }注意,在其他一些演示我们使用幻灯片上的转换。在这里我们将使用顺序转换链接元素。 现在,让我们看一下链接元素。他们都有一个背景图片之后将它定义为每个元素。默认情况下,我们会给1。jpg作为背景图像。最初,透明度和规模将是0。我们添加一个过渡的两个属性,也不必我们徘徊时需要的元素:.cn-slide nav a{ text-align: left; display: block; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 5px 0px rgba(182,105,135,0.4); color: #fff; line-height: 66px; outline: none; margin: 0 0 10px 0; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no-repeat center center; background-size: 100%; background-clip: padding-box; opacity: 0; transform: scale(0); transition: opacity 0.4s linear, transform 0.4s linear, box-shadow 0.3s ease-in-out; } .cn-slide nav a:hover{ box-shadow: 1px 2px 4px rgba(0,0,0,0.2); }目标幻灯片的链接元素将淡入和规模1:.cn-slide:target nav a{ opacity: 1; transform: scale(1); }让我们为元素定义转换延迟,所以,他们一个接一个的出现:.cn-slide nav a:nth-child(2){ transition-delay: 0.3s, 0.3s, 0s; } .cn-slide nav a:nth-child(3){ transition-delay: 0.6s, 0.6s, 0s; } .cn-slide nav a:nth-child(4){ transition-delay: 0.9s, 0.9s,0s; }如您所见,最后0秒的延迟将会因为这是css转换的延迟,让应用盘旋。 中的链接元素sub-slides将有42%的宽度,因为我们想要两个适合一行:.cn-slide-sub nav a{ width: 42%; display: inline-block; font-size: 40px; }创建一个小元素之间的差距,我们会给一个右边距的孩子们:.cn-slide-sub nav a:nth-child(odd){ margin-right: 5px; }幻灯片的内容区域是“最终”的,我们也会添加一个部门的转型:.cn-content{ background: #80B8CE url(../images/1.jpg) no-repeat center center; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px; cursor: pointer; opacity: 0; transform: scale(0); transition: all 0.6s linear; } .cn-slide:target .cn-content{ opacity: 1; transform: scale(1); }每个内容区域,就像它们相应的链接元素,有一个背景图片,稍后我们将定义。 段落也将有一个过渡,当我们点击的内容将被应用。激活伪类的:我们可以让用户查看的背景内容div通过点击它(和保持它点击):.cn-content p{ line-height: 24px; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); color: rgba(103,59,77,0.9); padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); user-select: none; transform: scale(1); transition: all 0.3s linear; } .cn-content:active p{ transform: scale(0); }后从左边的箭头将滑动。我们最初将其设置为-100 px和3 px滑动时目标:.cn-back{ outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px; left: -100px; cursor: pointer; opacity: 0; transition: all 0.4s ease-in-out 1s; } .cn-slide:target .cn-back{ left: 3px; opacity: 1; }现在,让我们为每个链接元素定义的背景图像。非常有用的属性选择器,我们可以指定元素将有什么背景图像。我们将看看href值和定义的图像:.cn-slide nav a[href="#slide-1"]{ background-image: url(../images/1.jpg); } .cn-slide nav a[href="#slide-2"]{ background-image: url(../images/2.jpg); } .cn-slide nav a[href="#slide-3"]{ background-image: url(../images/3.jpg); } /* Items and sub-items of slide 1*/ .cn-slide nav a[href="#slide-1-1"], #slide-1-1 .cn-content { background-image: url(../images/4.jpg); } .cn-slide nav a[href="#slide-1-2"], #slide-1-2 .cn-content { background-image: url(../images/5.jpg); } .cn-slide nav a[href="#slide-1-3"], #slide-1-3 .cn-content { background-image: url(../images/6.jpg); } .cn-slide nav a[href="#slide-1-4"], #slide-1-4 .cn-content { background-image: url(../images/7.jpg); }最后,我们将定义一些媒体查询解决布局时,我们认为这在较小的屏幕上。您当然可以定义的标准媒体查询常见的设备,但是我们只会检查当我们液体布局优惠和定义一个规则,“转折点”。在我们的例子中,这是1060像素和900像素。我们将调整字体大小和允许连续sub-slides有一项:@media screen and (max-width: 1060px){ .cn-slide-sub nav a{ font-size: 28px; } } @media screen and (max-width: 900px){ .cn-container h2{ font-size: 48px; line-height: 95px; } .cn-slide nav a{ font-size: 38px; } .cn-slide-sub nav a{ width: auto; font-size: 36px; display: block; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 0px; } }
