css Laura C的钢笔..

Posted 2021-05-13

Marvel Horizontal Accordion
---------------------------


A [Pen](http://codepen.io/lzen/pen/Dlftn) by [Laura C.](http://codepen.io/lzen) on [CodePen](http://codepen.io/).

[License](http://codepen.io/lzen/pen/Dlftn/license).

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<div class="tabs-menu">
  <nav>
    <ul>
      <li class="img1 active" id="1"><a href="#"><h2>Spider-Man</h2><span class="logo"></span></a></li>
      <li class="img2" id="2"><a href="#"><h2>The Avengers</h2><span class="logo"></span></a></li>
      <li class="img3" id="3"><a href="#"><h2>Captain America</h2><span class="logo"></span></a></li>
      <li class="img4" id="4"><a href="#"><h2>Iron Man</h2><span class="logo"></span></a></li>
    </ul>
  </nav>
  
	<div class="content">
    <div class="wrapper">
    <div>
      <img class="ac-img img1" src="http://i.annihil.us/u/prod/marvel/i/mg/1/03/5226155a7157a.jpg"/>
    </div>
    <div>
      <img class="ac-img img2" src="http://i.annihil.us/u/prod/marvel/i/mg/5/50/5220c5f104d3a.jpg"/>
    </div>


    <div>
      <img class="ac-img img3" src="http://i.annihil.us/u/prod/marvel/i/mg/5/d0/5342fc0f31d34.jpg"/>
    </div>


    <div>
      <img class="ac-img img4" src="http://i.annihil.us/u/prod/marvel/i/mg/6/30/522de9bf71205.jpg"/>
    </div>
  </div>
  </div>
			
</div>

$(function() {
  var total = $("body").width();
  var total2 = total;
  var ancho = total*4;
  $(".ac-img").css("width", total+"px");
  $(".wrapper").css({"width":ancho+"px"});
  var tabs =  $(".tabs-menu li");
  
  $( window ).resize(function() {
    var total2 = $("body").width();
    var ancho2 = total2*4;
    $(".ac-img").css("width", total2+"px");
    $(".wrapper").css({"width":ancho2+"px"});
    var clase2 = $(".active").attr("id");
    $(".wrapper").stop().animate({
      left: -(total2*(clase2-1)),
    }, 100);
  });
  
  $('nav ul li').click(function() {
    var total = $("body").width();
    
    var clase = $(this).attr("id");
    tabs.removeClass("active");
    $(this).addClass("active");
    $(".wrapper").stop().animate({
      left: -(total*(clase-1)),
    }, 1000);
    
  });
   
});

html, body{
  margin:0 auto;
  background: #e74c3c;
  color: #333;
  font-family: 'Oswald'
}

a{
  text-decoration:none;
  cursor:pointer;
  color: #333;
}

body{
  max-width:920px;
}


@media screen and (max-width: 399px) {
  .content, body{width:350px;}
  .wrapper div img{height:200px;}
 .tabs-menu nav li h2 {
    display:none;
  }
  .tabs-menu nav li span{
    margin:20px auto;
  }
}
@media screen and (min-width: 400px) and (max-width: 699px) {
  .content, body{width:400px;}
  .tabs-menu nav li h2 {
    display:none;
  }
  .tabs-menu nav li span{
    margin:20px auto;
  }
}
@media screen and (min-width: 700px) and (max-width: 899px) {
  .content, body{width:700px;}
  
}
@media screen and(min-width: 900px) {
  .content, body{width:900px;}
}
h2{
  margin:0;
  padding:0;
}

img{
  max-width:100%;
  height: auto;
}

.tabs-menu nav ul{
  width:100%;
  height: auto;
}

nav{
  width:100%;
  height:90px;
  margin: 0 auto;
  overflow:hidden;
}

ul {
  list-style: none;
  padding: 0;
}
nav li {
  float: left;
  height: 120px;
  margin: 5px 3px;
  padding: 0 20px;
  position: relative;
  background: white;
  border-radius: 30px;
}
nav li:first-child{margin-left:0;}

nav li span{
  margin: 0 auto;
}

.active a{ color: #e74c3c;}
.active span.logo{ background-color: #e74c3c; border-radius:99px;}
span.logo{
  width:40px;
  height:40px;
  display:block;
}
.img1 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -54px -48px;
  width:30px;
  height:30px;
}

.img2 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -283px -48px;
  width:30px;
  height:30px;
}

.img3 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -146px -48px;
  width:30px;
  height:30px;
}

.img4 .logo{
  background: url('http://www.clker.com/cliparts/e/c/a/9/13683718001003283990windows_8_icons_superheroes.png') -8px -140px;
  width:30px;
  height:30px;
}

.content{
  clear:both;
  overflow: hidden;
  border:5px solid white;
  z-index:10;
  width:100%;
  height:auto;
  background:white;
}
.wrapper{
  z-index:5;
  position: relative;
  left:0;
}
.wrapper div{
  position:relative;
  float:left;
  z-index:1;
  
}
.wrapper div img{
  width:100%;
  height:auto;

}