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

lb3vh1jj 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(219)

我怎样才能让它既有水平导航栏又有垂直导航栏呢？我是一个初学设计的大宝宝，我试图找出我做错了什么，但我不知道如何在多个链接上使用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;
}

一个二个一个一个

css

来源：https://stackoverflow.com/questions/34358708/how-to-have-both-a-horizontal-and-vertical-navigation-bar

2条答案

按热度按时间

i34xakig1#

试试这个

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

赞(0）回复(0）举报 2023-02-01

ix0qys7i2#

为具有大显示屏的设备创建一个水平菜单，为具有较小显示屏的设备创建一个垂直菜单，这不是更好吗？
css media classes（MDN链路）可以用于此。

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>

赞(0）回复(0）举报 2023-02-01

我来回答

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

2条答案

相关问题

热门标签

最新问答