Razvan Alex Razvan Alex - 5 months ago 19
HTML Question

How to display tabbed menu vertically

I have this horizontal tabbed menu and I have been struggling for hours to make it vertical with no result.

Fiddle



(function() {

'use strict';

/**
* tabs
*
* @description The Tabs component.
* @param {Object} options The options hash
*/
var tabs = function(options) {

var el = document.querySelector(options.el);
var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
var activeIndex = 0;
var initCalled = false;

/**
* init
*
* @description Initializes the component by removing the no-js class from
* the component, and attaching event listeners to each of the nav items.
* Returns nothing.
*/
var init = function() {
if (!initCalled) {
initCalled = true;
el.classList.remove('no-js');

for (var i = 0; i < tabNavigationLinks.length; i++) {
var link = tabNavigationLinks[i];
handleClick(link, i);
}
}
};

/**
* handleClick
*
* @description Handles click event listeners on each of the links in the
* tab navigation. Returns nothing.
* @param {HTMLElement} link The link to listen for events on
* @param {Number} index The index of that link
*/
var handleClick = function(link, index) {
link.addEventListener('click', function(e) {
e.preventDefault();
goToTab(index);
});
};

/**
* goToTab
*
* @description Goes to a specific tab based on index. Returns nothing.
* @param {Number} index The index of the tab to go to
*/
var goToTab = function(index) {
if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
tabNavigationLinks[activeIndex].classList.remove('is-active');
tabNavigationLinks[index].classList.add('is-active');
tabContentContainers[activeIndex].classList.remove('is-active');
tabContentContainers[index].classList.add('is-active');
activeIndex = index;
}
};

/**
* Returns init and goToTab
*/
return {
init: init,
goToTab: goToTab
};

};

/**
* Attach to global namespace
*/
window.tabs = tabs;

})();


var myTabs = tabs({
el: '#tabs',
tabNavigationLinks: '.c-tabs-nav__link',
tabContentContainers: '.c-tab'
});

myTabs.init();


(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34160351-1', 'auto');
ga('send', 'pageview');

::after,
::before {
box-sizing: inherit
}
html {
box-sizing: border-box
}
body,
html {
margin: 0;
padding: 0;
height: 100%
}
body {
color: #6d6d6d;
background-color: #fff;
font-family: Oxygen, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.8
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #3b3b3b;
font-weight: 700;
line-height: 1.2
}
a {
color: #dc446e;
text-decoration: none
}
a:hover {
color: #9d1d41
}
b,
strong {
font-weight: 700
}
img {
max-width: 100%;
height: auto
}
.o-container {
margin: 0 auto;
padding: 0 12px;
max-width: 960px
}
@media all and (min-width: 480px) {
.o-container {
padding: 0 24px
}
}
@media all and (min-width: 720px) {
.o-container {
padding: 0 48px
}
}
.c-tabs-nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0
}
.c-tabs-nav__link {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 4px;
padding: 12px;
color: #fff;
background-color: #b3b3b3;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s
}
.c-tabs-nav__link:last-child {
margin-right: 0
}
.c-tabs-nav__link:hover {
color: #6d6d6d
}
.c-tabs-nav__link.is-active {
color: #dc446e;
background-color: #e7e7e7
}
.c-tabs-nav__link i,
.c-tabs-nav__link span {
margin: 0;
padding: 0;
line-height: 1
}
.c-tabs-nav__link i {
font-size: 18px
}
.c-tabs-nav__link span {
display: none;
font-size: 18px
}
@media all and (min-width: 720px) {
.c-tabs-nav__link i {
margin-bottom: 12px;
font-size: 22px
}
.c-tabs-nav__link span {
display: block
}
}
.c-tab {
display: none;
background-color: #e7e7e7
}
.c-tab.is-active {
display: block
}
.c-tab__content {
padding: 1.5rem
}

<div class="o-main">
<div class="o-container">
<div class="o-section">
<div id="tabs" class="c-tabs no-js">
<div class="c-tabs-nav">
<a href="#" class="c-tabs-nav__link is-active">
<i class="fa fa-home"></i>
<span>Home</span>
</a>
<a href="#" class="c-tabs-nav__link">
<i class="fa fa-book"></i>
<span>Books</span>
</a>
<a href="#" class="c-tabs-nav__link">
<i class="fa fa-heart"></i>
<span>Favourites</span>
</a>
<a href="#" class="c-tabs-nav__link">
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
<a href="#" class="c-tabs-nav__link">
<i class="fa fa-cog"></i>
<span>Settings</span>
</a>
</div>
<div class="c-tab is-active">
<div class="c-tab__content">
<h2>Welcome home!</h2>
<p>Home ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>All Books</h2>
<p>Books ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Your Favourites!</h2>
<p>Favourites ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Stay Busy</h2>
<p>Calendar ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Change It Up</h2>
<p>Settings ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
</div>
</div>
</div>
</div>



</div>
</div>
</div>




Answer

since you are using flexbox you need to use flex-wrap: wrap and flex-basis: 100%

ty for your help, it's much better but I'm looking to get the content vertical as well ;)

to make the tabs and the content side by side, add a wrap around the content and give add display:flex to parent, with: flex: 0 0 10% to.c-tabs-nav (or other value that fits you the best) and set in .vertical(new class created) flex: 1

(function() {

  'use strict';

  /**
   * tabs
   *
   * @description The Tabs component.
   * @param {Object} options The options hash
   */
  var tabs = function(options) {

    var el = document.querySelector(options.el);
    var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
    var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
    var activeIndex = 0;
    var initCalled = false;

    /**
     * init
     *
     * @description Initializes the component by removing the no-js class from
     *   the component, and attaching event listeners to each of the nav items.
     *   Returns nothing.
     */
    var init = function() {
      if (!initCalled) {
        initCalled = true;
        el.classList.remove('no-js');

        for (var i = 0; i < tabNavigationLinks.length; i++) {
          var link = tabNavigationLinks[i];
          handleClick(link, i);
        }
      }
    };

    /**
     * handleClick
     *
     * @description Handles click event listeners on each of the links in the
     *   tab navigation. Returns nothing.
     * @param {HTMLElement} link The link to listen for events on
     * @param {Number} index The index of that link
     */
    var handleClick = function(link, index) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        goToTab(index);
      });
    };

    /**
     * goToTab
     *
     * @description Goes to a specific tab based on index. Returns nothing.
     * @param {Number} index The index of the tab to go to
     */
    var goToTab = function(index) {
      if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
        tabNavigationLinks[activeIndex].classList.remove('is-active');
        tabNavigationLinks[index].classList.add('is-active');
        tabContentContainers[activeIndex].classList.remove('is-active');
        tabContentContainers[index].classList.add('is-active');
        activeIndex = index;
      }
    };

    /**
     * Returns init and goToTab
     */
    return {
      init: init,
      goToTab: goToTab
    };

  };

  /**
   * Attach to global namespace
   */
  window.tabs = tabs;

})();


var myTabs = tabs({
  el: '#tabs',
  tabNavigationLinks: '.c-tabs-nav__link',
  tabContentContainers: '.c-tab'
});

myTabs.init();


(function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  }, i[r].l = 1 * new Date();
  a = s.createElement(o),
    m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34160351-1', 'auto');
ga('send', 'pageview');
::after,
::before {
  box-sizing: inherit
}
html {
  box-sizing: border-box
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%
}
body {
  color: #6d6d6d;
  background-color: #fff;
  font-family: Oxygen, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.8
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3b3b3b;
  font-weight: 700;
  line-height: 1.2
}
a {
  color: #dc446e;
  text-decoration: none
}
a:hover {
  color: #9d1d41
}
b,
strong {
  font-weight: 700
}
img {
  max-width: 100%;
  height: auto
}
.o-container {
  margin: 0 auto;
  padding: 0 12px;
  max-width: 960px
}
@media all and (min-width: 480px) {
  .o-container {
    padding: 0 24px
  }
}
@media all and (min-width: 720px) {
  .o-container {
    padding: 0 48px
  }
}
#tabs {
  display: flex
}
.c-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 10%;
  list-style: none;
  margin: 0;
  padding: 0
}
.vertical {
  flex:1;
}
.c-tabs-nav__link {
  flex: 0 0 100%;
  margin-bottom: 4px;
  padding: 12px 0;
  color: #fff;
  background-color: #b3b3b3;
  text-align: center;
  -webkit-transition: color .3s;
  transition: color .3s
}
.c-tabs-nav__link:last-child {
  margin-right: 0
}
.c-tabs-nav__link:hover {
  color: #6d6d6d
}
.c-tabs-nav__link.is-active {
  color: #dc446e;
  background-color: #e7e7e7
}
.c-tabs-nav__link i,
.c-tabs-nav__link span {
  margin: 0;
  padding: 0;
  line-height: 1
}
.c-tabs-nav__link i {
  font-size: 18px
}
.c-tabs-nav__link span {
  display: none;
  font-size: 18px
}
@media all and (min-width: 720px) {
  .c-tabs-nav__link i {
    margin-bottom: 12px;
    font-size: 22px
  }
  .c-tabs-nav__link span {
    display: block
  }
}
.c-tab {
  display: none;
  background-color: #e7e7e7
}
.c-tab.is-active {
  display: block
}
.c-tab__content {
  padding: 1.5rem
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="o-main">
  <div class="o-container">
    <div class="o-section">
      <div id="tabs" class="c-tabs no-js">
        <div class="c-tabs-nav">
          <a href="#" class="c-tabs-nav__link is-active">
            <i class="fa fa-home"></i>
            <span>Home</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-book"></i>
            <span>Books</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-heart"></i>
            <span>Favourites</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-calendar"></i>
            <span>Calendar</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-cog"></i>
            <span>Settings</span>
          </a>
        </div>
        <div class="vertical">
          <div class="c-tab is-active">
            <div class="c-tab__content">
              <h2>Welcome home!</h2>
              <p>Home ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
            </div>
          </div>
          <div class="c-tab">
            <div class="c-tab__content">
              <h2>All Books</h2>
              <p>Books ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
            </div>
          </div>
          <div class="c-tab">
            <div class="c-tab__content">
              <h2>Your Favourites!</h2>
              <p>Favourites ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
            </div>
          </div>
          <div class="c-tab">
            <div class="c-tab__content">
              <h2>Stay Busy</h2>
              <p>Calendar ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
            </div>
          </div>
          <div class="c-tab">
            <div class="c-tab__content">
              <h2>Change It Up</h2>
              <p>Settings ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>