Question

如何制作它以便我可以同时拥有水平和垂直导航栏？我是一个设计初级的大宝贝，我试图弄清楚我做错了什么，但我不确定如何在多个链接上使用CSS。

<body>
  <div class="horizontallinks">
    <ul>
      <li> link1 </li>
      <li>link 2</li>
      <li>link 3</li>
      <li>
        <link 4</div>
        <div class="verticallinks">
          <ui>
            <li>link a </li>
            <li> link b</li>
            <li> link c </li>
        </div>
    </ul>
</body>

的CSS：

.horizontallinks {
  position: fixed;
  list-style-type: none;
  margin-top: 70px;
  margin-left: 300px;
  padding: 0;
  font-size: 18px;
  overflow: hidden;
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.verticallinks {
  position: fixed;
  list-style-type: none;
  padding: 0;
  font-size: 18px;
  margin-left: 45px;
  margin-top: 165px;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

.horizontallinks {
  position: fixed;
  list-style-type: none;
  margin-top: 70px;
  margin-left: 300px;
  padding: 0;
  font-size: 18px;
  overflow: hidden;
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.verticallinks {
  position: fixed;
  list-style-type: none;
  padding: 0;
  font-size: 18px;
  margin-left: 45px;
  margin-top: 165px;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li {
  float: left;
}
li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

<body>
  <div class="horizontallinks">
    <ul>
      <li>link1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
    </ul>
    <div class="verticallinks">
      <ul>
        <li>link a</li>
        <li>link b</li>
        <li>link c</li>
      </ul>
    </div>
  </div>
</body>

＆＃13;

Answer 1

试试这个

<body>
    <h2 class="horizontallinks">
        <ui class="make-inline"> 
            <li>link1</li>
            <li>link 2</li>
            <li>link 3</li>
            <li>link 4</li>
        </ul>
    </h2>
    <div class="body-wrapper">
        <div class="side-bar"> 
            <ui> 
                <li>link a</li>
                <li>link b</li>
                <li>link c</li> 
            </ul>
        </div>
        <div class="body-style">
            <!-- Body content -->
        </div>
    </div>
</body>

Answer 2

为具有大显示屏的设备创建水平菜单并为具有较小显示屏的设备创建垂直菜单会不会更好？

css media classes（mdn link）可用于此目的。

var close = document.getElementsByClassName("close");
var menu = document.getElementById("menu");
for (var i = 0; i < close.length; i++) {
  close[i].addEventListener("click", function() {
    menu.style.left = "-250px";
  });
}

body {
  margin: 0;
}
#menu {
  display: block;
  border-radius: 5px;
  background-color: #496D89;
  height: 50px;
}
#menu ul {
  font-size: 0em;
  display: block;
  height: 100%;
  font-size: 2rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
#menu ul li {
  line-height: 1.5em;
  display: inline-block;
  padding: 0 0.2em;
  height: 100%;
}
#menu ul li:hover {
  background-color: #294F6D;
  border-radius: 5px;
}
#menu ul li a {
  color: white;
}
#menu ul li a:visited {
  color: #F9CEE7;
}
#menu .close {
  display: none;
}
@media (max-width: 600px) {
  #menu {
    position: absolute;
    display: inline-block;
    width: 300px;
    height: auto;
    transition: left 1s;
  }
  #menu ul {
    width: auto;
  }
  #menu ul li {
    display: block;
  }
  #menu .close {
    display: initial;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    border-radius: 5px;
    border: none;
    background-color: #123652;
    color: white;
    cursor: pointer;
    text-shadow: 2px 2px black;
  }
  .close:active {
    background-color: #042037;
    text-shadow: none;
  }
}

<nav id="menu" style="left:0px;">
  <ul>
    <li><a href="">Home</a>
    </li>
    <li><a href="">Link1</a>
    </li>
    <li><a href="">Link2</a>
    </li>
    <li><a href="">Link3</a>
    </li>
    <li><a href="">Link4</a>
    </li>
    <li><a href="">Link5</a>
    </li>
  </ul>
  <button class="close">X</button>
</nav>

Answer 3

您可以使用我创建的这段代码，我是Bootstrap 4的初学者，因此如果您在下面的代码注释中发现任何问题。谢谢!!!

https://codepen.io/Nisharg/full/yxLgvw

如何同时拥有水平和垂直导航栏

3 个答案: