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導航欄動畫

回答

相關問題