一款纯css实现的漂亮导航菜单(也适用于个人中心)

2024-07-11 08:30:22

字体：大中小

来源：转载

供稿：网友

　　今天给大家分享一款纯css实现的漂亮导航。之前为大家分享过jquery实现的个人中心导航菜单，今天这款也是适合放在个人中心。还带来图标，效果不错。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<div class="l-main"> <div class="menu">
<header class="menu__header"> <h1 class="menu__header-title">
Incoming Messages</h1> </header>
<div class="menu__body"> <ul class="nav">
<li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link is-active"> <i class="fa fa-envelope nav__item-icon"></i><span class="nav__item-text">News</span>
<span class="badge badge--warning">32</span> </a></li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-flag nav__item-icon">
</i><span class="nav__item-text">Priority</span> <span class="badge">8</span> </a> </li>
<li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon"> </i><span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a>
</li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-archive nav__item-icon">
</i><span class="nav__item-text">Archived</span> <span class="badge">3</span> </a> </li>
<li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-trash nav__item-icon"> </i><span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a>
</li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><span class="nav__item-text">
Show all</span> </a></li> </ul>
</div> </div>
<div class="menu menu--small"> <header class="menu__header">
<h1 class="menu__header-title"> Incoming</h1>
</header> <div class="menu__body">
<ul class="nav"> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link is-active"><i class="fa fa-envelope nav__item-icon">
</i><span class="badge badge--warning">32</span> </a></li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-flag nav__item-icon">
</i><span class="badge">8</span> </a></li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">
</i><span class="badge">0/17</span> </a></li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-archive nav__item-icon">
</i><span class="badge">3</span> </a></li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><i class="fa fa-trash nav__item-icon">
</i><span class="badge">9</span> </a></li> <li class="nav__item"><a href="https://www.Vevb.com" class="nav__item-link"><span class="nav__item-text">
Show all</span> </a></li> </ul>
</div> </div>
</div>