带有 CSS动画的导航栏移动下的页面内容

我需要有关网页顶部的水平导航栏的帮助。我正在使用 CSS 动画使导航按钮的字体大小在焦点和悬停时增加。我只希望导航栏在聚焦或悬停时移动。我唯一的问题是,当我的导航按钮聚焦或悬停时,导航栏下方的内容会向下移动。我只需要帮助,使我的导航栏下方的内容受到影响。

我需要有关网页顶部的水平导航栏的帮助。我正在使用 CSS 动画使导航按钮的字体大小在焦点和悬停时增加。我只希望导航栏在聚焦或悬停时移动。我唯一的问题是,当我的导航按钮聚焦或悬停时,导航栏下方的内容会向下移动。我只需要帮助,使我的导航栏下方的内容受到影响。

    /*NBAR CSS STARTS HERE*/
    nav {
    margin-left: 15%;
    }
    .navbar {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    display: inline;
    text-align: center;
    }
    .navbar li{
    display: inline;
    }
    .nav-link a {
      margin-left: 1%;
      padding: 14px 30px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.548);
      font-size: 20px;
      color: rgb(255, 255, 255);
      border-radius: 5px;
      font-weight: bold;
      letter-spacing: 5px; 
  }
  
  .nav-link a:hover, .nav-link a:focus {
    animation: grow 0.5s;
    animation-fill-mode: forwards;
  }
  
  /*nav-bar css ends here*/

是我网站上一个网页的 HTML。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta cht="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta name="author" content="Maurice Rogers">
    <title>My Short Bio</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="backgroundImg">
    <header id="page-top">
    <h1><span>Maurice Rogers</span></h1>
    <nav>
    <ul class="navbar">
        <li class="nav-link"><a class="nav-link" 
    href="index.html">Bio</a></li>
        <li class="nav-link"><a class="nav-link" href="technical- 
    resume.html">Technical Resume</a></li>
        <li class="nav-link"><a class="nav-link" href="my- 
    animations.html">Animations</a></li>
        <li class="nav-link"><a class="nav-link" href="me- 
    surfing.html">Surfing</a></li>          
    </ul>
    </nav>
    </header>   
    <main>
    <br/>
    <h2><span>My Bio</span></h2>
    <br/>
    <div class="box">
    <p>I love to code. I find it to be very fun, interesting, and 
    rewarding. You can <a href="technical-resume.html" 
    accesskey="t">find my Technical Resume here</a>. I also have other 
    cool interests. I've spent many hours  animations. You can 
    <a href="my-animations.html" accesskey="a">view my animations 
    here</a>. I've been surfing all my life. It really is one of my 
    favorite things to do. You can <a href="me-surfing.html" 
    accesskey="s">see me surfing here</a>.</p>
    </div>
    </main>
    <footer>
    <nav>
    <a class="ftr-nav-link" href="index.html">Back to top</a>
    </nav>
    <h4 class="copy-right">&copy; 2021 Maurice Rogers</h4>
    </footer>
    </div>
    </body>
    </html>
  
2

你可以试着在你的 ul 标签上放置一个位置:绝对,然后从那里开始。

1

我不得不修改您的代码以获得所需的结果。我使用transform: scale()来增加字体大小而不影响按钮。显然,如果您使用display: inline,那么scale()将无常工作,因此我更改了您的代码并使用 flexbox>属性。您的 html 也有一些问题,您在a上声明

 /*NBAR CSS STARTS HERE*/
    nav {
    margin-left: 15%;
    }
    .navbar {
    list-style: none;
    padding: 0px;
    overflow: hidden;
    display: flex;
    text-align: center;
    }
    .nav-link {
      margin-left: 1%;
      padding: 14px 30px;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.548);
      font-size: 20px;
      color: rgb(255, 255, 255);
      border-radius: 5px;
      font-weight: bold;
      letter-spacing: 5px; 
      transition: transform .5s;
  }
