一款純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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.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="http://www.survivalescaperooms.com" class="nav__item-link"><span class="nav__item-text">
Show all</span> </a></li> </ul>
</div> </div>
</div>