您现在的位置是：网站首页> 编程资料编程资料

一款纯css实现的漂亮导航菜单(也适用于个人中心)纯CSS+XHTML实现的二级导航菜单效果纯CSS实现超简单的二级下拉导航菜单代码一款纯css3实现的竖形二级导航的实例教程实列教程 一款基于jquery和css3的响应式二级导航菜单简单的二级菜单导航实现css代码CSS3 二级导航菜单的制作的示例

2023-10-24 254人已围观

简介 之前已经分享很多css3实现的导航菜单，今天再分享一款纯css实现的漂亮导航，这款也是适合放在个人中心。还带来图标，效果不错。需要的朋友可以参考下

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="l-main">  
  2.         <div class="menu">  
  3.             <header class="menu__header">  
  4.                 <h1 class="menu__header-title">  
  5.                     Incoming Messagesh1>  
  6.             header>  
  7.             <div class="menu__body">  
  8.                 <ul class="nav">  
  9.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link is-active">  
  10.                         <i class="fa fa-envelope nav__item-icon">i><span class="nav__item-text">Newsspan>  
  11.                         <span class="badge badge--warning">32span> a>li>  
  12.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-flag nav__item-icon">  
  13.                     i><span class="nav__item-text">Priorityspan> <span class="badge">8span> a>  
  14.                     li>  
  15.                     <li class="nav__item"><a href="https://www.jb51.net" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">  
  16.                     i><span class="nav__item-text">Assignedspan> <span class="badge">0/17span> a>  
  17.                     li>  
  18.                     <li class="nav__item"><a href=

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网