.nav-link a {
  display: block;
  color: white;
  text-decoration: none;
}
  
  .nav-link a:hover{
    transform: scale(1.2);
  }
  
  /*nav-bar css ends here*/
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta cht="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta name="author" content="Maurice Rogers">
    <title>My Short Bio</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="backgroundImg">
    <header id="page-top">
    <h1><span>Maurice Rogers</span></h1>
    <nav>
    <ul class="navbar">
        <li class="nav-link"><a  
    href="index.html">Bio</a></li>
        <li class="nav-link"><a  href="technical- 
    resume.html">Technical Resume</a></li>
        <li class="nav-link"><a  href="my- 
    animations.html">Animations</a></li>
        <li class="nav-link"><a  href="me- 
    surfing.html">Surfing</a></li>          
    </ul>
    </nav>
    </header>   
    <main>
    <br/>
    <h2><span>My Bio</span></h2>
    <br/>
    <div class="box">
    <p>I love to code. I find it to be very fun, interesting, and 
    rewarding. You can <a href="technical-resume.html" 
    accesskey="t">find my Technical Resume here</a>. I also have other 
    cool interests. I've spent many hours  animations. You can 
    <a href="my-animations.html" accesskey="a">view my animations 
    here</a>. I've been surfing all my life. It really is one of my 
    favorite things to do. You can <a href="me-surfing.html" 
    accesskey="s">see me surfing here</a>.</p>
    </div>
    </main>
    <footer>
    <nav>
    <a class="ftr-nav-link" href="index.html">Back to top</a>
    </nav>
    <h4 class="copy-right">&copy; 2021 Maurice Rogers</h4>
    </footer>
    </div>
    </body>
    </html>
  

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(132)
如何在asyncssh中运行一个进程并永远观察其输出
上一篇
网格::右对齐网格项(align grid css)
下一篇

相关推荐

  • css参考手册:标题

    CSS参考手册是一本关于CSS语言的参考书,由W3C组织出版,包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考,可以帮助开发者快速学习和使用CSS语言,从而更好地创建网页。…

    2023-06-29 01:40:51
    0 61 18
  • css登录界面模板代码:登录你的账号,开启新的旅程

    CSS登录界面模板代码是一种使用CSS来制作登录界面的代码,它可以帮助开发者快速制作出美观且易于使用的登录界面,以下是一个简单的CSS登录界面模板代码:…

    2023-05-06 06:17:54
    0 93 67
  • html引用css文件:My Webpage Welcome to My Webpage!

    示例示例在html文件中引用css文件,可以使用标签,代码示例如下:其中,rel属性表示关系,type属性表示文件的类型,href属性表示css文件的路径。…

    2023-06-21 12:33:03
    0 45 41
  • css鼠标移入移出:标题

    CSS鼠标移入移出,可以使用CSS中的:hover伪类来实现,代码如下:上面的代码表示,当鼠标移入.example元素时,将其文字颜色改为白色。…

    2023-04-28 12:13:20
    0 99 90
  • css自动换行:标题

    CSS自动换行可以使用CSS的word-wrap属性来实现,代码如下:该属性有两个可选值:…

    2023-11-21 11:03:53
    0 14 27
  • css布局技巧:和3个段落 标题 段落1 段落2 段落3

    CSS布局技巧是指使用CSS来实现页面布局的方法。这些技巧可以帮助开发人员快速实现页面布局,并且可以更好地控制页面的外观和行为。…

    2023-04-17 01:31:53
    0 12 39
  • css 超出自动换行:这是一个标题

    css 超出自动换行,可以使用 css 的 word-wrap 属性来实现,该属性允许长单词或 URL 地址换行到下一行。代码如下:…

    2023-04-08 01:41:59
    0 87 66
  • css出现滚动条控制页面内容的浏览

    当页面内容超出浏览器窗口的大小,会出现滚动条,可以通过CSS来控制。例如:…

    2023-06-05 08:29:43
    0 77 35

发表评论

登录 后才能评论

评论列表(64条)