下拉菜单适用于移动设备,但不适用于Laravel网站中的桌面设备

时间:2019-06-07 19:56:18

标签: css twitter-bootstrap

在非移动设备上查看时,下拉的“服务”菜单不起作用。折叠菜单但无法在导航栏中使用时 我还看到了有关下拉列表在移动设备上不起作用的其他问题,但就我而言,情况恰恰相反。 See site here

这是我的blade.php文件的导航部分

        <nav class="fh5co-nav" role="navigation">
            <div class="top">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 text-right">
                            <a href="tel:+18188690606" data-toggle="tooltip" data-placement="bottom" title="+1 818 869 0606"><i class="fa fa-phone" aria-hidden="true"></i><img src="images/button.png"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-menu">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-2">
                            <div id="fh5co-logo">
                                    <a href="/" class="nav-brand"><img src="images/log.png" alt=""></a>                            </div>
                        </div>
                        <div class="col-xs-10 text-right menu-1">
                            <ul>
                                <!-- <li class="active"><a href="index.html">Home</a></li> -->
                                <li><a href="{{URL::to('/')}}">Home</a></li>
                                <li><a href="{{URL::to('/about')}}">About</a></li>
                                <li class="has-dropdown">
                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Services<b class="caret"></b></a>
                                    <ul class="dropdown">
                                        <li><a href="{{URL::to('/emergency')}}">Emergency</a></li>
                                        <li><a href="{{URL::to('/commercial')}}">Commercial</a></li>                        
                                        <li><a href="{{URL::to('/waterheater')}}">Water heater</a></li>
                                        <li><a href="{{URL::to('/sewer')}}">Sewers</a></li>                                        
                                    </ul>
                                </li>
                                <li><a href="{{URL::to('/contact')}}">Contact</a></li>
                                <!--<li class="btn-cta"><a href="#"><span>Login</span></a></li>-->
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </nav>

这是CSS

            .fh5co-nav ul li.has-dropdown {
            position: relative;
            }
            .fh5co-nav ul li.has-dropdown .dropdown {
            width: 140px;
            -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
            z-index: 1002;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 40px;
            left: 0;
            text-align: left;
            background: #000;
            padding: 20px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
            -webkit-transition: 0s;
            -o-transition: 0s;
            transition: 0s;
            }
            .fh5co-nav ul li.has-dropdown .dropdown:before {
            bottom: 100%;
            left: 40px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-bottom-color: #000;
            border-width: 8px;
            margin-left: -8px;
            }
            .fh5co-nav ul li.has-dropdown .dropdown li {
            display: block;
            margin-bottom: 7px;
            }
            .fh5co-nav ul li.has-dropdown .dropdown li:last-child {
            margin-bottom: 0;
            }
            .fh5co-nav ul li.has-dropdown .dropdown li a {
            padding: 2px 0;
            display: block;
            color: #999999;
            line-height: 1.2;
            text-transform: none;
            font-size: 13px;
            letter-spacing: 0;
            }
            .fh5co-nav ul li.has-dropdown .dropdown li a:hover {
            color: #fff;
            }
            .fh5co-nav ul li.has-dropdown:hover a, .fh5co-nav ul li.has-dropdown:focus a {
            color: #fff;
            }
            .fh5co-nav ul li.btn-cta a {
            color: #fff;
            }
            .fh5co-nav ul li.btn-cta a span {
            background: #ff0000;
            padding: 4px 20px;
            display: -moz-inline-stack;
            display: inline-block;
            zoom: 1;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            border-radius: 100px;
            }
            .fh5co-nav ul li.btn-cta a:hover span {
            -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
            }
            .fh5co-nav ul li.active > a {
            color: #fff !important;
            }

在这里,我是下拉菜单的

            $('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
            $('#fh5co-offcanvas')
                .find('li')
                .removeClass('has-dropdown');

            // Hover dropdown menu on mobile
            $('.offcanvas-has-dropdown').mouseenter(function(){
                var $this = $(this);

                $this
                    .addClass('active')
                    .find('ul')
                    .slideDown(500, 'easeOutExpo');             
            }).mouseleave(function(){

                var $this = $(this);
                $this
                    .removeClass('active')
                    .find('ul')
                    .slideUp(500, 'easeOutExpo');               
            });

0 个答案:

没有答案