为了账号安全,请及时绑定邮箱和手机立即绑定

如图响应式导航栏实现

/ 猿问

如图响应式导航栏实现

爱喝汽水的小仙女 2018-11-09 10:23:10

https://img.mukewang.com/5be4eeef00017ea413450087.jpg

看了别人的代码感觉怪怪的,望大神们赐教下面是原来的代码不是很懂

        <div class="container">

            <div class="logo">

                <img src="../static/img/logo.png" width="100%" />

            </div>

            <div class="logo-wenzi">

                <span>专注巡更17年!</span>

            </div>

            <!--导航条-->

            <nav class="navbar navbar-default" role="navigation">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">          

                            <span class="sr-only">切换导航</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

                </div>

                <div class="collapse navbar-collapse" id="example-navbar-collapse">

                    <ul class="nav navbar-nav">

                        <li class="dropdown fz_14">

                            <a href="#">首&nbsp;&nbsp;页</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">巡更产品</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">云巡更</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">GPS巡更</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">案例实录</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">服务中心</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">关于我们</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">联系我们</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">中文</a>

                        </li>

                        <li class="dropdown fz_14">

                            <a href="#">English</a>

                        </li>

                    </ul>

                </div>

            </nav>


            <div id='cssmenu'>

                <ul>

                    <li>

                        <a href='#'>首&nbsp;&nbsp;页</a>

                    </li>

                    <li>

                        <a href='#'>巡更产品</a>

                    </li>

                    <li>

                        <a href="#">云巡更</a>

                    </li>

                    <li>

                        <a href="#">GPS巡更</a>

                    </li>

                    <li>

                        <a href="#">案例实录</a>

                    </li>

                    <li>

                        <a href="#">服务中心</a>

                    </li>

                    <li>

                        <a href="#">关于我们</a>

                    </li>

                    <li>

                        <a href="#">联系我们</a>

                    </li>

                </ul>

            </div>


            <!--中英文切换-->

            <div class="btn-group">

                <button type="button" class="btn btn-default">Language</button>

                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

                <ul class="dropdown-menu">

                    <li>

                        <a href="#">中文</a>

                    </li>

                    <li>

                        <a href="#">English</a>

                    </li>

                </ul>

            </div>


        </div>


查看完整描述

1 回答

?
菜小酸

你要说你不明白的点在哪里

查看完整回答
反对 回复 2018-11-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信