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

时间：2017-10-31 15:40:09

标签： javascript jquery html css twitter-bootstrap

所以我想为网页创建一个可折叠的侧面导航栏。导航栏按预期工作，但是如何在单击菜单图标时调整背景图像的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 个答案:

答案 0 :(得分：0)

将背景图像添加到父容器中，该容器占据页面的整个宽度，例如正文。然后添加封面的背景大小：

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

body {
background: url(..image.jpg);
background-size: cover;
}

答案 1 :(得分：0)

唯一需要做的更改是从'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

答案 2 :(得分：0)

1. js代码中存在拼写错误

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

2.纠正后从

中删除转换属性 
.expand-main {
     /*transform: translateX(-25%); remove this*/
     width: 100%;
   }

答案 3 :(得分：0)

在JQ中，您使用main。但是main是一个类，所以请改用.main。

也不要在expand-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>

相关问题
最新问题