CSS导航栏动画

我刚刚开始了我的电子档案袋，我放的第一件事就是导航栏。在脑海中，我绝不是专家在HTML或CSS，让我首先说，我没有使这个原始。这个例子很不一样，这就是为什么当我想要它的时候遇到了一些问题。反正这里是代码：CSS导航栏动画

HTML

<!DOCTYpe html> 

<html lang="en"> 

<head> 
<meta charset = "utf-8"> 
<link rel="stylesheet" type="text/css" href="CSS.css"/> 
<title>ePortfolio</title> 

</head> 

<body> 

<div class="Navigation"> 
<ul> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">About me</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Games Fundementals</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">System Fundementals</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Programming</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Web Design</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
    <li> 
     <div class="Navagation_Title"> 
      <a href="#">Extra</a> 
     </div> 
     <a href="#"> 
      <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> 
     </a> 
    </li> 
</ul> 
</div> 

</body> 

</html>

这里是这是什么给我的问题

body { 
background: #ccc; 
background-color: #E6E6E6 
} 

* { 
margin: 0; 
padding: 0; 
} 

.Navigation { 
width: 100%; height: 320px; 
overflow: hidden; 

margin: 100px auto; 
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 3); 
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 3); 
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 3); 
} 

.Navigation ul { 
width: 100%; 
} 
.Navigation li { 
position: relative; 
display: block; 
width: 100px; 
float: left; 

border-left: 1px solid #888; 

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); 


transition: all 0.3s; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
} 

.Navigation ul:hover li {width: 60px;} 
.Navigation ul li:hover {width: 640px;} 

.Navigation li img { 
display: block; 
} 

.Navagation_Title { 
background: rgba(0, 0, 0, 0.6); 
position: absolute; 
left: 0; bottom: 0; 
width: 640px; 

} 
.Navagation_Title a { 
display: block; 
color: #fff; 
text-decoration: none; 
padding: 15px; 
font-size: 16px; 

}

对不起这个职位的lengh但继承人的问题，其捐赠的CSS我。宽度不正确。我想添加一个公式，其中图片的宽度是页面的100％除以页面的数量，但我不知道该在哪里做。它也似乎只是在一般生物中的低价车。如果将鼠标悬停在最后一页上，动画将会出现毛刺。我确定有一个简单的解决方法，只是玩宽度或东西，但我似乎无法得到它。任何帮助被认为是

来源

2015-10-20 Will

当你'：hover'一个img？ –

两者兼而有之。如果你只是看着它，它应该保留所有的图像，而不会离开页面。也如果你把鼠标悬停在一个 – Will

原始似乎被设置为与特定宽度（对于.Navigation）和特定数量的条目一起使用。使用导航宽度的百分比几乎总是会导致一些问题。

为了能够安全地添加其他条目，您必须将宽度设置回初始值885px，然后为每个附加条目添加61px。

两个多个条目

实施例：

.Navigation { 
    width: 1007px; 
}

为了支持13项中时所提供的代码，所述宽度必须是1373px。

来源

2015-10-20 17:05:59

好吧，让我试试看，谢谢 – Will

好吧，我试过了，它没有工作，但我做了这个计算。图像宽度= 640px 总图像= 13 所以图像宽度= 640px 图像宽度= 40px 所以总容器宽度= 640 + 40 * 12 = 1120px; （因为会打开12个标签+ 1个图像）默认宽度= 1120/13 = 86px; */ 我这样做，它工作得很好。无论如何，感谢您的帮助 – Will

您不再使用您的问题中提供的代码。那里没有图像的宽度是60px，再加上1px的边框。 –

有了这个几行就可以计算出宽度为每个李：

jQuery的

$(document).ready(function(){ 
    var pics = $("li").size(); 
    var widthNav = $(window).width()/pics; 
});

我希望这可以帮助你一点点:)

来源

2015-10-20 17:22:29

嘿感谢您的帮助。这是我的uni电子组合，第一稿只能使用html和css。甚至没有任何JavaScript。不管怎么样，我都很乐意帮忙， – Will

好的，是静态图片的数量吗？ –

现在他们是 – Will

与方法的问题卢卡斯是，它不占用网站的自定义大小。因此依赖于你想要提供的兼容性，你可以使用“calc”来获得你想要的确切大小。

这里是我的代码设置，即使计算大小，如果一个元素徘徊，因此所有其他的大小将发生变化：

.Navigation li { 
    ... 
    width: calc((100%/13)); 
    box-sizing: border-box; 
    float: left; 
    ... 
} 
.Navigation ul:hover li { 
    width: calc((100% - 640px)/12); 
}

当然

你需要的，如果你愿意调整元素的含量添加或删除一些。

这里是一个小提琴，你可以看到它是如何工作的。 =>https://jsfiddle.net/bjLsaLav/1/

来源

2015-10-20 17:48:40 KroniX

谢谢我会试试这个 – Will

由于某些原因，这使得没有动画。它只是跳跃而不是滑动。它也切断了最后一页，我认为调整宽度的调整会修复，虽然 – Will

您使用哪个浏览器和版本？使用Chrome和Firefox时，动画对我来说工作正常。另外我总是可以看到他们所有的13个。 – KroniX

CSS导航栏动画

回答

相关问题