移动端作业3：利用bootstrap实现响应式滑动菜单

最新推荐文章于 2023-01-10 20:28:48 发布

长河落日#

最新推荐文章于 2023-01-10 20:28:48 发布

阅读量751

点赞数 1

分类专栏：作业练习

本文链接：https://blog.csdn.net/weixin_47065927/article/details/108632988

版权

作业练习专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这里只需引用bootstrap.min.css插件即可

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式滑动菜单</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/mywork.css" />
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/mywork.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 title">
          <p>响应式滑动菜单</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg pad">
          <img src="image/1.png" alt="" class="circuit" />
        </div>
        <!-- first -->
        <div class="col-md-2 item1 col-sm-6 col-xs-12 item">
          <div class="row rela">
            <div class="logo center">
              <img src="image/2.png" alt="" />
            </div>
            <p style="color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 0.5rem">
              Home
            </p>
          </div>
        </div>
        <div class="col-md-2 item2 col-sm-6 col-xs-12 item">
          <!-- second -->
          <div class="row">
            <div class="logo center">
              <img src="image/3.png" alt="" />
            </div>
          </div>

          <div class="row">
            <p style="color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 0.5rem">
              Sevice
            </p>
          </div>
        </div>
        <div class="col-md-2 item3 col-sm-6 col-xs-12 item">
          <!-- third -->
          <div class="row">
            <div class="logo center">
              <img src="image/4.png" alt="" />
            </div>
          </div>

          <div class="row">
            <p style="color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 0.5rem">
              Portfollo
            </p>
          </div>
        </div>
        <div class="col-md-2 item4 col-sm-6 col-xs-12 item">
          <!-- four -->
          <div class="row">
            <div class="logo center">
              <img src="image/5.png" alt="" />
            </div>
          </div>

          <div class="row">
            <p style="color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 0.5rem">
              Blog
            </p>
          </div>
        </div>
        <div class="col-md-2 item5 col-sm-6 col-xs-12 item">
          <!-- five -->
          <div class="row">
            <div class="logo center">
              <img src="image/6.png" alt="" />
            </div>
          </div>

          <div class="row">
            <p style="color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 0.5rem">
              The team
            </p>
          </div>
        </div>
        <div class="col-md-2 item6 col-sm-6 col-xs-12 item">
          <!-- six -->
          <div class="row">
            <div class="logo center">
              <img src="image/2.png" alt="" />
            </div>
          </div>

          <div class="row">
            <p style="color: rgba(255, 255, 255, 0.7); text-align: center; font-size: 0.5rem">
              Contact
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

相应的样式
css:

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
html {
  font-size: 50px;
}
.rela {
  position: relative;
}
.pad {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
@media screen and (min-width: 800px) {
  .container {
    box-shadow: 0 0 15px 4px #666;
  }
  .container:hover {
    box-shadow: 0 0 5px 0px #666;
    transition: all 0.8s;
  }
}
@media screen and (max-width: 799px) and (min-width: 520px) {
  .item:hover {
    opacity: 0.6;
    transition: all 0.8s;
  }
}
@media screen and (max-width: 519px) {
  .item {
    display: none;
  }
}
.container .title {
  height: 1rem;
  background: #f5f5f5;
}
.container .title p {
  text-align: center;
  color: #666;
  letter-spacing: 0.2rem;
  font-size: 0.56rem;
  line-height: 1rem;
}
.container .item1,
.container .item2,
.container .item3,
.container .item4,
.container .item5,
.container .item6 {
  height: 4rem;
}
.container .item1 {
  background-color: #d06503;
}
.container .item2 {
  background-color: #e9931a;
}
.container .item3 {
  background-color: #1691bd;
}
.container .item4 {
  background-color: #166ba2;
}
.container .item5 {
  background-color: #1b3649;
}
.container .item6 {
  background-color: #152836;
}
.container .center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
}
.container .logo {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  margin-top: 0.5rem;
  position: relative;
}
.container .logo img {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

js点击事件：

$(function () {
  $(".circuit").click(function () {
    $(".item").toggle();
  });
});

长河落日#

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端作业3：利用bootstrap实现响应式滑动菜单

这里只需引用bootstrap.min.css插件即可html代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>响应式滑动菜单</title>
复制链接

扫一扫