A pure css-implemented beautiful navigation, css-implemented navigation

A pure css-implemented beautiful navigation, css-implemented navigation

Today we will share with you a beautiful navigation that is implemented with pure css. I have previously shared with you the personal center navigation menu implemented by jquery. Today, this is also suitable for personal centers. It also brings icons, and the effect is good. Let's take a look:

Download Online Preview source code

Implementation code.

Html code:

  <div class="l-main">        <div class="menu">            
Css code:
    body        {            background: #F4F4F4;            font-family: Arial, sans-serif;            font-size: 14px;            font-weight: lighter;        }                .l-main        {            width: 530px;            margin: 0 auto;        }                .menu        {            width: 250px;            margin: 40px;            background: #fff;            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);            border-radius: 5px;            float: left;        }                .menu__header        {            background: #4B4F55;            border-bottom: 1px solid #353A40;            border-radius: 5px 5px 0 0;        }                .menu__header-title        {            color: #fff;            padding: 15px;            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);        }                .menu__body        {            border-radius: 0 0 5px 5px;        }                .menu--small        {            width: 110px;        }                .nav        {            list-style: none;        }                .nav__item        {            position: relative;        }                .nav__item-link        {            padding: 10px 15px;            text-decoration: none;            color: #8B8E93;            display: block;            border-bottom: 1px solid #F0F0F0;        }        .nav__item-link:hover        {            background: #f0f0f0;        }        .nav__item-link.is-active        {            background: #6E757F;            color: #fff;            border-bottom-color: #4B4F55;            box-shadow: 0 1px 0 #7A828D inset;        }        .nav__item-link.is-active:after        {            content: '';            display: block;            position: absolute;            top: 50%;            right: -6px;            margin-top: -6px;            border-top: 6px solid transparent;            border-bottom: 6px solid transparent;            border-left: 6px solid #6E757F;        }        .nav__item-link.is-active .nav__item-icon        {            color: #fff;        }        .nav__item:last-child .nav__item-link        {            border-bottom: none;        }                .nav__item-icon        {            color: #D2D5DA;            width: 20px;            text-align: center;            font-size: 18px;            margin-right: 10px;        }                .badge        {            font-size: 12px;            padding: 2px 8px;            border: 1px solid #D1D1D1;            border-radius: 10px;            position: absolute;            top: 10px;            right: 15px;        }                .badge--warning        {            background: #ED373F;            border-color: #ED373F;        }
Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/10143

General idea of implementing navigation menus with pure css
If you do not consider ie6, you can use a pseudo-class: hover to directly implement it. If you consider IE6, you must switch the css style in html. In fact, it is also JavaScript.

DIV + CSS can make beautiful website navigation
Yes, but what do you want to do?