Question

我刚刚开始我的电子档案袋，我放的第一件事是导航栏。请记住，我绝不是html或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;

}

对于这篇文章的长度感到抱歉，但这是它给我的问题。宽度不正确。我想添加一个方程式，其中图片的宽度是页面的100％除以页面的数量，但我不知道在哪里做。它也似乎只是在一般情况下有缺陷。如果你将鼠标悬停在最后一页上，动画就会出现故障。我确定有一个简单的解决方法，只是玩宽度或东西，但我似乎无法得到它。任何帮助都是适当的

Answer 1

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

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

另外两个条目的示例：

.Navigation {
    width: 1007px;
}

要支持您提供的代码中的13个条目，宽度必须为1373px。

Answer 2

使用这几行，您可以计算每个li的宽度：

<强>的jQuery

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

我希望这会对你有所帮助:)。

Answer 3

Lucas的方法问题是，它不会考虑网站的自定义大小。因此，根据您想要提供的兼容性，您可以使用＆＃34; calc＆＃34;获得你想要的确切尺寸。

这是我设置的代码，如果一个元素悬停，甚至计算大小，所以其他元素的大小都会改变：

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

当然，如果要添加或删除某些元素，则需要调整元素数量。

这是一个小提琴，你可以看到它现在如何运作。 =＆GT; https://jsfiddle.net/bjLsaLav/1/

CSS导航栏动画

3 个答案: