react手风琴带文字提示导航照片点击切换效果代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：react手风琴带文字提示导航照片点击切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foundation.min.css">
<style>
    html, body {
  background-color: #222;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

a, h1, h2, h3, h4, h5, h6 {
  color: white;
}

a:hover, a:hover > * {
  color: grey;
}

.categories--menu-container {
  position: relative;
  height: 100%;
  height: calc(100vh - 150px);
  width: 100%;
}

ul.categories {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.category {
  position: relative;
}

/*content*/
.category--content {
  position: absolute;
  top: 50px;
  white-space: nowrap;
  right: 0;
  transform: translateX(100%);
}

.category--content h2 {
  text-align: left;
  font-size: 44px;
  transform: translateX(-50px);
  text-transform: uppercase;
  font-weight: bold;
}

.category--content .project-list {
  padding: 0 0 0 30px;
}

.category--content,
.category--content .project-list,
.category--content .project-list li {
  text-align: left;
}

.category--name {
  position: absolute;
  white-space: nowrap;
  width: calc(100% - 5px);
  transition: all 0.5s ease;
  padding-top: 5px;
  margin-top: 15px;
  margin-right: 5px;
  border-top: 1px solid #666;
  color: #666;
}

.category--name h6 {
  font-size: 16px;
  color: inherit;
  text-transform: capitalize;
}

.focused .category--name {
  opacity: 0;
}

.projectlist--client {
  font-size: 18px;
  margin-bottom: 0px;
  -webkit-text-stroke: 0;
  text-transform: capitalize;
  font-weight: bold;
}

.projectlist--byline {
  font-size: 12px;
  font-family: "Nothing You Could Do", sans-serif;
}

/*last item content*/
.isLast .category--content {
  right: initial;
  left: 0;
  transform: translateX(-100%);
}

.isLast .category--content h2 {
  transform: translateX(50px);
  text-align: right;
}

.isLast .category--content .project-list {
  padding: 0 30px 0 0;
}

.isLast .category--content,
.isLast .category--content .project-list,
.isLast .category--content .project-list li {
  text-align: right;
}

/*inactive states*/
li.category {
  transition: transform 500ms ease;
  position: relative;
  z-index: 1;
}

.category--content {
  text-align: right;
  z-index: -1;
  visibility: hidden;
  pointer-events: none;
}

.category--content .project-list li {
  opacity: 0;
  transition: all 300ms ease;
}

.category--image-container {
  background: #222;
  transition: all 500ms ease;
}

/*active states*/
li.category.isActive {
  z-index: 99;
}

.isActive .category--content {
  z-index: 99;
  visibility: visible;
  pointer-events: all;
}

.isActive .category--content .project-list li {
  opacity: 1;
}

/*image states*/
.category--image:hover, .category--image:focus, .focused .category--image:hover, .focused .category--image:focus {
  opacity: 1;
  cursor: pointer;
}

.category--image {
  opacity: 0.7;
  transition: opacity 500ms ease, width 500ms ease 100ms;
}

.focused .category--image {
  opacity: 0.25;
}

.focused .isActive .category--image {
  opacity: 0.75;
}

.category--closeButton {
  opacity: 0;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -5rem;
  transition: opacity 200ms ease;
}

.focused .isActive .category--closeButton {
  opacity: 1;
  z-index: 99;
}

.category--closeButton a {
  margin: -15px;
  padding: 15px;
}

/*hover state*/
.category--image {
  /*transition: width 500ms ease;*/
}

.categories--menu-container:not(.focused) li.category:hover .category--name {
  border-color: #eee;
  color: #eee;
}

/*Nav*/
.right-arrow {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: inline-block;
}

.left-arrow {
  position: fixed;
  bottom: 50px;
  left: 50px;
  display: inline-block;
}

.left-arrow a, .right-arrow a {
  background-color: #222;
  z-index: 9;
  position: relative;
  padding: 5px;
  font-size: 12px;
}

.right-arrow img, .left-arrow img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  z-index: 0;
  width: 140px;
  max-width: none;
}

.left-arrow img {
  transform: translate(-50%, -50%) scaleX(-1);
}
</style>

</head>
<body>

<div id="pentitle" style="display: none;" data-title="Expanding Horizontal Accordion in React"></div>
<div id="root"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>

<script>
!function(){"use strict";function e(){for(var r=[],o=0;o<arguments.length;o++){var f=arguments[o];if(f){var i=typeof f;if("string"===i||"number"===i)r.push(f);else if(Array.isArray(f))r.push(e.apply(null,f));else if("object"===i)for(var t in f)n.call(f,t)&&f[t]&&r.push(t)}}return r.join(" ")}var n={}.hasOwnProperty;"undefined"!=typeof module&&module.exports?module.exports=e:"function"==typeof define&&"object"==typeof define.amd&&define.amd?define("classnames",[],function(){return e}):window.classNames=e}();
//# sourceMappingURL=index.min.js.map
    /**
Welcome! This Pen has been updated with ES6 goodness and cleaner code. 
https://codepen.io/nevernotsean/pen/QodqGj
*/

class ProjectList extends React.Component {
  createProjectListItem(project) {
    let byline = project.acf.project_byline;
    let client = project.acf.project_client;
    return /*#__PURE__*/(
      React.createElement("li", { key: 'project-' + project.id }, /*#__PURE__*/
      React.createElement("a", { to: '/projects/' + project.slug }, /*#__PURE__*/
      React.createElement("h3", { className: "projectlist--client" }, client), /*#__PURE__*/
      React.createElement("h4", { className: "projectlist--byline" }, byline))));



  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "project-list" }, /*#__PURE__*/
      React.createElement("ul", { className: "menu vertical" },
      this.props.projects.map(this.createProjectListItem))));



  }}


