Question

所以我的导航栏右侧浮动，330px左侧。一切都工作正常，绝对的位置，但我想修复，这里来了问题。我是如何做到的？我也试过各种方法，但它们似乎不起作用我真的希望有一些非常简单的方法，但我无法弄明白。这是我的代码 HTML

<div id="nav" >
    <ul>
        <li><img class="toggle-slide-button" src="assets/images/menu/menutoggle.png" alt=""></li>
        <li><img class="Menu_icon"src="assets/images/menu/Home_icon.png" alt="">
        <div class="menu_text">Home</div>
        <img  class="boxx" src="assets/images/menu/box.png" alt="">

        </li>

    </ul>

</div>

CSS

body{
    overflow-x: hidden;
    background: url(../images/Home/Screen_1/home_final_background.png) 100% 0 fixed;
}
ul{
    list-style-type:none
}
.Menu_icon{
    position: absolute;
    z-index: -1;
}
#nav{ float: right;  z-index: 152; right: -330px; 

    margin: 0;
    padding: 0;
    text-align: initial !important;
    position: fixed;
}
.menu_text{
    color:white;
    font-size:24px;
    height: 132px;
    width: 390px;
    position: absolute;
    margin-left: 80px;
    margin-top: 60px;
    z-index: -2;
}

JS

        $(document).ready(function(){
    var state = true;

    $(".toggle-slide-button").click(function () {
        if (!state) {
            $('#nav').stop().animate({left:330}, 1000);
              state = true;
            }
        else {
              $('#nav').stop().animate({left: 20}, 1000);
              state = false;
            }
    });
    });



 $(document).ready(function(){
    $(".boxx").hover(function() {
        $(this).attr("src","assets/images/menu/box_hover.png");
            }, function() {
        $(this).attr("src","assets/images/menu/box.png");
    });
});

编辑：这是我想做的事情

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



	<style>
	img{
		user-drag: none; 
-moz-user-select: none;
-webkit-user-drag: none;
	}
	body{
		overflow-x: hidden;
		background: url(http://i.imgur.com/z1y0hYN.png) 100% 0 fixed; 
	}
	ul{
		list-style-type:none
	}
	.Menu_icon{
		position: absolute;
		z-index: -1;
	}
	#nav{
		float: right;
		left:330px;
		margin: 0;
        padding: 0;
        position: relative;
	}
	.menu_text{
		color:white;
		font-size:24px;
		height: 132px;
		width: 390px;
		position: absolute;
		margin-left: 80px;
		margin-top: 60px;
		z-index: -2;
	}

	</style>
		<script>
		$(document).ready(function(){
		var state = true;

		$(".toggle-slide-button").click(function () {
		    if (!state) {
		        $('#nav').stop().animate({left:330}, 1000);
		          state = true;
		        }
		    else {
		          $('#nav').stop().animate({left: 20}, 1000);
		          state = false;
		        }
		});
		});
	</script>



<script  type='text/javascript'>
$(document).ready(function(){
	$(".boxx").hover(function() {
		$(this).attr("src","http://i.imgur.com/MlmFvp3.png");
			}, function() {
		$(this).attr("src","http://i.imgur.com/FCKVSFe.png");
	});
});
</script>


















	<div id="nav">
		<ul>
			<li><img class="toggle-slide-button" src="http://i.imgur.com/WsgovYE.png" alt=""></li>
			<li><img class="Menu_icon"src="http://i.imgur.com/rYo7Utj.png" alt="">
			<div class="menu_text">Home</div>
			<img  class="boxx" src="http://i.imgur.com/FCKVSFe.png" alt="">
			
			</li>
			
		</ul>

	</div>

＆＃13;

Answer 1

使用position:fixed时，您可以通过添加：#nav或right: 0（不是两者）来将left: 100%元素放置在屏幕右侧。由于您只希望默认情况下可以看到#nav的一小部分，因此您可以将元素推出屏幕。通过设置负边距，例如：

#nav {
    position: fixed;
    left: 100%;
    width: 400px;
    margin-right: -300px; /* (400px-300) keeps 100px of the element in sight */
}

以下是#nav设置为position:fixed的代码的工作示例：

＆＃13;

$(document).ready(function() {
  var state;

  $(".toggle-slide-button").click(function() {
    if (!state) {
      $('#nav').stop().animate({
        'margin-left': '-330px'
      }, 1000);
      state = true;
    } else {
      $('#nav').stop().animate({
        'margin-left': '-65px'
      }, 1000);
      state = false;
    }
  });
});

$(document).ready(function() {
  $(".boxx").hover(function() {
    $(this).attr("src", "http://i.imgur.com/MlmFvp3.png");
  }, function() {
    $(this).attr("src", "http://i.imgur.com/FCKVSFe.png");
  });
});

＆＃13;

.just-a-dummie-element {
  height: 2600px;
}
body {
  overflow-x: hidden;
  background: url(http://i.imgur.com/z1y0hYN.png) 100% 0 fixed;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.toggle-slide-button {
  display: block;
  cursor: pointer;
}
.Menu_icon {
  position: absolute;
  z-index: -1;
  display: block;
  cursor: pointer;
}
#nav {
  position: fixed;
  top: 40px;
  left: 100%;
  margin: 0 0 0 -65px;
  padding: 0;
}
.menu_text {
  color: white;
  font-size: 24px;
  height: 132px;
  width: 390px;
  position: absolute;
  margin-left: 80px;
  margin-top: 60px;
  z-index: -2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="just-a-dummie-element">..just to make the page loger!</div>

<div id="nav">
  <ul>
    <li>
      <img class="toggle-slide-button" src="http://i.imgur.com/WsgovYE.png" alt="" />
    </li>
    <li>
      <img class="Menu_icon" src="http://i.imgur.com/rYo7Utj.png" alt="" />
      <div class="menu_text">Home</div>
      <img class="boxx" src="http://i.imgur.com/FCKVSFe.png" alt="" />
    </li>
  </ul>
</div>

＆＃13;

另外，只是一个简单的提示：不要使用javascript来更改.boxx :hover的背景，只需使用css。

CSS固定div，浮动左右定位

1 个答案: