タブを編集するHTML/jQuery

Question

テンプレートを作成する際に助けが必要です - 右、左、フッターのページに7つのタブを追加したいのですが、どのようにするのか分かりません。前もって感謝します！ここでのコード：

のjQuery：

var Nav = (function() { 
    var 
    nav   = $('.css-tab'), 
    section = $('.section'), 
    link  = nav.find('.css-tab__link'), 
    navH  = nav.innerHeight(), 
    isOpen = true, 
    hasT  = false; 

    var toggleNav = function() { 
    nav.toggleClass('css-tab--active'); 
    shiftPage(); 
    }; 


    var switchPage = function(e) { 
    var self = $(this); 
    var i = self.parents('.css-tab__item').index(); 
    var s = section.eq(i); 
    var a = $('section.section--active'); 
    var t = $(e.target); 

    if (!hasT) { 
     if (i == a.index()) { 
     return false; 
     } 
     a 
     .addClass('section--hidden') 
     .removeClass('section--active'); 

     s.addClass('section--active'); 

     hasT = true; 

     a.on('transitionend webkitTransitionend', function() { 
     $(this).removeClass('section--hidden'); 
     hasT = false; 
     a.off('transitionend webkitTransitionend'); 
     }); 
    } 

    return false; 
    }; 

    var keyNav = function(e) { 
    var a = $('section.section--active'); 
    var aNext = a.next(); 
    var aPrev = a.prev(); 
    var i = a.index(); 


    if (!hasT) { 
     if (e.keyCode === 37) { 

     if (aPrev.length === 0) { 
      aPrev = section.last(); 
     } 

     hasT = true; 

     aPrev.addClass('section--active'); 
     a 
      .addClass('section--hidden') 
      .removeClass('section--active'); 

     a.on('transitionend webkitTransitionend', function() { 
      a.removeClass('section--hidden'); 
      hasT = false; 
      a.off('transitionend webkitTransitionend'); 
     }); 

     } else if (e.keyCode === 39) { 

     if (aNext.length === 0) { 
      aNext = section.eq(0) 
     } 


     aNext.addClass('section--active'); 
     a 
      .addClass('section--hidden') 
      .removeClass('section--active'); 

     hasT = true; 

     aNext.on('transitionend webkitTransitionend', function() { 
      a.removeClass('section--hidden'); 
      hasT = false; 
      aNext.off('transitionend webkitTransitionend'); 
     }); 

     } else { 
     return 
     } 
    } 
    }; 

    var bindActions = function() { 
    link.on('click', switchPage); 
    $(document).on('ready', function() { 
     page.css({ 
     'transform': 'translateY(' + navH + 'px)', 
     '-webkit-transform': 'translateY(' + navH + 'px)' 
     }); 
    }); 
    $('body').on('keydown', keyNav); 
    }; 

    var init = function() { 
    bindActions(); 
    }; 

    return { 
    init: init 
    }; 

}()); 

Nav.init(); 

CSS：

* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: rgba(255,255,255,0); 
} 
body { 
    line-height: 1.5; 
    font-family: "futura-pt", 'Century Gothic', 'Arial', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    color: #fff; 
    background: #1a1a1a; 
} 
a { 
    text-decoration: none; 
    color: inherit; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.css-tab { 
    will-change: transform; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1; 
    background: #1a1a1a; 
    -webkit-transform: translateY(-100%); 
      transform: translateY(-100%); 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab--active { 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
} 
.css-tab__list { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.css-tab__item { 
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    position: relative; 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab__item:hover { 
    opacity: 0.75; 
} 
.css-tab__thumb { 
    display: block; 
    height: 80px; 
    background: #dc143c; 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.css-tab__thumb:before { 
    content: attr(data-letter); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
    font-size: 70px; 
    text-transform: uppercase; 
    opacity: 0; 
} 
.css-tab__label { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #e6e6e6; 
    margin: 0; 
} 
@media (max-width: 850px) { 
    .css-tab__label { 
    font-size: 14px; 
    } 
} 
@media (max-width: 720px) { 
    .css-tab__label { 
    display: none; 
    } 
    .css-tab__thumb { 
    height: 60px; 
    } 
    .css-tab__thumb:before { 
    font-size: 24px; 
    opacity: 0.7; 
    } 
} 
.tab-content { 
    height: 100vh; 
    will-change: transform; 
    -webkit-perspective: 400px; 
      perspective: 400px; 
    overflow: hidden; 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.section { 
    will-change: transform; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    overflow: hidden; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
     -ms-flex-align: center; 
      align-items: center; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    text-align: center; 
    background: #fff; 
    -webkit-transform: translateX(100%); 
      transform: translateX(100%); 
    -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.section--hidden { 
    -webkit-transform: translateX(-100%); 
      transform: translateX(-100%); 
} 
.section--active { 
    -webkit-transform: translateX(0) rotateY(0); 
      transform: translateX(0) rotateY(0); 
    z-index: 2; 
} 
.section__wrapper { 
    width: 100%; 
    max-width: 800px; 
    padding: 0 8vw; 
    position: relative; 
} 
.section__title { 
    margin: 0 0 25px 0; 
    font-size: 48px; 
    font-weight: normal; 
    text-transform: uppercase; 
    letter-spacing: 5px; 
} 
.section__title:before { 
    content: ''; 
    position: absolute; 
    top: 5rem; 
    left: 45%; 
    margin: auto; 
    width: 10%; 
    height: 2px; 
    background: #fff; 
} 
@media (max-width: 720px) { 
    .section__title { 
    font-size: 28px; 
    } 
    .section__title:before { 
    top: 3.25rem; 
    } 
} 
.section p { 
    margin: 0 0 25px 0; 
    font-family: 'Georgia'; 
    font-size: 18px; 
    color: #fff; 
    opacity: 0.55; 
} 
@media (max-width: 720px) { 
    .section p { 
    font-size: 16px; 
    } 
} 
.section p:last-child { 
    margin-bottom: 0; 
} 
.color1 { 
    background: #1b1f25; 
} 
.color2 { 
    background: #e74c3c; 
} 
.color3 { 
    background: #3498db; 
} 
.color4 { 
    background: #9b59b6; 
} 
.color5 { 
    background: #1bc885; 
} 
.color6 { 
    background: #dfb816; 
} 
.color7 { 
    background: #008B8B; 
} 
.logo { 
    position: fixed; 
    top: 100px; 
    right: 20px; 
    z-index: 2; 
} 
@media (max-width: 720px) { 
    .logo { 
    top: 110px; 
    right: 50%; 
    margin-right: -20px; 
    } 
} 
.logo img { 
    width: 45px; 
    -webkit-transform: rotate(0); 
      transform: rotate(0); 
    -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); 
} 
.logo img:hover { 
    -webkit-transform: rotate(180deg) scale(1.1); 
      transform: rotate(180deg) scale(1.1); 
} 

HTML：

<nav class="css-tab css-tab--active"> 
    <ul class="css-tab__list"> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color1" data-letter="1"></div> 
     <p class="css-tab__label">1</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color2" data-letter="2"></div> 
     <p class="css-tab__label">2</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color3" data-letter="3"></div> 
     <p class="css-tab__label">3</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color4" data-letter="4"></div> 
     <p class="css-tab__label">4</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color5" data-letter="5"></div> 
     <p class="css-tab__label">5</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color6" data-letter="6"></div> 
     <p class="css-tab__label">6</p> 
     </a> 
    </li> 
    <li class="css-tab__item"> 
     <a href="" class="css-tab__link"> 
     <div class="css-tab__thumb color7" data-letter="7"></div> 
     <p class="css-tab__label">7</p> 
     </a> 
    </li> 
    </ul> 


    <a href="http://www.jquery-az.com" class="logo" target="_blank"> 
    <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
    </a> 
</nav> 

<div class="tab-content"> 
    <section class="section section--active color1" data-letter="a"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">1</h1> 
     <section id="about"> 
       <h2><a href="#about">1</a></h2> 
       <p>Test 
       </p> 
      </section> 
    </article> 
    </section> 
    <section class="section color2" data-letter="p"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">2</h1> 
     <p>2</p> 
    </article> 
    </section> 
    <section class="section color3" data-letter="q"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">3</h1> 
     <p>3</p> 
    </article> 
    </section> 
    <section class="section color4" data-letter="e"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">4</h1> 
     <p>4</p> 
    </article> 
    </section> 
    <section class="section color5" data-letter="s"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">5</h1> 
     <p>5</p> 
    </article> 
    </section> 
    <section class="section color6"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">6</h1> 
     <p>7</p> 
    </article> 
    </section> 
    <section class="section color7"> 
    <article class="section__wrapper"> 
     <h1 class="section__title">7</h1> 
     <p>7</p> 
    </article> 
    </section> 
</div> 

私はVになりますエリーはあなたの助けに感謝します。

Answer 1

bootstrapなどのライブラリやこれを作成するための資料を使用できませんか？またはMaterial With Angularを使用できます。フレームワークを使うことは便利であり、コミュニティの助けとドキュメンテーションに役立ちます。