如何在垂直菜單中放置內容？

Question

我的頁面上有以下垂直菜單。我想在每個菜單中插入內容。我無法理解如何去做？當我點擊菜單1時，它應該顯示頁面右側的內容。

找到截圖。

#button { 
 
    width: 12em; 
 
    border-right: 1px solid #000; 
 
    padding: 0 0 1em 0; 
 
    margin-bottom: 1em; 
 
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; 
 
    background-color: #90bade; 
 
    color: #333; 
 
} 
 
#button ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
} 
 
#button li { 
 
    border-bottom: 1px solid #90bade; 
 
    margin: 0; 
 
    list-style: none; 
 
    list-style-image: none; 
 
} 
 
#button li a { 
 
    display: block; 
 
    padding: 5px 5px 5px 0.5em; 
 
    border-left: 10px solid #1958b7; 
 
    border-right: 10px solid #508fc4; 
 
    background-color: #2175bc; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    width: 100%; 
 
} 
 
html>body #button li a { 
 
    width: auto; 
 
} 
 
#button li a:hover { 
 
    border-left: 10px solid #1c64d1; 
 
    border-right: 10px solid #5ba3e0; 
 
    background-color: #2586d7; 
 
    color: #fff; 
 
}

<div id="button"> 
 
    <ul> 
 
    <li><a href="#">'Menu 1'</a> 
 
    </li> 
 
    <li><a href="#">'Menu 2'</a> 
 
    </li> 
 
    <li><a href="#">'Menu 3'</a> 
 
    </li> 
 
    <li><a href="#">'Menu 4'</a> 
 
    </li> 
 
    <li><a href="#">'Menu 5'</a> 
 
    </li> 
 
    <li><a href="#">'Menu 6'</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

您好見我下面的演示，當您單擊菜單上會顯示內容右側我只是做了這3菜單隻有別人會同樣

使用jQuery要做到這一點很容易

<script> 

$(document).ready(function() { 
$('#button ul li:first').addClass('active'); 
$('.tab-content:not(:first)').hide(); 
$('#button ul li a').click(function (event) { 
    event.preventDefault(); 
    var content = $(this).attr('href'); 
    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 
    $(content).show(); 
    $(content).siblings('.tab-content').hide(); 
    }); 
}); 
</script> 

我加了一個liitle的CSS

.active { 
    font-weight:bold; 
    } 
.section { 
width:350px; 
float:left; 
padding:10px; 
} 
#button { 
float:left; 
} 

也和內容部分

<div id="section-Menu1" class="tab-content"> 
<h2>Menue 1</h2> 
<p>Welcome Menue 1 Text.</p> 
</div> 

一些HTML元素看到下面的小提琴細節

**如果你不想MENU1活躍則只是刪除$('#button ul li:first').addClass('active'); 和下面寫$('.tab-content').hide();代替$('.tab-content:not(:first)').hide();

的希望它可以幫助你 MenuSidebarFiddle

Answer 2

我已經展示了菜單項的這些內容on:hover但你可以click用JavaScript創建。

#button { 
 
    border-right: 1px solid #000; 
 
    padding: 0 0 1em 0; 
 
    margin-bottom: 1em; 
 
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; 
 
    background-color: #90bade; 
 
    color: #333; 
 
} 
 

 
#button ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    position: relative; 
 
} 
 

 
#button li { 
 
    border-bottom: 1px solid #90bade; 
 
    margin: 0; 
 
    list-style: none; 
 
    list-style-image: none; 
 
} 
 

 
#button li a { 
 
    display: block; 
 
    padding: 5px 5px 5px 0.5em; 
 
    border-left: 10px solid #1958b7; 
 
    border-right: 10px solid #508fc4; 
 
    background-color: #2175bc; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    width: 10em; 
 
} 
 

 
#button li a:hover { 
 
    border-left: 10px solid #1c64d1; 
 
    border-right: 10px solid #5ba3e0; 
 
    background-color: #2586d7; 
 
    color: #fff; 
 
} 
 

 
#button li div { 
 
    background: #90bade; 
 
    bottom: 0; 
 
    display: none; 
 
    left: 197px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
#button li:first-child div { 
 
    display: block; 
 
} 
 

 
#button li a:hover ~ div { 
 
    display: block; 
 
}

<div id="button"> 
 
    <ul> 
 
    <li><a href="#">'Menu 1'</a> 
 
     <div> 
 
     content 1 
 
     </div> 
 
    </li> 
 
    <li><a href="#">'Menu 2'</a> 
 
     <div> 
 
     content 2 
 
     </div> 
 
    </li> 
 
    <li><a href="#">'Menu 3'</a> 
 
     <div> 
 
     content 3 
 
     </div> 
 
    </li> 
 
    <li><a href="#">'Menu 4'</a> 
 
     <div> 
 
     content 4 
 
     </div> 
 
    </li> 
 
    <li><a href="#">'Menu 5'</a> 
 
     <div> 
 
     content 5 
 
     </div> 
 
    </li> 
 
    <li><a href="#">'Menu 6'</a> 
 
     <div> 
 
     content 6 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

在嘗試不同這裏是一個辦法，沒有的JavaScript（或jQuery的）來做到這一點。它使用單選按鈕。

body { 
 
    margin: 0; 
 
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; 
 
} 
 
nav.menu { 
 
    width: 10em; 
 
    height: 100vh; 
 
    background-color: #2175bc; 
 
    color: #fff; 
 
    border-right: 1px solid rgba(0, 0, 0, .4); 
 
} 
 
nav.menu label .menu-item { 
 
    width: calc(100%-20px); 
 
    display: block; 
 
    padding: 5px 5px 5px .5em; 
 
    border-bottom: 1px solid #90bade; 
 
    border-left: 10px solid #1958b7; 
 
    border-right: 10px solid #508fc4; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
nav.menu label input[name=menu-input] { 
 
    display: none; 
 
} 
 
nav.menu label .menu-pane { 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    position: fixed; 
 
    text-align: left; 
 
    color: #000; 
 
    padding: 0 20px; 
 
    background: rgba(0, 0, 255, .15); 
 
    left: calc(10em + 1px); 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    transition: opacity .5s ease-in; 
 
} 
 
nav.menu label .menu-item:hover, 
 
nav.menu label input[name=menu-input]:checked ~ .menu-item { 
 
    border-left-color: #1c64d1; 
 
    border-right-color: #5ba3e0; 
 
    background-color: #2586d7; 
 
} 
 
nav.menu label input[name=menu-input]:checked ~ .menu-pane { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
} 
 
nav.menu label input[name=menu-input]:checked ~ .menu-item { 
 
    font-weight: 700; 
 
}

<nav class="menu"> 
 
    <label> 
 
    <input name="menu-input" type="radio" checked> 
 
    <div class=menu-item>Menu 1</div> 
 
    <div class="menu-pane"> 
 
     <h1>Page one</h1> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra mattis ex in tempor. Cras elementum sagittis rutrum. 
 
     </p> 
 
    </div> 
 
    </label> 
 

 
    <label> 
 
    <input name="menu-input" type="radio"> 
 
    <div class=menu-item>Menu 2</div> 
 
    <div class="menu-pane"> 
 
     <h1>Page two</h1> 
 
     <p> 
 
     Ut consectetur, purus eu suscipit ultrices, ligula eros laoreet erat, et lobortis velit tellus et ligula. Donec sed aliquam lacus. 
 
     </p> 
 
    </div> 
 
    </label> 
 

 
    <label> 
 
    <input name="menu-input" type="radio"> 
 
    <div class=menu-item>Menu 3</div> 
 
    <div class="menu-pane"> 
 
     <h1>Page three</h1> 
 
     <p> 
 
     Phasellus ornare ultricies nisi sit amet viverra. Curabitur eleifend urna in massa posuere, vitae aliquet enim tempor. Donec lacinia bibendum purus. 
 
     </p> 
 
    </div> 
 
    </label> 
 

 
    <label> 
 
    <input name="menu-input" type="radio"> 
 
    <div class=menu-item>Menu 4</div> 
 
    <div class="menu-pane"> 
 
     <h1>Page four</h1> 
 
     <p> 
 
     Integer fermentum, diam a semper porttitor, odio dui vulputate elit, a fringilla quam ante ut enim. In pulvinar in mauris ut faucibus. 
 
     </p> 
 
    </div> 
 
    </label> 
 

 
    <label> 
 
    <input name="menu-input" type="radio"> 
 
    <div class=menu-item>Menu 5</div> 
 
    <div class="menu-pane"> 
 
     <h1>Page five</h1> 
 
     <p> 
 
     Fusce sed orci faucibus dolor consequat tempus. Nunc nisl magna, pellentesque et dictum vitae, eleifend et mauris. 
 
     </p> 
 
    </div> 
 
    </label> 
 

 
    <label> 
 
    <input name="menu-input" type="radio"> 
 
    <div class=menu-item>Menu 6</div> 
 
    <div class="menu-pane"> 
 
     <h1>Page six</h1> 
 
     <p> 
 
     Ut dictum commodo consectetur. Aliquam mollis egestas vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </p> 
 
    </div> 
 
    </label> 
 
</nav>

做這樣的事情，這是速度的一般益處。雖然使用起來可能有點混亂。