-3
私はこの水平タブ付きメニューを持っていますが、私はそれを垂直にするのに何時間も苦労しています。ケースで更新----------------------------------タブ付きメニューを垂直に表示する方法
（jfiddleソースコードあなたのそれを探して---------------------------------------------- -----）
(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>
だから、何の問題がある、と何が動作していませんか？ – Sablefoste
問題はサイドバーのように垂直にすることができないことです。私はまだCSSを修正しようとしていますが、おそらく私は終わりまでに成功しています。 –
問題が の文が単純に「うまくいかない」ときに解決策を提示するのは難しいです。 質問を編集して、 のどのようなことが起こるのか、実際の の結果とどのように違うのかをより詳しく説明してください。良いものを作るためのヒントについては、[ask]を参照してください。 –