使用HTML、CSS和JavaScript创建可悬停的侧边导航栏


导航栏是网页的一部分,它包含指向网站中相应部分/页面的链接,帮助用户快速轻松地浏览网站。导航栏的实现方式有很多种,但传统实现方式是水平和垂直栏。

在这篇文章中,我们将使用HTML、CSS和JavaScript设计一个垂直侧边导航栏。

创建可悬停的侧边导航栏

以下是使用HTML、CSS和JavaScript设计可悬停侧边导航按钮的步骤:

  • 步骤1 − 添加以下HTML代码。

<body> <div class="sidenav"> <a href="#" id="home" onclick="showContent('homeContent')">Home</a> <a href="#" id="codingground" onclick="showContent('codingGroundContent')">Coding Ground</a> <a href="#" id="jobs" onclick="showContent('jobsContent')">Jobs</a> <a href="#" id="library" onclick="showContent('libraryContent')">Library</a> <a href="#" id="articles" onclick="showContent('articlesContent')">Articles</a> <a href="#" id="corporatetraining" onclick="showContent('corporateTrainingContent')">Corporate Training</a> </div> <div id="homeContent" style="display: none;"> <h2>Home Content</h2> <p>This is the content for the Home page.</p> </div> <div id="codingGroundContent" style="display: none;"> <h2>Coding Ground Content</h2> <p>This is the content for the Coding Ground page.</p> </div> <div id="jobsContent" style="display: none;"> <h2>Jobs Content</h2> <p>This is the content for the Jobs page.</p> </div> <div id="libraryContent" style="display: none;"> <h2>Library Content</h2> <p>This is the content for the Library page.</p> </div> <div id="articlesContent" style="display: none;"> <h2>Articles Content</h2> <p>This is the content for the Articles page.</p> </div> <div id="corporateTrainingContent" style="display: none;"> <h2>Corporate Training Content</h2> <p>This is the content for the Corporate Training page.</p> </div> </body>
  • 步骤2 − 添加以下CSS代码。

对于悬停效果,我们使用了CSS:hover选择器。 每当我们将鼠标悬停在元素上时,:hover选择器将选择它。

<style> .sidenav a { position: absolute; left: -80px; transition: 0.1s; padding: 14px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 0px 25px 25px 0px; } .sidenav a:hover { left: 0; } #home { top: 20px; background-color: #003300; } #codingground { top: 80px; background-color: #004a00; } #jobs { top: 165px; background-color: #006100; } #library { top: 225px; background-color: #007800; } #articles { top: 285px; background-color: #008f00; } #corporatetraining { top: 345px; background-color: #00ad00; } #homeContent, #codingGroundContent, #jobsContent, #libraryContent, #articlesContent, #corporateTrainingContent{ margin: auto; display: flex; width: 60%; text-align: center; display: none; } </style>
  • 步骤3 − 包含以下脚本

<script> function showContent(contentId) { var content = document.getElementById(contentId); content.style.display = "block"; } </script>

完整示例

现在,让我们组合以上所有HTML、CSS和JavaScript代码块:

Open Compiler
<!DOCTYPE html> <html> <head> <title>Hoverable Side Navigation with HTML, CSS and JavaScript</title> <link rel="stylesheet" type="text/css" href="style.css"> <style> .sidenav a { position: absolute; left: -80px; transition: 0.1s; padding: 14px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 0px 25px 25px 0px; } .sidenav a:hover { left: 0; } #home { top: 20px; background-color: #003300; } #codingground { top: 80px; background-color: #004a00; } #jobs { top: 165px; background-color: #006100; } #library { top: 225px; background-color: #007800; } #articles { top: 285px; background-color: #008f00; } #corporatetraining { top: 345px; background-color: #00ad00; } #homeContent, #codingGroundContent, #jobsContent, #libraryContent, #articlesContent, #corporateTrainingContent { margin: auto; display: flex; width: 60%; text-align: center; display: none; } </style> <script> function showContent(contentId) { var content = document.getElementById(contentId); content.style.display = "block"; } </script> </head> <body> <div class="sidenav"> <a href="#" id="home" onclick="showContent('homeContent')">Home</a> <a href="#" id="codingground" onclick="showContent('codingGroundContent')">Coding Ground</a> <a href="#" id="jobs" onclick="showContent('jobsContent')">Jobs</a> <a href="#" id="library" onclick="showContent('libraryContent')">Library</a> <a href="#" id="articles" onclick="showContent('articlesContent')">Articles</a> <a href="#" id="corporatetraining" onclick="showContent('corporateTrainingContent')">Corporate Training</a> </div> <div id="homeContent"> <h2>Home Content</h2> <p>This is the content for the Home page.</p> </div> <div id="codingGroundContent"> <h2>Coding Ground Content</h2> <p>This is the content for the Coding Ground page.</p> </div> <div id="jobsContent"> <h2>Jobs Content</h2> <p>This is the content for the Jobs page.</p> </div> <div id="libraryContent"> <h2>Library Content</h2> <p>This is the content for the Library page.</p> </div> <div id="articlesContent"> <h2>Articles Content</h2> <p>This is the content for the Articles page.</p> </div> <div id="corporateTrainingContent"> <h2>Corporate Training Content</h2> <p>This is the content for the Corporate Training page.</p> </div> </body> </html>

执行上述程序后,我们可以在屏幕的左上角看到六个按钮。如果我们将鼠标悬停在任何按钮上,它都会显示过渡效果。如果我们尝试点击它,它将在屏幕上显示相关内容。

更新于:2023年8月29日

247 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告