52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
|
||
<title>隐藏式侧边栏菜单</title>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/47.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<!-- --t是自定义属性，通过var函数可调用 -->
|
||
<li style="--t:20%;">
|
||
<a href="#">
|
||
<i class="fa fa-home" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
<li style="--t:30%;">
|
||
<a href="#">
|
||
<i class="fa fa-th-large" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
<li style="--t:40%;">
|
||
<a href="#">
|
||
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
<li style="--t:50%;">
|
||
<a href="#">
|
||
<i class="fa fa-user" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
<li style="--t:60%;">
|
||
<a href="#">
|
||
<i class="fa fa-cog" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
<li style="--t:70%;">
|
||
<a href="#">
|
||
<i class="fa fa-sign-out" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
<div class="top"></div>
|
||
<div class="middle"></div>
|
||
<div class="bottom"></div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |