js+css实现左侧垂直全屏选项卡切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：js+css实现左侧垂直全屏选项卡切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  color: white;
  font-size: 18px;
  font-weight: 400;
  font-family: "Quicksand", "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
  background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 100%;
  background: #2680F3;
  transition: all 300ms ease;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 0px 10px #333;
}
nav:hover {
  width: 14rem;
}
nav * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
nav > ul {
  display: table;
  width: 14rem;
}
nav > ul > li {
  display: table-row;
  background: #0c66da;
  cursor: pointer;
}
nav > ul > li:hover {
  background: #569cf6;
}
nav > ul > li:active {
  background: #87b9f8;
}
nav > ul > li > div {
  height: 3.5rem;
  line-height: 3.5rem;
  display: table-cell;
}
nav > ul > li > div:nth-child(1) {
  width: 3.5rem;
  text-align: center;
}
nav > ul > li > div:nth-child(2) {
  width: 10.5rem;
  text-align: left;
  padding-left: 0.7rem;
}

.desktop {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem 1rem 4.5rem;
  transition: all 500ms ease;
  overflow: auto;
}
.desktop h1 {
  margin: 1rem 0;
  font-weight: 300;
}
.desktop h1:nth-child(1) {
  margin-top: 0;
}
.desktop p {
  font-weight: 300;
  text-align: justify;
  margin: 0 0 1rem 0;
}

#one {
  background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, 0.25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
}

#two {
  background: linear-gradient(135deg, #723362, #9d223c);
}

#three {
  background: linear-gradient(135deg, #2c539e, #63967d);
}

#four {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, #3b293a 100%), linear-gradient(to right, #f4e29c 0%, #826057 100%);
}

#five {
  background: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
}
</style>


  
  
</head>

<body >
  <nav>
  <ul>
    <li id="link-one">
      <div>1</div>
      <div>One</div>
    </li>
    <li id="link-two">
      <div>2</div>
      <div>Two</div>
    </li>
    <li id="link-three">
      <div>3</div>
      <div>Three</div>
    </li>
    <li id="link-four">
      <div>4</div>
      <div>Four</div>
    </li>
    <li id="link-five">
      <div>5</div>
      <div>Five</div>
    </li>
  </ul>
</nav>
<div class="desktop" id="one">
  <h1>Desktop System with Sidebar</h1>
  <p>This is the desktop 1</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum sem elit, vitae rutrum leo euismod vitae. Aliquam accumsan quam sit amet ultrices rhoncus. Proin diam diam, pellentesque et felis in, aliquam lacinia mauris. Sed euismod ipsum in feugiat sollicitudin. Praesent vel odio placerat, vehicula sapien eu, pellentesque dui. Praesent convallis augue non tristique lacinia. Quisque eu vulputate sem, vel commodo nisi. Nunc ullamcorper velit quis diam vulputate adipiscing. Mauris congue rhoncus fringilla. Phasellus porttitor purus neque, porttitor posuere nisl dictum eget. Duis pharetra augue leo, at sodales ipsum congue eu. Vestibulum eu justo erat. Nullam tempor varius mi, id placerat nisl pellentesque at. Quisque lacinia, nibh at viverra molestie, augue nunc commodo enim, euismod adipiscing eros mi nec nisl.</p>
</div>
<div class="desktop" id="two">
  <h1>Desktop Two</h1>
  <p>This is the desktop 2</p>
  <p>Sed egestas augue vitae enim elementum scelerisque. Morbi fermentum, ipsum sed vestibulum iaculis, diam tellus convallis nisi, in aliquam magna nisi quis felis. Quisque ac orci diam. Donec scelerisque lobortis scelerisque. Duis in tortor eget erat interdum mollis. P.........完整代码请登录后点击上方下载按钮下载查看