CSS Навигационная панель анимации

Я только что начал свой eportfolio, и первое, что я поставил, это панель навигации. Говорю, что я ни в коем случае не специалист по 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>

А вот CSS, который является то, что дает мне проблемы

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 этого поста, но ЭРВО проблемы, ее подачи меня. Ширина не верна. Я хотел бы добавить уравнение, где ширина изображений составляет 100% страницы, разделенной на количество страниц, но я не уверен, где это сделать. Это также просто кажется abit багги в genral. если вы наведите курсор на последнюю страницу, анимация будет глючной. Я уверен, что есть легкое исправление, просто играя с шириной или чем-то, но я не могу ее получить. любая помощь заявлена

источник

2015-10-20 Will

Вы хотите это уравнение, когда вы ': hover' a img? –

хорошо обе. если вы просто смотрите на него, он должен отображать все изображения, не выходя из страницы. а также если вы наведите курсор на один – Will

Оригинал, кажется, настроен для использования с определенной шириной (для .Navigation) и определенного количества записей. Использование процентов для ширины навигации почти всегда приводит к чему-то глючному.

Чтобы иметь возможность безопасно добавлять дополнительные записи, вам нужно будет установить ширину обратно на исходное значение 885px, а затем добавить 61px для каждой дополнительной записи.

Пример более двух записей:

.Navigation { 
    width: 1007px; 
}

Для поддержки 13 записей, как в коде, при условии, ширина должна быть 1373px.

источник

2015-10-20 17:05:59

ok, позвольте мне попробовать, спасибо – Will

Хорошо, я попробовал, и он не работал, но я сделал это вычисление. Ширина изображения = 640px всего изображений = 13 так ширина зависшего изображения = 640px ширина неизогнутого изображения = 40px так общая ширина контейнера = 640 + 40 * 12 = 1120px; (12 из-за того, что будет открыто 12 вкладок + 1 изображение) default width = 1120/13 = 86px; */ Я сделал это, и он работает очень красиво. спасибо за помощь в любом случае – Will

Вы больше не использовали код, указанный в вашем qustion. Un-hovered изображения есть 60px wide, плюс 1px граница. –

С этим нескольких строк вы можете рассчитать ширину для каждой Li:

JQuery

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

Я надеюсь, что это поможет вам немного :)

источник

2015-10-20 17:22:29

эй спасибо за помощь. это мой eportfolio для uni, и первый черновик может использовать только html и css. даже не javascript. Я все равно прибегаю к помощи, но – Will

Хорошо, это число статических фотографий? –

пока что они – Will

Проблемы с подходом от Lucas, что он не принимает пользовательский размер веб-сайта в учетной записи. В зависимости от совместимости, которую вы хотите дать, вы можете использовать «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

по какой-то причине это не делает анимации. он просто прыгает, а не скользит. Он также отсекает последнюю страницу, я думаю, что abit регулировки ширины исправит это, хотя – Will

Какой браузер и версия вы используете? с Chrome и Firefox анимация отлично работает для меня. Также я всегда вижу все 13 из них. – KroniX

CSS Навигационная панель анимации

ответ

Смежные вопросы