1. ホーム
  2. 質問と答え
  3. javanavバーをページの先頭から左側に更新しました

javanavバーをページの先頭から左側に更新しました

2016-09-27 6 views
0

javacodeの中で、このフィドルのナビゲーションバーを編集して、上から横に行くのではなく、左に下ろすのですか？私はバーが上から持っているのと同じプロパティを保持したい。 navのためのあなたのCSS float: left;の小さな微調整してjavanavバーをページの先頭から左側に更新しました

https://jsfiddle.net/z9g6wwu6/

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
    <head> 
     <meta charset="UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Tab Styles Inspiration</title> 
     <meta name="description" content="Tab Styles Inspiration: A small collection of styles for tabs" /> 
     <meta name="keywords" content="tabs, inspiration, web design, css, modern, effects, svg" /> 
     <meta name="author" content="Codrops" /> 


     <link rel="shortcut icon" href="../favicon.ico"> 
     <link rel="stylesheet" type="text/css" href="css/demo.css" /> 
     <link rel="stylesheet" type="text/css" href="css/tabs.css" /> 
     <link rel="stylesheet" type="text/css" href="css/tabstyles.css" /> 
     <script src="js/modernizr.custom.js"></script> 
    </head> 
    <body> 
    <div style="height: 100vh; width: 100vw"> 
     <div style="height:97%; width: 100%; border:2px yellow solid"> 
      <section> 
       <div class="tabs tabs-style-iconbox" style=" border:2px blue solid; height:24em"> 
        <nav> 
         <ul> 
          <li><a href="#section-iconbox-1" class="icon icon-home"><span>Home</span></a></li> 
          <li><a href="#section-iconbox-2" class="icon icon-gift"><span>Deals</span></a></li> 
          <li><a href="#section-iconbox-3" class="icon icon-upload"><span>Local</span></a></li> 
          <li><a href="#section-iconbox-4" class="icon icon-coffee"><span>New York</span></a></li> 
          <li><a href="#section-iconbox-5" class="icon icon-config"><span>Genius</span></a></li> 
          <li><a href="#section-iconbox-5" class="icon icon-config"><span>Exclusives</span></a></li> 
         </ul> 
        </nav> 
        <div class="content-wrap"> 
         <section id="section-iconbox-1" style="border:2px red solid; height: 17em"><p style="border:2px green solid; height: 3.9em"></p></section> 
         <section id="section-iconbox-2"><p>2</p></section> 
         <section id="section-iconbox-3"><p>3</p></section> 
         <section id="section-iconbox-4"><p>4</p></section> 
         <section id="section-iconbox-5"><p>5</p></section> 
        </div><!-- /content --> 
       </div><!-- /tabs --> 
      </section> 

</div> 
     </div><!-- /container --> 
     <script src="js/cbpFWTabs.js"></script> 
     <script> 
      (function() { 

       [].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) { 
        new CBPFWTabs(el); 
       }); 

      })(); 
     </script> 
    </body> 
</html>

出典

2016-09-27 brett

+0

試行 'フレックス方向：行反転、' ''。 – aavrug

+0

ありがとうございます。どこに追加すればいいですか？ – brett

+0

スタイル '' 'display：flex;' '' '' ul''のように、 – aavrug

答えて

0

とulflex-direction: column;のためにあなたは、この問題を解決することができます。

/* Individual tab styles */ 
 

 
/*****************************/ 
 
/* Bar */ 
 
/*****************************/ 
 

 
.tabs-style-bar nav { 
 
\t background: rgba(40,44,42,0.05); 
 
} 
 

 
.tabs-style-bar nav ul { 
 
\t border: 4px solid transparent; 
 
} 
 

 
.tabs-style-bar nav ul li a { 
 
\t margin: 0 2px; 
 
\t background-color: #f7f7f7; 
 
\t color: #74777b; 
 
\t transition: background-color 0.2s, color 0.2s; 
 
} 
 

 
.tabs-style-bar nav ul li a:hover, 
 
