代码之家  ›  专栏  ›  技术社区  ›  Gabbykun555

单击按钮后使用jQuery调整div大小

twitter-bootstrap css html jquery javascript
  •  0
  • Gabbykun555  · 技术社区  · 8 年前

    所以我想为网页创建一个可折叠的侧导航栏。导航栏按预期工作,但如何在单击菜单图标时使具有背景图像的div调整大小?折叠导航栏后,我希望背景图像占据100%的宽度。我添加了一些jQuery来在元素上的类之间切换,但div没有改变。

    The code is also here 

    $(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});
    * {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  overflow: hidden; 
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
  transition: .3s;
}

.nav-bar {
  background-color:   #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
  transition: .3s;
}

ul {
  padding: 10% 30%;
  margin-top: 10%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  font-family: Pacifico;
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.space {
  position: relative;
  left: 20px;
}

.active {
  color: navy;
  font-weight: bold;
}

.active:hover {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 17%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color:  #c39bd3;
  opacity: 0.9;
  border: solid 1px #c39bd3;
}

a {
  color: white;
  font-family: Muli;
}

a:hover {
  color: gray;
  text-decoration: none;
}


.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  /*border: solid 1px #17202a;
  border-radius: 0.5em;*/
}

.hide-nav {
  transform: translateX(-100%);
}

.expand-main {
  transform: translateX(-25%);
  width: 100%;
}


@media (min-width: 1024px) and (max-width: 1150px) {
    h1 {
        margin-top: 5%;
        font-size: 2.3em;
    }
    
    .button {
       font-size: 1.1em;
    }
}
@media (min-width: 800px) and (max-width: 1000px) {
  h1 {
    margin-top: 12%;
    font-size: 2em;
  }
  
  .button {
    font-size: 1em;
    margin-top: 20%;
  }
    
  ul li {
    font-size: 0.9em;
  }
}

@media (max-width: 800px) {
  h1 {
    margin-top: 20%;
    font-size: 1.8em;
  }
  
  .button {
    font-size: 0.9em;
    margin-top: 20%;
  }
  
  ul li {
    font-size: 0.7em;
  }
  
  h3 {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .main {
    width: 100%;
  }
  
  .nav-bar {
    display: none;
  }
  
  .menu-icon {
    display: none;
  }
  
  h1 {
    margin-top: 30%;
  }
}
    <!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Website Template 3 with Navbar</title>

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

  <link rel="stylesheet" href="gabsTechSpace.css">

  <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
      
  <link href="https://fonts.googleapis.com/css?family=Muli" type="text/css" rel="stylesheet">
      
  <link href="https://fonts.googleapis.com/css?family=Pacifico" type="text/css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
    <a href=#><h3>Gab's Tech <br><span class="space">Space</span></h3></a>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script  src="gabsTechSpace.js"></script>

</body>
</html>
    4 回复  |  直到 8 年前
        1
  •  0
  •   Sanchit Patiyal    8 年前

    1.js代码中存在打字错误, 

        $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('.main').toggleClass('expand-main'); /*Add .main to toggleClass*/
    });

    2.更正后,从中删除transform属性 

    .expand-main {
     /*transform: translateX(-25%); remove this*/
     width: 100%;
   }
        2
  •  0
  •   Alex    8 年前

    将背景图像添加到占据页面整个宽度的父容器中,例如正文。然后添加封面的背景尺寸:

    https://codepen.io/alexplummer/pen/LOVzKN 

    body {
background: url(..image.jpg);
background-size: cover;
}
        3
  •  0
  •   Wouter Bouwman    8 年前

    唯一需要更改的是主选择器 'main' 到 '.main' 

    $(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});

    https://codepen.io/anon/pen/zPGPGY

        4
  •  0
  •   Mihai T    8 年前

    在您使用的JQ中 main . 但是 主要的 类是否如此使用 .main 相反

    也不要在展开主菜单上使用translateX。将其宽度增加到100%就足够了

    请参阅下面的代码段 

    $(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

  $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('.main').toggleClass('expand-main');
  });
});
    * {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
  overflow: hidden;
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
  transition: .3s;
}

.nav-bar {
  background-color: #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
  transition: .3s;
}

ul {
  padding: 10% 30%;
  margin-top: 10%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  font-family: Pacifico;
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.space {
  position: relative;
  left: 20px;
}

.active {
  color: navy;
  font-weight: bold;
}

.active:hover {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 17%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color: #c39bd3;
  opacity: 0.9;
  border: solid 1px #c39bd3;
}

a {
  color: white;
  font-family: Muli;
}

a:hover {
  color: gray;
  text-decoration: none;
}

.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  /*border: solid 1px #17202a;
  border-radius: 0.5em;*/
}

.hide-nav {
  transform: translateX(-100%);
}

.expand-main {
  width: 100%;
}

@media (min-width: 1024px) and (max-width: 1150px) {
  h1 {
    margin-top: 5%;
    font-size: 2.3em;
  }
  .button {
    font-size: 1.1em;
  }
}

@media (min-width: 800px) and (max-width: 1000px) {
  h1 {
    margin-top: 12%;
    font-size: 2em;
  }
  .button {
    font-size: 1em;
    margin-top: 20%;
  }
  ul li {
    font-size: 0.9em;
  }
}

@media (max-width: 800px) {
  h1 {
    margin-top: 20%;
    font-size: 1.8em;
  }
  .button {
    font-size: 0.9em;
    margin-top: 20%;
  }
  ul li {
    font-size: 0.7em;
  }
  h3 {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .main {
    width: 100%;
  }
  .nav-bar {
    display: none;
  }
  .menu-icon {
    display: none;
  }
  h1 {
    margin-top: 30%;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
  <a href=#><h3>Gab's Tech <br><span class="space">Space</span></h3></a>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
    推荐文章
    xajetin  ·  导航不更改滚动上的颜色
    4 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    4 年前
    Bryan Santos  ·  固定表头与引导
    4 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    4 年前
    tym  ·  根据用户偏好显示字段
    4 年前
    Sheryar Khan  ·  如何仅使用html、css、bootstrap、javascript/jquery创建html页面?
    4 年前
    Pavel  ·  当验证DIV可见时,引导网格会移动
    8 年前
    Sam  ·  在标题中嵌入Bootstrap 3导航栏
    8 年前
    Alexander David  ·  折叠卡打开,然后立即再次关闭
    8 年前
    Sandeep Bhardwaj  ·  div的一致行为,与设备分辨率无关
    8 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号