带图标和按钮切换特效的垂直导航菜单的html页面源码

最新推荐文章于 2022-05-08 23:20:40 发布

mazai5080

最新推荐文章于 2022-05-08 23:20:40 发布

阅读量1k

点赞数

分类专栏：前端源码文章标签： css3 javascript 经验分享

本文链接：https://blog.csdn.net/mazai5080/article/details/124506740

版权

前端源码专栏收录该内容

100 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，带图标的垂直导航菜单的html页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

点击每个按钮时，都有切换特效，并显示按钮的说明，看起来非常不错（图2）

图2

代码完整，需要的朋友可以下载（图3）

图3

本源码编码：10148，需要的朋友，关注文末公众号后，搜索10148，即可获取。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3垂直图标导航工具栏特效</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="static/css/reset.min.css">
<link rel="stylesheet" href="static/css/style.css">

<!--简单而言,这东西就是自动加前缀的,在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性
避免了一些老长的浏览器前缀兼容性-->
<script src="static/js/prefixfree.min.js"></script>

</head>
<body>

<nav class="navbar">
  <ul class="navbar__menu">
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="home"></i><span>Home</span></a>
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="message-square"></i><span>Messages</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="users"></i><span>Customers</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="folder"></i><span>Projects</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="archive"></i><span>Ressources</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="help-circle"></i><span>Help</span></a>        
    </li>
    <li class="navbar__item">
      <a href="#" class="navbar__link"><i data-feather="settings"></i><span>Settings</span></a>        
    </li>
  </ul>
</nav>

<!--图标库 调用-->
<script src='static/js/feather.min.js'></script>
<script src="static/js/script.js"></script>

</body>
</html>

本源码编码：10148，需要的朋友，关注文末公众号后，搜索10148，即可获取。

mazai5080

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
带图标和按钮切换特效的垂直导航菜单的html页面源码

大家好，今天给大家介绍一款，带图标的垂直导航菜单的html页面源码（图1）。送给大家哦，获取方式在本文末尾。图1点击每个按钮时，都有切换特效，并显示按钮的说明，看起来非常不错（图2）图2代码完整，需要的朋友可以下载（图3）图3本源码编码：10148，需要的朋友，关注文末公众号后，搜索10148，即可获取。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"
复制链接

扫一扫