<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3后台管理垂直导航代码 - 更多源码WW.96flw.COM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navigation-container" id="js_navigation-container">
<div class="navigation-collapse-trigger">
<span class="navigation-collapse-trigger__orb" id="js_navigation-collapse-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</span>
</div>
<div class="navigation">
<!-- LOGO -->
<a class="navigation-logo" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box navigation-logo__icon">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
<span class="navigation-logo__name js_navigation-item-name">
Productname
</span>
</a>
<!-- SEARCH -->
<div class="navigation-search">
<input type="search" placeholder="search" class="navigation-search__input" />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-search__icon">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<!-- NAVIGATION -->
<nav role="navigation">
<ul>
<li>
<a class="navigation-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-grid">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
<span class="navigation-link__name js_navigation-item-name">
Dashboard
</span>
</a>
</li>
<li>
<a class="navigation-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-activity">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
<span class="navigation-link__name js_navigation-item-name">
Analytics
</span>
</a>
</li>
<li>
<a class="navigation-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span class="navigation-link__name js_navigation-item-name">
Accounts
</span>
</a>
</li>
<li>
<a class="navigation-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span class="navigation-link__name js_navigation-item-name">
Calendar
</span>
</a>
</li>
<li>
<a class="navigation-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
<span class="navigation-link__name js_navigation-item-name">
Documents
</span>
</a>
</li>
</ul>
</nav>
<!-- LOGOUT -->
<a class="navigation-link logout" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-power">
<path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
<line x1="12" y1="2" x2="12" y2="12"></line>
</svg>
<span class="navigation-link__name js_navigation-item-name">
Logout
</span>
</a>
</div>
</div>
<script src='js/anime.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
CSS3后台管理垂直导航代码.zip
版权申诉
35 浏览量
2023-10-09
23:48:19
上传
评论
收藏 11KB ZIP 举报
![avatar](https://profile-avatar.csdnimg.cn/b3bd63a7903244e481cc7ae79fad9368_qq_41221596.jpg!1)
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- power-karpathy-test-gt.json
- tensorflow-gpu-2.8.2-cp38-cp38-win-amd64.whl
- sddfdsfdssdasd
- power-karpathy-val-gt.json
- power-karpathy-test.json
- EnviroSkyandWeather v2.1.4(u2017.1.2)真实动态天气系统包
- power-karpathy-train.json
- power-karpathy-train.json
- STM32CubeMx V6.0.0版本
- EnviroSkyandWeather v2.1.2(u2017.1.2)真实动态天气系统包
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)