导航栏是否可以透明直到用户展开移动版本上的导航栏?

时间:2016-10-26 17:22:12

标签: html css twitter-bootstrap coldfusion

我的问题场景:导航栏在网站的移动版本上是透明的,因此用户可以看到横幅,导航栏位于横幅上。用户点击导航栏后,它会展开,导航栏不再透明。

问题:我不知道该怎么做。我可以使导航栏透明但当我在移动版本上选择导航栏时,它仍然是透明的。

任何帮助都将不胜感激。

谢谢

更新

以下代码在ColdFusion中完成,是导航栏。我参考了一个我看到的例子,并添加了我需要/删除的内容。

            <div class="row">
                <div class="col-md-12 col-lg-offset-1 col-lg-10 no-padding-left no-padding-right">
                    <div class="collapse navbar-collapse navbar-ex1-collapse no-padding-left">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                <br />
                                    <div class="visible-xs visible-sm">
                                        <div class="input-group">
                                            <input type="text" class="form-control btn-standard" value="#HTMLEditFormat($.event('keywords'))#" placeholder=" Site Search" />
                                            <span class="input-group-btn">
                                                <button type="submit" class="btn btn-default btn-standard navKeywordsSubmit">
                                                    <i class="fa fa-search"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>

                                    <cf_CacheOMatic key="dspPrimaryNav">
                                        <!--- 
                                            For information on dspPrimaryNav(), visit:
                                            http://docs.getmura.com/v6/front-end/template-variables/document-body/
                                        --->
                                        #$.dspPrimaryNav(
                                            viewDepth=0
                                            , id='navPrimary'
                                            , class='nav navbar-nav nav-nowrap ignore'
                                            , displayHome='never'
                                            , closeFolders=false 
                                            , showCurrentChildrenOnly=false
                                            , liHasKidsClass='dropdown'
                                            , liHasKidsAttributes=''
                                            , liCurrentClass=''
                                            , liCurrentAttributes=''
                                            , liHasKidsNestedClass='dropdown-submenu'
                                            , aHasKidsClass='dropdown-toggle'
                                            , aHasKidsAttributes='role="button" data-toggle="dropdown" data-target="##"'
                                            , aCurrentClass=''
                                            , aCurrentAttributes=''
                                            , ulNestedClass='dropdown-menu'
                                            , ulNestedAttributes=''
                                            , aNotCurrentClass=''
                                            , siteid=$.event('siteid')
                                        )#
                                    </cf_CacheOMatic>
                                    <script>
                                        $(function(){
                                            $(#serializeJSON($.getCurrentURLArray())#).each(
                                                function(index, value){
                                                    $("##navPrimary [href='" + value + "']").closest("li").addClass("active");
                                                }
                                            );
                                        })
                                    </script>
                                </div>
                                <!--- /search --->
                            </div><!--- /.row --->
                        </div>
                    </div><!--- /.navbar-collapse --->
                </div>
            </div><!--- /.row --->

0 个答案:

没有答案