Question

目前我正在制作导航......但我的设计存在很多问题。现在我想为宽度添加一个过渡。过渡改变了宽度，但方式错误。这就是为什么整个导航向左侧移动20px。这是MyPage +代码

＆＃13;

nav {
    position: fixed;
    left: 50%;
    transform: translate(-100%);
    top: 100px;
}

nav ul {
    list-style: none;
}

nav ul li{
    text-align: center;
}

    
.a_nav{
    background-color: #FFCD57;
    padding: 10px 30px;
    display: block;
    color: #4A3A47;
    text-decoration: none;
    transition: all 0.5s;
    width: 80px;
}

.first{
    border-top-left-radius: 10px;
}

.last{
    border-bottom-left-radius: 10px;
}

.a_nav:hover{
    background-color: #E6F0AF;
    color: black;
    width: 100px;
}

＆＃13;

<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    </head>
    <body>
        
        <nav>
            <ul>
                <li><a class="a_nav first" href="#">Link1</a></li>
                <li><a class="a_nav" href="#">Link1</a></li>
                <li><a class="a_nav" href="#">Link1</a></li>
                <li><a class="a_nav last" href="#">Link1</a></li>
            </ul>
        </nav>

    </body>
</html>

＆＃13;

Answer 1

您可以尝试添加

.a_nav:hover{
    margin-left: -20px; /* hoverWidth - normalWidth */
}

＆＃13;

nav {
  position: fixed;
  left: 50%;
  transform: translate(-100%);
  top: 100px;
}
nav ul {
  list-style: none;
}
nav ul li {
  text-align: center;
}
.a_nav {
  background-color: #FFCD57;
  padding: 10px 30px;
  display: block;
  color: #4A3A47;
  text-decoration: none;
  transition: all 0.5s;
  width: 80px;
}
.first {
  border-top-left-radius: 10px;
}
.last {
  border-bottom-left-radius: 10px;
}
.a_nav:hover {
  background-color: #E6F0AF;
  color: black;
  width: 100px;
  margin-left: -20px;
}

＆＃13;

<nav>
  <ul>
    <li><a class="a_nav first" href="#">Link1</a></li>
    <li><a class="a_nav" href="#">Link1</a></li>
    <li><a class="a_nav" href="#">Link1</a></li>
    <li><a class="a_nav last" href="#">Link1</a></li>
  </ul>
</nav>

＆＃13;

菜单转换宽度错误的一面

1 个答案: