个人博客
专注IT梦想的地方

一个自己闲暇时间做的一个响应式导航

刚做好的,因为要不断的练习,所以在前端这块还在继续努力,希望朝着自己的全栈更进一步。

HTML代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>智言个人博客</title>
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="kkui">
            <!-- 顶部top -->
            <div class="kkui-top">
                <a href="#">关注我们</a>
                <a href="#">注册</a>
                <a href="#">登录</a>
            </div>
            <div class="kkui-navs">
                <!-- logo -->
                <div class="kkui-logo">
                    <a href="javascript:;" id="app-subnav"><i class="fa fa-bars" aria-hidden="true"></i></a>
                    <a href="http://www.asni.cn"><img src="images/logo.svg" alt=""></a>
                </div>
                <!-- nav -->
                <nav id="kkui-nav">
                    <ul>
                        <li><a href="#" class="item">首页</a></li>
                        <li>
                            <a href="#"><i class="fa fa-html5"></i>&nbsp;前端&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="subnav" id="subnav-1">
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">JavaScript</a></li>
                                <li><a href="#">Vue.js</a></li>
                                <li><a href="#">Webpack</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-code"></i>&nbsp;后台&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="subnav" id="subnav-2">
                                <li><a href="#">PHP</a></li>
                                <li><a href="#">node.js</a></li>
                                <li><a href="#">MongoDB</a></li>
                                <li><a href="#">JAVA</a></li>
                                <li><a href="#">MySQL</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>&nbsp;美图&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="subnav" id="subnav-3">
                                <li><a href="#">清新</a></li>
                                <li><a href="#">唯美</a></li>
                                <li><a href="#">复古</a></li>
                                <li><a href="#">非主流</a></li>
                                <li><a href="#">壁纸</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i>&nbsp;美文&nbsp;<i class="fa fa-angle-down"></i></a>
                            <ul class="subnav" id="subnav-2">
                                <li><a href="#">生活</a></li>
                                <li><a href="#">经典</a></li>
                                <li><a href="#">励志</a></li>
                                <li><a href="#">课文</a></li>
                                <li><a href="#">其他</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fa fa-question" aria-hidden="true"></i>&nbsp;问答中心</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div id="kkui-zz">
        </div>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/asni.js" charset="utf-8"></script>
    </body>
</html>

 

 

DEMO地址:https://www.asni.cn/demo/demo7/index.html

整体使用了jquery框架,也是进一步锻炼它,还有font awesome icons,整体运行起来没有问题,目前只做了420px以下的响应,其他均还没有做完,如果大家发现有什么问题请在此帖留言,也可以在问答中心提问,谢谢。

还不是很完善,还有些地方需要优化!

以下为截图:

赞(3) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 一个自己闲暇时间做的一个响应式导航

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