Question

我的页面上有以下垂直菜单。我想在每个菜单中插入内容。我无法理解怎么做？当我点击菜单1时，它应显示页面右侧的内容。

找到截图。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我已经显示了此内容on:hover的菜单项，但您可以使用javascript创建click。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你好看到我的下面的演示，当你点击菜单它会显示内容右侧我只为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>

我添加了一个licle Css

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

还有一些内容部分的html元素

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

请参阅以下小提琴详细信息

**如果你不想让menu1处于活动状态，那么只需删除$('#button ul li:first').addClass('active'); 并在下面写$('.tab-content').hide();而不是$('.tab-content:not(:first)').hide();

希望它能帮到你 MenuSidebarFiddle

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>

一般来说，做这样的事情的好处就是速度。虽然使用它可能有点混乱。

如何在垂直菜单中放置内容？

3 个答案: