css 如何在右侧添加导航栏？

t1rydlwq 于 2023-01-14 发布在其他

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

实际上，我正在尝试创建一个网站，在左侧有一个垂直的导航栏，在右侧有一个通知栏。在中间，将有内容。所以左侧和右侧栏将是固定的，但中间或内容区将是滚动的。
我已经尝试了一些东西，但我不能使正确的侧边栏。我真的很感激，如果有人能帮助我。
谢谢你。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Side Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>

<div class="wrapper">
    <div class="sidebar">
        <h2>Left Nav</h2>
        <ul>
            <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
            <li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
            <li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
            <li><a href="#"><i class="fas fa-project-diagram"></i>portfolio</a></li>
            <li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
            <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
            <li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
        </ul> 
        <div class="social_media">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
      </div>
    </div>

    <div class="sidebar2">
      <h2>Right Nav</h2>
      <ul>
          <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
          <li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
          <li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
          <li><a href="#"><i class="fas fa-project-diagram"></i>portfolio</a></li>
          <li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
          <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
          <li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
      </ul> 
      <div class="social_media">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </div>


    <div class="main_content">
        <div class="header">Welcome!! Have a nice day.</div>  
        <div class="info">
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
            Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
            Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
      </div>
    </div>
</div>

</body>
</html>

CSS--

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: #f3f5f9;
}

.wrapper{
  display: flex;
  position: relative;
}

.wrapper .sidebar{
  width: 200px;
  height: 100%;
  background: #000000;
  padding: 30px 0px;
  position: fixed;
}

.wrapper h2{
  color: #bdb8d7;
 
}

.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #bdb8d7;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #594f8d;
}
    
.wrapper .sidebar ul li:hover a{
  color: #fff;
}
 
.wrapper .sidebar .social_media{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.wrapper .sidebar .social_media a{
  display: block;
  width: 40px;
  background: #fdfdff;
  height: 40px;
  line-height: 45px;
  text-align: center;
  margin: 0 5px;
  color: #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.wrapper .main_content{
  width: 100%;
  margin-left: 200px;
}

.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}

想做些像照片一样的东西。

css

来源：https://stackoverflow.com/questions/75088591/how-to-add-a-navigation-bar-on-the-right-side

4条答案

按热度按时间

niknxzdl1#

sidebar2必须与sidebar类似，但添加了right: 0属性：

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body {
  background-color: #f3f5f9;
}

.wrapper {
  display: flex;
  position: relative;
}

.wrapper .sidebar {
  width: 200px;
  height: 100%;
  background: #000000;
  padding: 30px 0px;
  position: fixed;
}

.wrapper h2 {
  color: #bdb8d7;
}

.wrapper .sidebar2 {
  width: 200px;
  height: 100%;
  background: #000000;
  padding: 30px 0px;
  position: fixed;
  right: 0;
}

.main_content {
  padding: 0 210px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Side Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>

<div class="wrapper">
    <div class="sidebar">
        <h2>Left Nav</h2>
        <ul>
            <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
            <li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
            <li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
            <li><a href="#"><i class="fas fa-project-diagram"></i>portfolio</a></li>
            <li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
            <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
            <li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
        </ul> 
        <div class="social_media">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
      </div>
    </div>

    <div class="sidebar2">
      <h2>Right Nav</h2>
      <ul>
          <li><a href="#"><i class="fas fa-home"></i>Home</a></li>
          <li><a href="#"><i class="fas fa-user"></i>Profile</a></li>
          <li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
          <li><a href="#"><i class="fas fa-project-diagram"></i>portfolio</a></li>
          <li><a href="#"><i class="fas fa-blog"></i>Blogs</a></li>
          <li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
          <li><a href="#"><i class="fas fa-map-pin"></i>Map</a></li>
      </ul> 
      <div class="social_media">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </div>


    <div class="main_content">
        <div class="header">Welcome!! Have a nice day.</div>  
        <div class="info">
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
          <div>Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
            Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different.
            Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. Trying to design something different. </div>
      </div>
    </div>
</div>

</body>
</html>

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

2skhul332#

您需要为sidebar2添加以下代码

.wrapper .sidebar2 {
    position: fixed;
    right: 0px;
    background: black;
    padding: 20px;
    height: 100%;
    width: 180px;
}
.wrapper .main_content {
    width: 100%;
    margin-left: 200px;
    margin-right: 180px;
}

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

1szpjjfi3#

然后使用flex-direction：column对左和右进行伸缩

#container {
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

body,
html{
  margin: 0;
  padding: 0;
}

#left,
#right {
  background-color: gray;
  width: 15%;
}

<div id='container'>
  <div id='left'></div>
  <div id='middle'></div>
  <div id='right'></div>
</div>

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

goqiplq24#

.sidebar {
   display: flex;
   position: fixed;
   top: 0;
   left: 0;
}

对边栏2做同样的操作，只是用right改变：0;您可能还需要根据需要更改弯曲方向。

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

我来回答

css 如何在右侧添加导航栏？

4条答案

相关问题

热门标签

最新问答