jquery实现的个人中心导航菜单

之前为大家介绍了一款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>

View Code