.tabs-style-bar nav ul li a:focus { 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-bar nav ul li a span { 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t font-weight: 500; 
 
\t font-size: 0.6em; 
 
} 
 

 
.tabs-style-bar nav ul li.tab-current a { 
 
\t background: #2CC185; 
 
\t color: #fff; 
 
} 
 

 
/*****************************/ 
 
/* Icon box */ 
 
/*****************************/ 
 

 
.tabs-style-iconbox nav { 
 
\t background: rgba(255,255,255,0.4); 
 
} 
 

 
.tabs-style-iconbox nav ul li a { 
 
\t overflow: visible; 
 
\t padding: 2em 0; 
 
\t line-height: 1; 
 
\t -webkit-transition: color 0.2s; 
 
\t transition: color 0.2s; 
 
} 
 

 
.tabs-style-iconbox nav ul li a span { 
 
\t font-weight: 700; 
 
\t font-size: 0.7em; \t 
 
} 
 

 
.tabs-style-iconbox nav ul li.tab-current { 
 
\t z-index: 100; 
 
} 
 

 
.tabs-style-iconbox nav ul li.tab-current a { 
 
\t background: #fff; 
 
\t box-shadow: -1px 0 0 #fff; 
 
} 
 

 
.tabs-style-iconbox nav ul li.tab-current a::after { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t left: 50%; 
 
\t margin-left: -10px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border: solid transparent; 
 
\t border-width: 10px; 
 
\t border-top-color: #fff; 
 
\t content: ''; 
 
\t pointer-events: none; 
 
} 
 

 
.tabs-style-iconbox nav ul li:first-child::before, 
 
.tabs-style-iconbox nav ul li::after { 
 
\t position: absolute; 
 
\t top: 20%; 
 
\t right: 0; 
 
\t z-index: -1; 
 
\t width: 1px; 
 
\t height: 60%; 
 
\t background: rgba(0,0,0,0.07); 
 
\t content: ''; 
 
} 
 

 
.tabs-style-iconbox nav ul li:first-child::before { 
 
\t right: auto; 
 
\t left: 0; 
 
} 
 

 
.tabs-style-iconbox .icon::before { 
 
\t display: block; 
 
\t margin: 0 0 0.25em 0; 
 
} 
 

 
/*****************************/ 
 
/* Underline */ 
 
/*****************************/ 
 

 
.tabs-style-underline nav { 
 
\t background: #fff; 
 
} 
 

 
.tabs-style-underline nav a { 
 
\t padding: 0.25em 0 0.5em; 
 
\t border-left: 1px solid #e7ecea; 
 
\t -webkit-transition: color 0.2s; 
 
\t transition: color 0.2s; 
 
} 
 

 
.tabs-style-underline nav li:last-child a { 
 
\t border-right: 1px solid #e7ecea; 
 
} 
 

 
.tabs-style-underline nav li a::after { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 6px; 
 
\t background: #2CC185; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.3s; 
 
\t transition: transform 0.3s; 
 
\t -webkit-transform: translate3d(0,150%,0); 
 
\t transform: translate3d(0,150%,0); 
 
} 
 

 
.tabs-style-underline nav li.tab-current a::after { 
 
\t -webkit-transform: translate3d(0,0,0); 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.tabs-style-underline nav a span { 
 
\t font-weight: 700; 
 
} 
 

 
/*****************************/ 
 
/* Top Line */ 
 
/*****************************/ 
 

 
.tabs-style-topline { 
 
\t max-width: 1200px; 
 
} 
 

 
.tabs-style-topline nav li { 
 
\t border: 1px solid rgba(40,44,42,0.1); 
 
} 
 

 
.tabs-style-topline nav li:not(:last-child) { 
 
\t border-right: none; 
 
} 
 

 
.tabs-style-topline nav li.tab-current { 
 
\t border-top-color: #2CC185; 
 
\t border-bottom: none; 
 
} 
 

 
.tabs-style-topline nav a { 
 
\t padding: 0.65em 0 0.5em; 
 
\t background: rgba(40,44,42,0.05); 
 
\t color: #74777b; 
 
\t line-height: 1; 
 
\t -webkit-transition: color 0.2s; 
 
\t transition: color 0.2s; 
 
} 
 

 
.tabs-style-topline nav a:hover, 
 
.tabs-style-topline nav a:focus { 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-topline nav li.tab-current a { 
 
\t background: none; 
 
\t box-shadow: inset 0 3px 0 #2CC185; 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-topline .icon::before { 
 
\t display: block; 
 
\t margin: 0; 
 
} 
 

 
.tabs-style-topline nav a span { 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t font-weight: 700; 
 
\t font-size: 0.5em; 
 
} 
 

 
/*****************************/ 
 
/* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */ 
 
/*****************************/ 
 

 
.tabs-style-iconfall { 
 
\t overflow: visible; 
 
} 
 

 
.tabs-style-iconfall nav a { 
 
\t display: inline-block; 
 
\t overflow: visible; 
 
\t padding: 1em 0 2em; 
 
\t color: #74777b; 
 
\t line-height: 1; 
 
\t -webkit-transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 
 
\t transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 
 
} 
 

 
.tabs-style-iconfall nav a:hover, 
 
.tabs-style-iconfall nav a:focus, 
 
.tabs-style-iconfall nav li.tab-current a { 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-iconfall nav a span { 
 
\t font-weight: 700; 
 
} 
 

 
.tabs-style-iconfall nav li::before { 
 
\t position: absolute; 
 
\t bottom: 1em; 
 
\t left: 50%; 
 
\t margin-left: -20px; 
 
\t width: 40px; 
 
\t height: 4px; 
 
\t background: #2CC185; 
 
\t content: ''; 
 
\t opacity: 0; 
 
\t -webkit-transition: -webkit-transform 0.2s ease-in; 
 
\t transition: transform 0.2s ease-in; 
 
\t -webkit-transform: scale3d(0,1,1); 
 
\t transform: scale3d(0,1,1); 
 
} 
 

 
.tabs-style-iconfall nav li.tab-current::before { 
 
\t opacity: 1; 
 
\t -webkit-transform: scale3d(1,1,1); 
 
\t transform: scale3d(1,1,1); 
 
} 
 

 
.tabs-style-iconfall .icon::before { 
 
\t display: block; 
 
\t margin: 0 0 0.35em; 
 
\t opacity: 0; 
 
\t -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; 
 
\t transition: transform 0.2s, opacity 0.2s; 
 
\t -webkit-transform: translate3d(0,-100px,0); 
 
\t transform: translate3d(0,-100px,0); 
 
\t pointer-events: none; 
 
} 
 

 
.tabs-style-iconfall nav li.tab-current .icon::before { 
 
\t opacity: 1; 
 
\t -webkit-transform: translate3d(0,0,0); 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
@media screen and (max-width: 58em) { 
 
\t .tabs-style-iconfall nav li .icon::before { 
 
\t \t opacity: 1; 
 
\t \t -webkit-transform: translate3d(0,0,0); 
 
\t \t transform: translate3d(0,0,0); 
 
\t } 
 
} 
 

 
/*****************************/ 
 
/* Moving Line */ 
 
/*****************************/ 
 

 
.tabs-style-linemove nav { 
 
\t background: #fff; 
 
} 
 

 
.tabs-style-linemove nav li:last-child::before { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 4px; 
 
\t background: #2CC185; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.3s; 
 
\t transition: transform 0.3s; 
 
} 
 

 
/* Move the line */ 
 
.tabs-style-linemove nav li:first-child.tab-current ~ li:last-child::before { 
 
\t -webkit-transform: translate3d(-400%,0,0); 
 
\t transform: translate3d(-400%,0,0); 
 
} 
 

 
.tabs-style-linemove nav li:nth-child(2).tab-current ~ li:last-child::before { 
 
\t -webkit-transform: translate3d(-300%,0,0); 
 
\t transform: translate3d(-300%,0,0); 
 
} 
 

 
.tabs-style-linemove nav li:nth-child(3).tab-current ~ li:last-child::before { 
 
\t -webkit-transform: translate3d(-200%,0,0); 
 
\t transform: translate3d(-200%,0,0); 
 
} 
 

 
.tabs-style-linemove nav li:nth-child(4).tab-current ~ li:last-child::before { 
 
\t -webkit-transform: translate3d(-100%,0,0); 
 
\t transform: translate3d(-100%,0,0); 
 
} 
 

 
.tabs-style-linemove nav a { 
 
\t padding: 1em 0; 
 
\t color: #74777b; 
 
\t line-height: 1; 
 
\t -webkit-transition: color 0.3s, -webkit-transform 0.3s; 
 
\t transition: color 0.3s, transform 0.3s; 
 
} 
 

 
.tabs-style-linemove nav li.tab-current a { 
 
\t color: #2CC185; 
 
\t -webkit-transform: translate3d(0,8px,0); 
 
\t transform: translate3d(0,8px,0); 
 
} 
 

 
.tabs-style-linemove nav a span { 
 
\t font-weight: 700; 
 
} 
 

 
/*****************************/ 
 
/* Line */ 
 
/*****************************/ 
 

 
.tabs-style-line nav ul { 
 
\t padding: 0 2em; 
 
\t max-width: none; 
 
\t box-shadow: inset 0 -2px #d1d3d2; 
 
} 
 

 
.tabs-style-line nav a { 
 
\t padding: 0.7em 0.4em; 
 
\t box-shadow: inset 0 -2px #d1d3d2; 
 
\t color: #74777b; 
 
\t text-align: left; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t font-weight: 700; 
 
\t font-size: 0.8em; 
 
\t line-height: 1; 
 
\t -webkit-transition: color 0.3s, box-shadow 0.3s; 
 
\t transition: color 0.3s, box-shadow 0.3s; 
 
} 
 

 
.tabs-style-line nav a:hover, 
 
.tabs-style-line nav a:focus { 
 
\t box-shadow: inset 0 -2px #74777b; 
 
} 
 

 
.tabs-style-line nav li.tab-current a { 
 
\t box-shadow: inset 0 -2px #2CC185; 
 
\t color: #2CC185; 
 
} 
 

 
@media screen and (max-width: 58em) { 
 
\t .tabs-style-line nav ul { 
 
\t \t display: block; 
 
\t \t box-shadow: none; 
 
\t } 
 
\t .tabs-style-line nav ul li { 
 
\t \t display: block; 
 
\t \t -webkit-flex: none; 
 
\t \t flex: none; 
 
\t } 
 
} 
 

 
/*****************************/ 
 
/* Circle */ 
 
/*****************************/ 
 

 
.tabs-style-circle { 
 
\t overflow: visible; 
 
} 
 

 
.tabs-style-circle nav li::before { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t margin: -60px 0 0 -60px; 
 
\t width: 120px; 
 
\t height: 120px; 
 
\t border: 1px solid #2CC185; 
 
\t border-radius: 50%; 
 
\t content: ''; 
 
\t opacity: 0; 
 
\t -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; 
 
\t transition: transform 0.2s, opacity 0.2s; 
 
\t -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
 
\t transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
 
} 
 

 
@media screen and (max-width: 58em) { 
 
\t .tabs-style-circle nav li::before { 
 
\t \t margin: -40px 0 0 -40px; 
 
\t \t width: 80px; 
 
\t \t height: 80px; 
 
\t } 
 
} 
 

 
.tabs-style-circle nav li.tab-current::before { 
 
\t opacity: 1; 
 
\t -webkit-transform: scale3d(1,1,1); 
 
\t transform: scale3d(1,1,1); 
 
} 
 

 
.tabs-style-circle nav a { 
 
\t overflow: visible; 
 
\t color: #74777b; 
 
\t font-weight: 700; 
 
\t font-size: 0.9em; 
 
\t line-height: 1.1; 
 
\t -webkit-transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 
 
\t transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 
 
} 
 

 
.tabs-style-circle nav a span { 
 
\t display: inline-block; 
 
} 
 

 
.tabs-style-circle nav a span, 
 
.tabs-style-circle .icon::before { 
 
\t -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7,0,0.3,1); 
 
\t transition: transform 0.3s cubic-bezier(0.7,0,0.3,1); 
 
} 
 

 
.tabs-style-circle nav a:hover, 
 
.tabs-style-circle nav a:focus { 
 
\t color: #4a4a4b; 
 
} 
 

 
.tabs-style-circle nav li.tab-current a { 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-circle nav li.tab-current a span { 
 
\t -webkit-transform: translate3d(0,4px,0); 
 
\t transform: translate3d(0,4px,0); 
 
} 
 

 
.tabs-style-circle .icon::before { 
 
\t display: block; 
 
\t margin: 0; 
 
\t pointer-events: none; 
 
} 
 

 
.tabs-style-circle nav li.tab-current .icon::before { 
 
\t -webkit-transform: translate3d(0,-4px,0); 
 
\t transform: translate3d(0,-4px,0); 
 
} 
 

 
/*****************************/ 
 
/* Shape */ 
 
/*****************************/ 
 

 
.tabs-style-shape { 
 
\t max-width: 1200px; 
 
} 
 

 
.tabs-style-shape nav ul li { 
 
\t margin: 0 3em; 
 
} 
 

 
.tabs-style-shape nav ul li:first-child { 
 
\t margin-left: 0; 
 
} 
 

 
.tabs-style-shape nav ul li.tab-current { 
 
\t z-index: 100; 
 
} 
 

 
.tabs-style-shape nav li a { 
 
\t overflow: visible; 
 
\t margin: 0 -3em 0 0; 
 
\t padding: 0; 
 
\t color: #fff; 
 
\t font-weight: 500; 
 
} 
 

 
.tabs-style-shape nav li:first-child a span { 
 
\t padding-left: 2em; 
 
\t border-radius: 30px 0 0 0; 
 
} 
 

 
.tabs-style-shape nav li:last-child a span { 
 
\t padding-right: 2em; 
 
\t border-radius: 0 30px 0 0; 
 
} 
 

 
.tabs-style-shape nav li a svg { 
 
\t position: absolute; 
 
\t left: 100%; 
 
\t margin: 0; 
 
\t width: 3em; 
 
\t height: 100%; 
 
\t fill: #bdc2c9; 
 
} 
 

 
.tabs-style-shape nav li a svg:nth-child(2), 
 
.tabs-style-shape nav li:last-child a svg { 
 
\t right: 100%; 
 
\t left: auto; 
 
\t -webkit-transform: scale3d(-1,1,1); 
 
\t transform: scale3d(-1,1,1); 
 
} 
 

 
.tabs-style-shape nav li a span { 
 
\t display: block; 
 
\t overflow: hidden; 
 
\t padding: 0.65em 0; 
 
\t background-color: #bdc2c9; 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
} 
 

 
.tabs-style-shape nav li a:hover span { 
 
\t background-color: #2CC185; 
 
} 
 

 
.tabs-style-shape nav li a:hover svg { 
 
\t fill: #2CC185; 
 
} 
 

 
/* Make only shape clickable */ 
 
.tabs-style-shape nav li a svg { 
 
\t pointer-events: none; 
 
} 
 

 
.tabs-style-shape nav li a svg use { 
 
\t pointer-events: auto; 
 
} 
 

 
.tabs-style-shape nav li.tab-current a span, 
 
.tabs-style-shape nav li.tab-current a svg { 
 
\t -webkit-transition: none; 
 
\t transition: none; 
 
} 
 

 
.tabs-style-shape nav li.tab-current a span { 
 
\t background: #fff; 
 
} 
 

 
.tabs-style-shape nav li.tab-current a svg { 
 
\t fill: #fff; 
 
} 
 

 
.tabs-style-shape .content-wrap { 
 
\t background: #fff; 
 
} 
 

 
@media screen and (max-width: 58em) { 
 
\t .tabs-style-shape nav ul { 
 
\t \t display: block; 
 
\t \t padding-top: 1.5em; 
 
\t } 
 
\t .tabs-style-shape nav ul li { 
 
\t \t display: block; 
 
\t \t margin: -1.25em 0 0; 
 
\t \t -webkit-flex: none; 
 
\t \t flex: none; 
 
\t } 
 
\t .tabs-style-shape nav ul li a { 
 
\t \t margin: 0; 
 
\t } 
 
\t .tabs-style-shape nav ul li svg { 
 
\t \t display: none; 
 
\t } 
 
\t .tabs-style-shape nav ul li a span { 
 
\t \t padding: 1.25em 0 2em !important; 
 
\t \t border-radius: 30px 30px 0 0 !important; 
 
\t \t box-shadow: 0 -1px 2px rgba(0,0,0,0.1); 
 
\t \t line-height: 1; 
 
\t } 
 
\t .tabs-style-shape nav ul li:last-child a span { 
 
\t \t padding: 1.25em 0 !important; 
 
\t } 
 
\t .tabs-style-shape nav ul li.tab-current { 
 
\t \t z-index: 1; 
 
\t } 
 
} 
 

 
/*****************************/ 
 
/* Line Box */ 
 
/*****************************/ 
 

 
.tabs-style-linebox nav ul li { 
 
\t margin: 0 0.5em; 
 
\t -webkit-flex: none; 
 
\t flex: none; 
 
} 
 

 
.tabs-style-linebox nav a { 
 
\t padding: 0 1.5em; 
 
\t color: #74777b; 
 
\t font-weight: 700; 
 
\t -webkit-transition: color 0.3s; 
 
\t transition: color 0.3s; 
 
} 
 

 
.tabs-style-linebox nav a:hover, 
 
.tabs-style-linebox nav a:focus { 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-linebox nav li.tab-current a { 
 
\t color: #fff; 
 
} 
 

 
.tabs-style-linebox nav a::after { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: -1; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: #d2d8d6; 
 
\t content: ''; 
 
\t -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; 
 
\t transition: background-color 0.3s, transform 0.3s; 
 
\t -webkit-transition-timing-function: ease, cubic-bezier(0.7,0,0.3,1); 
 
\t transition-timing-function: ease, cubic-bezier(0.7,0,0.3,1); 
 
\t -webkit-transform: translate3d(0,100%,0) translate3d(0,-3px,0); 
 
\t transform: translate3d(0,100%,0) translate3d(0,-3px,0); 
 
} 
 

 
.tabs-style-linebox nav li.tab-current a::after { 
 
\t -webkit-transform: translate3d(0,0,0); 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.tabs-style-linebox nav a:hover::after, 
 
.tabs-style-linebox nav a:focus::after, 
 
.tabs-style-linebox nav li.tab-current a::after { 
 
\t background: #2CC185; 
 
} 
 

 
@media screen and (max-width: 58em) { 
 
\t .tabs-style-linebox nav ul { 
 
\t \t display: block; 
 
\t \t box-shadow: none; 
 
\t } 
 
\t .tabs-style-linebox nav ul li { 
 
\t \t display: block; 
 
\t \t -webkit-flex: none; 
 
\t \t flex: none; 
 
\t } 
 
} 
 

 
/*****************************/ 
 
/* Flip */ 
 
/*****************************/ 
 

 
.tabs-style-flip { 
 
\t max-width: 1200px; 
 
} 
 

 
.tabs-style-flip nav a { 
 
\t padding: 0.5em 0; 
 
\t color: #2CC185; 
 
\t -webkit-transition: color 0.3s; 
 
\t transition: color 0.3s; 
 
} 
 

 
.tabs-style-flip nav a:hover, 
 
.tabs-style-flip nav a:focus, 
 
.tabs-style-flip nav li.tab-current a { 
 
\t color: #74777b; 
 
} 
 

 
.tabs-style-flip nav a span { 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t font-weight: 700; 
 
\t font-size: 0.625em; 
 
} 
 

 
.tabs-style-flip nav a::after { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: -1; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #f0f0f0; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; 
 
\t transition: transform 0.3s, background-color 0.3s; 
 
\t -webkit-transform: perspective(900px) rotate3d(1,0,0,90deg); 
 
\t transform: perspective(900px) rotate3d(1,0,0,90deg); 
 
\t -webkit-transform-origin: 50% 100%; 
 
\t transform-origin: 50% 100%; 
 
\t -webkit-perspective-origin: 50% 100%; 
 
\t perspective-origin: 50% 100%; 
 
} 
 

 
.tabs-style-flip nav li.tab-current a::after { 
 
\t background-color: #fff; 
 
\t -webkit-transform: perspective(900px) rotate3d(1,0,0,0deg); 
 
\t transform: perspective(900px) rotate3d(1,0,0,0deg); 
 
} 
 

 
.tabs-style-flip .content-wrap { 
 
\t background: #fff; 
 
} 
 

 

 
/*****************************/ 
 
/* Fill up */ 
 
/*****************************/ 
 

 
.tabs-style-fillup nav ul li a { 
 
\t padding: 1.9em 0; 
 
\t border-right: 1px solid #2CC185; 
 
\t line-height: 1; 
 
\t -webkit-transition: color 0.3s; 
 
\t transition: color 0.3s; 
 
\t -webkit-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
} 
 

 
.tabs-style-fillup nav ul li:last-child a { 
 
\t border: none; 
 
} 
 

 
.tabs-style-fillup nav ul li.tab-current { 
 
\t z-index: 100; 
 
} 
 

 
.tabs-style-fillup nav ul li.tab-current a { 
 
\t color: #fff; 
 
} 
 

 
.tabs-style-fillup nav ul li a::after { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: -1; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t height: calc(100% + 1px); 
 
\t border: 1px solid #2CC185; 
 
\t background: #2CC185; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.3s; 
 
\t transition: transform 0.3s; 
 
\t -webkit-transform: translate3d(0,100%,0); 
 
\t transform: translate3d(0,100%,0); 
 
} 
 

 
.tabs-style-fillup nav ul li.tab-current a::after { 
 
\t -webkit-transform: translate3d(0,0,0); 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.tabs-style-fillup nav ul li a span, 
 
.tabs-style-fillup .icon::before { 
 
\t -webkit-transition: -webkit-transform 0.5s; 
 
\t transition: transform 0.5s; 
 
\t -webkit-transform: translate3d(0,5px,0); 
 
\t transform: translate3d(0,5px,0); 
 
} 
 

 
.tabs-style-fillup nav ul li a span { 
 
\t display: block; 
 
\t font-weight: 700; 
 
\t font-size: 0.7em; 
 
\t line-height: 1.5; 
 
} 
 

 
.tabs-style-fillup .icon::before { 
 
\t display: block; 
 
\t margin: 0; 
 
} 
 

 
.tabs-style-fillup nav ul li.tab-current a span, 
 
.tabs-style-fillup li.tab-current .icon::before { 
 
\t -webkit-transform: translate3d(0,-10px,0); 
 
\t transform: translate3d(0,-10px,0); 
 
} 
 

 

 
/*****************************/ 
 
/* Trapezoid, based on http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/ */ 
 
/*****************************/ 
 

 
.tabs-style-tzoid { 
 
\t max-width: 1200px; 
 
} 
 

 
.tabs-style-tzoid nav { 
 
\t padding: 0 1em; 
 
} 
 

 
.tabs-style-tzoid nav ul li { 
 
\t -webkit-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
} 
 

 
.tabs-style-tzoid nav ul li a { 
 
\t padding: 0 1.5em 0 0.3em; 
 
\t color: #0d9564; 
 
\t -webkit-transition: color 0.2s; 
 
\t transition: color 0.2s; 
 
} 
 

 
@media screen and (max-width: 54em) { 
 
\t .tabs-style-tzoid nav ul li a { 
 
\t \t padding: 0 0.5em 0 0.3em; 
 
\t } 
 
} 
 

 
.tabs-style-tzoid nav ul li a:hover, 
 
.tabs-style-tzoid nav ul li a:focus { 
 
\t color: #fff; 
 
} 
 

 
.tabs-style-tzoid nav ul li.tab-current a, 
 
.tabs-style-tzoid nav ul li.tab-current a:hover { 
 
\t color: #2CC185; 
 
} 
 

 
.tabs-style-tzoid nav ul li a span { 
 
\t font-weight: 500; 
 
\t font-size: 0.75em; 
 
} 
 

 
.tabs-style-tzoid nav ul li a::after { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t z-index: -1; 
 
\t outline: 1px solid transparent; 
 
\t border-radius: 10px 10px 0 0; 
 
\t background: #2CC185; 
 
\t box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05); 
 
\t content: ''; 
 
\t -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); 
 
\t transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); 
 
\t -webkit-transform-origin: 0 0; 
 
\t transform-origin: 0 0; 
 
\t -webkit-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
} 
 

 
.tabs-style-tzoid nav ul li.tab-current a::after, 
 
.tabs-style-tzoid .content-wrap { 
 
\t background: #fff; 
 
\t box-shadow: none; 
 
} 
 

 
/*****************************/ 
 
/* Circle fill */ 
 
/*****************************/ 
 

 
.tabs-style-circlefill { 
 
\t max-width: 700px; 
 
\t border: 1px solid #2CC185; 
 
} 
 

 
.tabs-style-circlefill nav ul li { 
 
\t overflow: hidden; 
 
\t border-right: 1px solid #2CC185; 
 
} 
 

 
.tabs-style-circlefill nav li a { 
 
\t padding: 1.5em 0; 
 
\t color: #fff; 
 
\t font-size: 1.25em; 
 
} 
 

 
.tabs-style-circlefill nav li:first-child { 
 
\t border-left: none; 
 
} 
 

 
.tabs-style-circlefill nav li:last-child { 
 
\t border: none; 
 
} 
 

 
.tabs-style-circlefill nav li::before { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t margin: -40px 0 0 -40px; 
 
\t width: 80px; 
 
\t height: 80px; 
 
\t border: 1px solid #2CC185; 
 
\t border-radius: 50%; 
 
\t background: #2CC185; 
 
\t content: ''; 
 
\t -webkit-transition: -webkit-transform 0.3s; 
 
\t transition: transform 0.3s; 
 
} 
 

 
.tabs-style-circlefill nav li.tab-current::before { 
 
\t -webkit-transform: scale3d(2.5,2.5,1); 
 
\t transform: scale3d(2.5,2.5,1); 
 
} 
 

 
.tabs-style-circlefill nav a { 
 
\t -webkit-transition: color 0.3s; 
 
\t transition: color 0.3s; 
 
} 
 

 
.tabs-style-circlefill nav a span { 
 
\t display: none; 
 
} 
 

 
.tabs-style-circlefill nav li.tab-current a { 
 
\t color: #fff; 
 
} 
 

 
.tabs-style-circlefill .icon::before { 
 
\t display: block; 
 
\t margin: 0; 
 
\t pointer-events: none; 
 
} 
 

 
.tabs-style-circlefill .content-wrap { 
 
\t border-top: 1px solid #2CC185; 
 
} 
 

 
/* Default tab style */ 
 

 
@font-face { 
 
\t font-weight: normal; 
 
\t font-style: normal; 
 
\t font-family: 'stroke7pixeden'; 
 
\t src:url('../fonts/stroke7pixeden/stroke7pixeden.eot?u58ytb'); 
 
\t src:url('../fonts/stroke7pixeden/stroke7pixeden.eot?#iefixu58ytb') format('embedded-opentype'), 
 
\t \t url('../fonts/stroke7pixeden/stroke7pixeden.woff?u58ytb') format('woff'), 
 
\t \t url('../fonts/stroke7pixeden/stroke7pixeden.ttf?u58ytb') format('truetype'), 
 
\t \t url('../fonts/stroke7pixeden/stroke7pixeden.svg?u58ytb#stroke7pixeden') format('svg'); 
 
} 
 

 
.tabs { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t font-weight: 300; 
 
\t font-size: 1.25em; 
 
} 
 

 
/* Nav */ 
 
.tabs nav { 
 
\t text-align: center; 
 
    float: left; 
 
} 
 

 
.tabs nav ul { 
 
\t position: relative; 
 
\t display: -ms-flexbox; 
 
\t display: -webkit-flex; 
 
\t display: -moz-flex; 
 
\t display: -ms-flex; 
 
\t display: flex; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
\t max-width: 1200px; 
 
\t list-style: none; 
 
\t -ms-box-orient: horizontal; 
 
\t -ms-box-pack: center; 
 
\t -webkit-flex-flow: row wrap; 
 
\t -moz-flex-flow: row wrap; 
 
\t -ms-flex-flow: row wrap; 
 
\t flex-flow: row wrap; 
 
\t -webkit-justify-content: center; 
 
\t -moz-justify-content: center; 
 
\t -ms-justify-content: center; 
 
\t justify-content: center; 
 
    flex-direction: column; 
 
} 
 

 
.tabs nav ul li { 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t display: block; 
 
\t margin: 0; 
 
\t text-align: center; 
 
\t -webkit-flex: 1; 
 
\t -moz-flex: 1; 
 
\t -ms-flex: 1; 
 
\t flex: 1; 
 
} 
 

 
.tabs nav a { 
 
\t position: relative; 
 
\t display: block; 
 
\t overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t line-height: 2.5; 
 
} 
 

 
.tabs nav a span { 
 
\t vertical-align: middle; 
 
\t font-size: 0.75em; 
 
} 
 

 
.tabs nav li.tab-current a { 
 
\t color: #74777b; 
 
} 
 

 
.tabs nav a:focus { 
 
\t outline: none; 
 
} 
 

 
/* Icons */ 
 
.icon::before { 
 
\t z-index: 10; 
 
\t display: inline-block; 
 
\t margin: 0 0.4em 0 0; 
 
\t vertical-align: middle; 
 
\t text-transform: none; 
 
\t font-weight: normal; 
 
\t font-variant: normal; 
 
\t font-size: 1.3em; 
 
\t font-family: 'stroke7pixeden'; 
 
\t line-height: 1; 
 
\t speak: none; 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-font-smoothing: antialiased; 
 
\t -moz-osx-font-smoothing: grayscale; 
 
} 
 
.icon-upload::before { 
 
\t content: "\e68a"; 
 
} 
 
.icon-tools::before { 
 
\t content: "\e60a"; 
 
} 
 
.icon-plane::before { 
 
\t content: "\e625"; 
 
} 
 
.icon-joy::before { 
 
\t content: "\e6a4"; 
 
} 
 
.icon-plug::before { 
 
\t content: "\e69a"; 
 
} 
 
.icon-home::before { 
 
\t content: "\e648"; 
 
} 
 
.icon-gift::before { 
 
\t content: "\e652"; 
 
} 
 
.icon-display::before { 
 
\t content: "\e65e"; 
 
} 
 
.icon-date::before { 
 
\t content: "\e660"; 
 
} 
 
.icon-config::before { 
 
\t content: "\e666"; 
 
} 
 
.icon-coffee::before { 
 
\t content: "\e669"; 
 
} 
 
.icon-camera::before { 
 
\t content: "\e66f"; 
 
} 
 
.icon-box::before { 
 
\t content: "\e674"; 
 
} 
 

 
/* Content */ 
 
.content-wrap { 
 
\t position: relative; 
 
} 
 

 
.content-wrap section { 
 
\t display: none; 
 
\t margin: 0 auto; 
 
\t padding: 1em; 
 
\t max-width: 1200px; 
 
\t text-align: center; 
 
} 
 

 
.content-wrap section.content-current { 
 
\t display: block; 
 
} 
 

 
.content-wrap section p { 
 
\t margin: 0; 
 
\t padding: 0.75em 0; 
 
\t color: rgba(40,44,42,0.05); 
 
\t font-weight: 900; 
 
\t font-size: 4em; 
 
\t line-height: 1; 
 
} 
 

 
/* Fallback */ 
 
.no-js .content-wrap section { 
 
\t display: block; 
 
\t padding-bottom: 2em; 
 
\t border-bottom: 1px solid rgba(255,255,255,0.6); 
 
} 
 

 
.no-flexbox nav ul { 
 
\t display: block; 
 
} 
 

 
.no-flexbox nav ul li { 
 
\t min-width: 15%; 
 
\t display: inline-block; 
 
} 
 

 
@media screen and (max-width: 58em) { 
 
\t .tabs nav a.icon span { 
 
\t \t display: none; 
 
\t } 
 
\t .tabs nav a:before { 
 
\t \t margin-right: 0; 
 
\t } 
 
} 
 

 
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700); 
 

 
@font-face { 
 
\t font-weight: normal; 
 
\t font-style: normal; 
 
\t font-family: 'codropsicons'; 
 
\t src:url('../fonts/codropsicons/codropsicons.eot'); 
 
\t src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 
 
\t \t url('../fonts/codropsicons/codropsicons.woff') format('woff'), 
 
\t \t url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 
 
\t \t url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 
 
} 
 

 
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 
 
.clearfix:before, .clearfix:after { content: ''; display: table; } 
 
.clearfix:after { clear: both; } 
 

 
body { 
 
\t background: #e7ecea; 
 
\t color: #74777b; 
 
\t font-weight: 400; 
 
\t font-size: 1em; 
 
\t font-family: 'Raleway', Arial, sans-serif; 
 
} 
 

 
a { 
 
\t color: #2CC185; 
 
\t text-decoration: none; 
 
\t outline: none; 
 
} 
 

 
a:hover, a:focus { 
 
\t color: #74777b; 
 
} 
 

 
.support { 
 
\t display: none; 
 
\t color: #ef5189; 
 
\t text-align: left; 
 
\t font-size: 1.5em; 
 
\t max-width: 1200px; 
 
\t margin: 1em auto 0; 
 
\t padding: 0; 
 
} 
 

 
.no-flexbox .support { 
 
\t display: block; 
 
} 
 

 
.hidden { 
 
\t position: absolute; 
 
\t width: 0; 
 
\t height: 0; 
 
\t overflow: hidden; 
 
\t opacity: 0; 
 
} 
 

 
.container > section { 
 
\t padding: 5em 0; 
 
\t font-size: 1.25em; 
 
\t min-height: 100%; 
 
} 
 

 
p { 
 
\t text-align: center; 
 
\t padding: 1em; 
 
} 
 

 
/* Header */ 
 
.codrops-header { 
 
\t padding: 7em 0 3em; 
 
\t letter-spacing: -1px; 
 
} 
 

 
.codrops-header h1 { 
 
\t max-width: 1200px; 
 
\t margin: 0 auto; 
 
\t font-weight: 800; 
 
\t font-size: 5em; 
 
\t line-height: 1; 
 
} 
 

 
.codrops-header h1 span { 
 
\t display: block; 
 
\t font-size: 50%; 
 
\t font-weight: 400; 
 
\t padding-top: 0.325em; 
 
\t color: #bdc2c9; 
 
} 
 

 
/* To Navigation Style */ 
 
.codrops-top { 
 
\t width: 100%; 
 
\t text-transform: uppercase; 
 
\t font-weight: 700; 
 
\t font-size: 0.69em; 
 
\t line-height: 2.2; 
 
} 
 

 
.codrops-top a { 
 
\t display: inline-block; 
 
\t padding: 1em 2em; 
 
\t text-decoration: none; 
 
\t letter-spacing: 1px; 
 
} 
 

 
.codrops-top span.right { 
 
\t float: right; 
 
} 
 

 
.codrops-top span.right a { 
 
\t display: block; 
 
\t float: left; 
 
} 
 

 
.codrops-icon:before { 
 
\t margin: 0 4px; 
 
\t text-transform: none; 
 
\t font-weight: normal; 
 
\t font-style: normal; 
 
\t font-variant: normal; 
 
\t font-family: 'codropsicons'; 
 
\t line-height: 1; 
 
\t speak: none; 
 
\t -webkit-font-smoothing: antialiased; 
 
} 
 

 
.codrops-icon-drop:before { 
 
\t content: "\e001"; 
 
} 
 

 
.codrops-icon-prev:before { 
 
\t content: "\e004"; 
 
} 
 

 
/* Related demos */ 
 
.related { 
 
\t text-align: center; 
 
} 
 

 
.related > a { 
 
\t width: calc(100% - 20px); 
 
\t max-width: 340px; 
 
\t border: 1px solid black; 
 
\t border-color: initial; 
 
\t display: inline-block; 
 
\t text-align: center; 
 
\t margin: 20px 10px; 
 
\t padding: 25px; 
 
} 
 

 
.related a img { 
 
\t max-width: 100%; 
 
\t opacity: 0.8; 
 
} 
 

 
.related a:hover img, 
 
.related a:active img { 
 
\t opacity: 1; 
 
} 
 

 
.related a h3 { 
 
\t margin: 0; 
 
\t padding: 0.5em 0 0.3em; 
 
\t max-width: 300px; 
 
\t text-align: left; 
 
} 
 

 
@media screen and (max-width: 1280px) { 
 
\t .codrops-header h1 { 
 
\t \t padding: 0 0.5em; 
 
\t } 
 
\t .support { 
 
\t \t padding: 0 1.5em; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 30em) { 
 
\t .container > section { 
 
\t \t padding: 3em 0; 
 
\t } 
 
\t .codrops-header { 
 
\t \t padding: 2em 0 1em; 
 
\t } 
 
\t .codrops-header h1 { 
 
\t \t font-size: 3.5em; 
 
\t } 
 
} 
 

 

 
@media screen and (max-width: 25em) { 
 
\t .codrops-icon { 
 
\t \t font-size: 1.5em; 
 
\t } 
 
\t .codrops-icon span { 
 
\t \t display: none; 
 
\t } 
 
}
<div style="height: 100vh; width: 100vw"> 
 
\t <div style="height:97%; width: 100%; border:2px yellow solid"> 
 
\t \t <section> 
 
\t \t \t <div class="tabs tabs-style-iconbox" style=" border:2px blue solid; height:24em"> 
 
\t \t \t \t <nav> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#section-iconbox-1" class="icon icon-home"><span>Home</span></a></li> 
 
\t \t \t \t \t \t <li><a href="#section-iconbox-2" class="icon icon-gift"><span>Deals</span></a></li> 
 
\t \t \t \t \t \t <li><a href="#section-iconbox-3" class="icon icon-upload"><span>Local</span></a></li> 
 
\t \t \t \t \t \t <li><a href="#section-iconbox-4" class="icon icon-coffee"><span>New York</span></a></li> 
 
\t \t \t \t \t \t <li><a href="#section-iconbox-5" class="icon icon-config"><span>Genius</span></a></li> 
 
         <li><a href="#section-iconbox-5" class="icon icon-config"><span>Exclusives</span></a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </nav> 
 
\t \t \t \t <div class="content-wrap"> 
 
\t \t \t \t \t <section id="section-iconbox-1" style="border:2px red solid; height: 17em"><p style="border:2px green solid; height: 3.9em"></p></section> 
 
\t \t \t \t \t <section id="section-iconbox-2"><p>2</p></section> 
 
\t \t \t \t \t <section id="section-iconbox-3"><p>3</p></section> 
 
\t \t \t \t \t <section id="section-iconbox-4"><p>4</p></section> 
 
\t \t \t \t \t <section id="section-iconbox-5"><p>5</p></section> 
 
\t \t \t \t </div><!-- /content --> 
 
\t \t \t </div><!-- /tabs --> 
 
\t \t </section> 
 

 
\t \t </div> 
 
\t </div><!-- /container --> 
 
\t <script src="js/cbpFWTabs.js"></script> 
 
\t <script> 
 
\t \t (function() { 
 

 
\t \t \t [].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) { 
 
\t \t \t \t new CBPFWTabs(el); 
 
\t \t \t }); 
 

 
\t \t })(); 
 
\t </script>

出典

2016-09-28 03:18:04 aavrug

関連する問題

 関連する問題