之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图：

在线预览   源码下载

一起看下实现的代码：

html代码：

 <nav class="animated bounceInDown">
        <ul>
            <li><a href="#profile">
                <div class="fa fa-user">
                </div>
                Profile </a></li>
            <li><a href="#message">
                <div class="fa fa-envelope">
                </div>
                Messages <span class="badge right">12</span> </a></li>
            <li class="sub-menu"><a href="#settings">
                <div class="fa fa-gear">
                </div>
                Settings
                <div class="fa right fa-caret-up">
                </div>
            </a>
                <ul style="display: block;">
                    <li><a href="#settings">Account </a></li>
                    <li><a href="#settings">Profile </a></li>
                    <li><a href="#settings">Secruity &amp; Privacy </a></li>
                    <li><a href="#settings">Password </a></li>
                    <li><a href="#settings">Notification </a></li>
                </ul>
            </li>
            <li class="sub-menu"><a href="#message">
                <div class="fa fa-question-circle">
                </div>
                Help
                <div class="fa right fa-caret-down">
                </div>
            </a>
                <ul style="display: none;">
                    <li><a href="#settings">FAQ's </a></li>
                    <li><a href="#settings">Submit a Ticket </a></li>
                    <li><a href="#settings">Network Status </a></li>
                </ul>
            </li>
            <li><a href="#message">
                <div class="fa fa-sign-out">
                </div>
                Logout </a></li>
        </ul>
    </nav>

css代码：

      body
        {
            background: #f7f7f7 url("1.jpg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            font-family: "Roboto";
            font-size: 14px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body::before
        {
            content: '';
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            background: #34495e; /* IE Fallback */
            background: rgba(52, 73, 94, 0.8);
            width: 100%;
            height: 100%;
        }
        nav
        {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 360px;
            margin: -78px 0 100px -180px;
            -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        }
        nav ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        nav ul li
        {
            /* Sub Menu */
        }
        nav ul li a
        {
            display: block;
            background: #3498db;
            padding: 10px 15px;
            color: #fff;
            text-decoration: none;
            -webkit-transition: 0.2s linear;
            -moz-transition: 0.2s linear;
            -ms-transition: 0.2s linear;
            -o-transition: 0.2s linear;
            transition: 0.2s linear;
        }
        nav ul li a:hover
        {
            background: #2980b9;
        }
        nav ul li a .fa
        {
            width: 16px;
            text-align: center;
            margin-right: 5px;
        }
        nav ul li a .badge
        {
            display: inline-block;
            background: #fff; /* IE Fallback */
            background: rgba(255, 255, 255, 0.2);
            padding: 3px 7px;
            color: #fff;
            font-size: 12px;
            font-weight: 800;
        }
        nav ul li ul li a
        {
            background: #444;
            border-left: 4px solid transparent;
            padding: 10px 20px;
        }
        nav ul li ul li a:hover
        {
            background: #333;
            border-left: 4px solid #3498db;
        }
        /* Float Right/Left */
        .right
        {
            float: right;
        }
        .left
        {
            float: left;
        }

js代码：

 $('.sub-menu ul').hide();
        $(".sub-menu").click(function () {
            $(this).children("ul").slideToggle("100");
            $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
        }); //@ sourceURL=pen.js

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/5663

在线预览    源码下载