class ProjectCategory extends React.Component {
  constructor(props) {
    super(props);

    this.setActive = this.setActive.bind(this);

    this.state = {
      projects: [] };

  }
  componentWillMount() {
    // this.getProjects(); // Codepen switched to HTTPS, so I have to load JSON manually instead of the json-generator
    this.setState({
      projects: [{ "acf": { "project_byline": "ut ullamco sunt", "project_credits": [{ "credit_role": "ut", "credit_name": "Leann" }, { "credit_role": "aliquip", "credit_name": "Hernandez" }, { "credit_role": "consequat", "credit_name": "Ashlee" }], "project_description": "Enim est qui Lorem officia adipisicing irure minim. Eu enim fugiat cupidatat elit anim pariatur irure quis aute velit enim. Adipisicing consequat sunt eiusmod reprehenderit nisi fugiat esse ut. Consequat ea ad deserunt mollit quis labore Lorem do qui officia labore. Incididunt reprehenderit anim sunt velit sunt est sit anim.", "project_client": "pariatur", "project_thumbnail": "https://unsplash.it/1000/1000", "project_category": "aute" }, "tags": ["incididunt"], "categories": [2], "excerpt": { "rendered": "Eiusmod reprehenderit incididunt aute do commodo sint laboris exercitation Lorem excepteur sit cillum aute irure." }, "content": { "rendered": "Enim id ex excepteur incididunt in deserunt mollit eiusmod adipisicing officia quis aliquip. Qui aute et consequat consectetur aute consectetur laborum. Non non sint reprehenderit velit proident aliqua elit eiusmod laboris veniam elit ea. Incididunt excepteur et esse minim amet in magna ea enim." }, "title": { "rendered": "non" }, "link": "https://seanma.de", "guid": "7d115e77-9566-4389-b544-deffaf76d058", "slug": "proident", "id": "58653533ca121cbaf664b199" }, { "acf": { "project_byline": "consectetur aute aliquip", "project_credits": [{ "credit_role": "dolor", "credit_name": "Hampton" }, { "credit_role": "mollit", "credit_name": "Kate" }, { "credit_role": "consectetur", "credit_name": "Riddle" }], "project_description": "Reprehenderit in mollit fugiat cupidatat consectetur minim Lorem eiusmod commodo laboris dolor minim tempor eiusmod. Et aute et exercitation dolore fugiat pariatur in ipsum anim dolor qui laborum laborum. Elit qui ad ea exercitation laboris sunt ut et est sunt duis. Esse duis ad ipsum aliqua nulla enim minim minim. Ullamco do tempor ex magna et ipsum sint et voluptate cupidatat anim labore esse.", "project_client": "et", "project_thumbnail": "https://unsplash.it/1000/1001", "project_category": "nisi" }, "tags": ["et"], "categories": [8], "excerpt": { "rendered": "Ipsum excepteur laboris nostrud sit proident." }, "content": { "rendered": "Anim non Lorem id fugiat. Do cillum qui veniam qui ad mollit pariatur Lorem. Lorem veniam nulla commodo aliqua. Fugiat laboris cillum excepteur tempor aliqua sit exercitation sit labore nostrud et." }, "title": { "rendered": "in" }, "link": "http://seanma.de", "guid": "444da15a-5160-48bb-bf6f-7d820d1f62e8", "slug": "dolor", "id": "58653533702dae7921a80c46" }, { "acf": { "project_byline": "eiusmod ullamco commodo", "project_credits": [{ "credit_role": "nulla", "credit_name": "Dickson" }, { "credit_role": "esse", "credit_name": "Trevino" }, { "credit_role": "aliquip", "credit_name": "Joni" }], "project_description": "Ullamco minim occaecat officia anim laborum laboris velit cupidatat esse aliqua irure exercitation. Occaecat elit labore est exercitation aute qui voluptate adipisicing consectetur officia. Adipisicing tempor tempor culpa enim cupidatat.", "project_client": &q.........完整代码请登录后点击上方下载按钮下载查看