如何使图像侧边栏响应

时间：2016-12-23 06:39:44

标签： html css html5

我做了一个侧边栏。但我无法做出响应，例如自动调整带有屏幕尺寸的侧边栏，在调整屏幕时出现滚动条甚至一点点。任何人都可以帮助我如何实现这一目标。

我也为我制作的代码制作了一个插件。 https://plnkr.co/edit/NRSmWDAJXtgkbr6tdqrh?p=preview

＆＃13;
＆＃13; 
/* Styles go here */

.topbar {
  height: 50px;
  background: #00a99d;
}
.topbar .logo {
  float: left;
  margin: 8px 0px 0px 8px;
}
.topbar .navbar_brand {
  font-size: 18px;
  font-weight: bold;
  color: white;
  padding: 12px 0px 0px 42px;
}
.nav_content {
  float: left;
}
.side_nav {
  width: 100px;
  height: auto;
  text-align: center;
  display: inline-block;
  background-color: #F2F2F2;
  padding: 0;
  /*position: absolute;*/
}
.side_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.side_nav li {
  list-style: none;
}
.side_nav .divider {
  height: 1px;
  margin: 0px 6px 0px 6px;
  overflow: hidden;
  background-color: #d9d9db;
}
.side_nav li a {
  padding: 13px 0px 16px 0px;
  display: block;
  transition: all 0.3s ease;
  font-size: 12px;
  color: black;
}
.side_nav li a:hover {
  background: #C3C3C3;
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.side_nav li a:focus {
  text-decoration: none;
}
.side_nav li a img {
  width: 30px;
}
.side_nav li .nav_title {
  display: block;
  white-space: nowrap;
}
＆＃13; 
<div class="topbar">
  <img src="assets/images/logo_navbar/alphaLogo_nav_30x30.png" class="logo">
  <p class="navbar_brand">DashBoard</p>
</div>
<div class="nav_content">
  <div class="side_nav">
    <ul>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-  set-icons/512/google512x512.png">
          <span class="nav_title">Dashboard</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Audit</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Analytics</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Change</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Cost Analytics</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Governance</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Reports</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a>
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Feedback</span>
        </a>
      </li>
    </ul>
  </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

使用媒体查询..

这样的事情：

@media (min-width: 320px) {
  .side_nav {
    width: 50px;
  }
}
@media (min-width: 481px) {
  .side_nav {
    width: 60px;
  }
}
@media (min-width: 641px) {
  .side_nav {
    width: 70px;
  }
}
@media (min-width: 961px) {
  .side_nav {
    width: 80px;
  }
}
@media (min-width: 1025px) {
  .side_nav {
    width: 90px;
  }
}
@media (min-width: 1281px) {
  .side_nav {
    width: 100px;
  }
}

全屏显示并调整浏览器的效果

/* Styles go here */

.topbar {
  height: 50px;
  background: #00a99d;
}
.topbar .logo {
  float: left;
  margin: 8px 0px 0px 8px;
}
.topbar .navbar_brand {
  font-size: 18px;
  font-weight: bold;
  color: white;
  padding: 12px 0px 0px 42px;
}
.nav_content {
  float: left;
}
.side_nav {
  width: 100px;
  height: auto;
  text-align: center;
  display: inline-block;
  background-color: #F2F2F2;
  padding: 0;
  /*position: absolute;*/
}
.side_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.side_nav li {
  list-style: none;
}
.side_nav .divider {
  height: 1px;
  margin: 0px 6px 0px 6px;
  overflow: hidden;
  background-color: #d9d9db;
}
.side_nav li a {
  padding: 13px 0px 16px 0px;
  display: block;
  transition: all 0.3s ease;
  font-size: 12px;
  color: black;
}
.side_nav li a:hover {
  background: #C3C3C3;
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.side_nav li a:focus {
  text-decoration: none;
}
.side_nav li a img {
  width: 30px;
}
.side_nav li .nav_title {
  display: block;
  white-space: nowrap;
}
@media (min-width: 320px) {
  .side_nav {
    width: 50px;
  }
}
@media (min-width: 481px) {
  .side_nav {
    width: 60px;
  }
}
@media (min-width: 641px) {
  .side_nav {
    width: 70px;
  }
}
@media (min-width: 961px) {
  .side_nav {
    width: 80px;
  }
}
@media (min-width: 1025px) {
  .side_nav {
    width: 90px;
  }
}
@media (min-width: 1281px) {
  .side_nav {
    width: 100px;
  }
}
<div class="topbar">
  <img src="assets/images/logo_navbar/alphaLogo_nav_30x30.png" class="logo">
  <p class="navbar_brand">DashBoard</p>
</div>
<div class="nav_content">
  <div class="side_nav">
    <ul>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-  set-icons/512/google512x512.png">
          <span class="nav_title">Dashboard</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Audit</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Analytics</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Change</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Cost Analytics</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Governance</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#">
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Reports</span>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a>
          <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/google512x512.png">
          <span class="nav_title">Feedback</span>
        </a>
      </li>
    </ul>
  </div>

答案 1 :(得分：-1)

使用bootstrap框架。它已经响应了。

http://getbootstrap.com/getting-started/

阅读此处的文档

相关问题
最新问题