如何垂直显示标签式菜单

时间：2016-06-20 15:57:52

标签： html css css3 flexbox navbar

我有这个水平标签菜单，我一直在努力让它垂直，没有结果。 ----------------------------------

http://jsfiddle.net/u42vvvq2/

（jfiddle源代码更新，以防你寻找它------------------------------------ ---------------）

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>

1 个答案:

答案 0 :(得分：1)

因为您使用的是flexbox，所以您需要使用flex-wrap: wrap和flex-basis: 100%

  为了你的帮助，它要好得多，但我希望获得内容   垂直;）

将标签和内容并排放置，在内容周围添加一个环绕内容并添加display:flex给父级，其中：flex: 0 0 10%到.c-tabs-nav（或其他适合的值）你最好的）并在.vertical（新课程创建）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>

相关问题
最新问题