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




使用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>
  • 第三步 - 包含以下 脚本
<script>
   function showContent(contentId) {
      var content = document.getElementById(contentId);
    content.style.display = "block";
   }
</script>

完整示例

现在,让我们将以上所有的HTML、CSS和JavaScript代码块组合起来-

<!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>

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



JavaScript 精选笔记
如何在JavaScript中显示下拉列表中的选定选项如何使用JavaScript DOM添加表格行JavaScript的优缺点如何在JavaScript中停止forEach()方法如何使用JavaScript改变文本的字体颜色如何将本地JSON文件数据导入到我的JavaScript变量如何使用JavaScript在按钮上添加onclick事件?如何在JavaScript中调用返回另一个函数的函数从JSON对象转换为JavaScript中的数组如何使用JavaScript隐藏HTML元素如何使用JavaScript从*.CSV文件中读取数据如何使用JavaScript在5秒后重定向网页如何在ReactJS中验证手机号长度如何在ReactJS中验证电子邮件如何在ReactJS中验证日期如何在ReactJS中去除输入的空白字符如何在ReactJS中使用setState更新对象如何使用JavaScript重置或清除表单?如何使用JavaScript创建一个换行?如何在页面加载时调用JavaScript函数?如何使用HTML按钮调用JavaScript函数?如何在HTML中使文本加粗如何在JavaScript中检查复选框是否被选中?如何在HTML中更改文字字体?如何在JavaScript中删除现有的HTML元素?如何使用JavaScript停止表单提交?如何去除 JavaScript 数字的小数部分?如何在JavaScript中使用前导零填充数字?JavaScript中将字符串转换为数组如何使用JavaScript判断一个数是奇数还是偶数?如何通过JavaScript检测移动设备?JavaScript Sleep() 函数如何使用Javascript读写文件使用event.preventDefault()在表单提交时停止页面刷新如何向JavaScript对象添加元素?如何在JavaScript数组中查找重复值?如何在JavaScript中向HTML DOM添加新元素?如何在JavaScript中创建自定义的提示框?使用HTML和JavaScript进行表单验证如何在HTML中更改字体大小?JavaScript的替代方案使用HTML、CSS和JavaScript创建可悬停的侧边导航如何在JavaScript中将字符串转换为整数?将字符串左旋转和右旋转相匹配的JavaScript程序以最小化改变的字符JavaScript 找出最大的连续递减元素JavaScript 使用默认值将数组映射到一个新数组JavaScript 操作对象数组JavaScript 通过Array对象列表来操作对象进行分组JavaScript 创建另一个数组的重复值数组JavaScript JSON组对象JavaScript 在已排序列表中搜索项目的最佳方法是什么JavaScript 合并子数组JavaScript 使用BigInt计算长阶乘