最新消息:20181230 VPS服务器已从Linode换到腾讯云香港,主题仍用朋友推荐的大前端D8

【已解决】修复公司主页html5网页的移动端的菜单显示

HTML crifan 240浏览 0评论

公司主页是参考模板:

http://preview.uideck.com/items/mate/

弄的,但是正常的移动端的模板中菜单是正常的:

而现在是有问题的:

http://ip

所以需要去修复

找到了css部分:

@media screen and (max-width: 768px) {

  .navbar-header {

    width: 100%;

  }

  .navbar-brand {

    position: absolute;

    padding: 15px;

    top: 0;

  }

  .navbar-brand img {

    /* width: 70%; */

    width: 20%;

  }

  #mobile-menu {

    display: none;

  }

  .slicknav_menu {

    display: block;

  }

  .slicknav_nav .active a {

    background: #61D2B4;

    color: #fff;

  }

  .slicknav_nav a:hover, .slicknav_nav .active {

    color: #61D2B4;

    background: #f8f9fa;

  }

  .slicknav_nav .dropdown li a.active {

    background: #f8f9fa;

    color: #61D2B4;

  }

}

去调试看看

最后找到根本原因是:

在线的

http://preview.uideck.com/items/mate/

比模板中的html多了slicknav_menu的html部分:

换言之:

模板中缺了slicknav_menu的移动端的菜单的html的部分

导致没法显示移动端的菜单

所以去加上,但是加上代码后:

【已解决】html5中有两个重复的div元素内容

然后继续找菜单不能打开的原因。

注意到:

菜单打开时:

所以继续找找,如何确保js生效,菜单能显示

这个是相关的代码:

    //toggle menu

    Plugin.prototype._menuToggle = function (el) {

        var $this = this;

        var btn = $this.btn;

        var mobileNav = $this.mobileNav;

        if (btn.hasClass(prefix+’_collapsed’)) {

            btn.removeClass(prefix+’_collapsed’);

            btn.addClass(prefix+’_open’);

        } else {

            btn.removeClass(prefix+’_open’);

            btn.addClass(prefix+’_collapsed’);

        }

        btn.addClass(prefix+’_animating’);

        $this._visibilityToggle(mobileNav, btn.parent(), true, btn);

    };

通过在线调试发现:

虽然在线js已经压缩后了,但是还是能基本是看出

点击菜单按钮后,是执行到了上面的

btn.hasClass(prefix+’_collapsed’)

部分的代码的逻辑的。

但是调试本地页面的话,是无法执行到对应代码的

-》打了断点,但是执行不到:

-〉只有开始页面初始化时可以执行挂载函数的地方:

    //toggle menu

    Plugin.prototype._menuToggle = function (el) {

通过代码分析:

if (btn.hasClass(prefix+’_collapsed’)) {

去看在线的html中是有:

所以可以执行到?

那本地的html中,好像也有啊

但是发现了另外个事情:

对于上述的菜单,点击右键,查看元素时:

在线的可以直接定位到对应的三个横线:

本地的,始终只能定位到:

菜单所在的整行上:

-》那就说明:

本地的html中,对于上面的菜单来说,是由于:

点击时,始终都是点击了 a的href,点击不到menu

-》所以去搞清楚,为何点击不到menu,而是a

现在猜测:是z-index的方面的问题?

然后发现本地的a的宽度很宽,盖住了menu:

而在线的a的宽度就没有盖住menu:

然后发现是:

给brand的img设置宽度为20%:

结果就导致了父元素中,a宽度很宽了:

而去掉了20%后:

a的宽度就正常了:

然后就可以点击到menu了:

所以,接着就是去研究:

为何img的width设置为20%后,就导致parent的a的宽度变宽了

大概看懂了:

其在线环境中,img的宽度,本地logo图片是

140×42

所以在移动端,默认是70%宽度,=140*0.7=98px

不会很宽,不会遮盖到menu

而a的宽度,没有制定,所以用自元素img的最大宽度为准=98px

而此处,由于给img加了宽高width="60" height=“52"

但是同时又使用了70%或20%的百分比,导致img的width失效:

从而导致img的宽度,变成屏幕screen的70%或20%了

-》导致parent的a的width,变成了343px(具体逻辑和公式还是没搞清楚)

但是和:

此处图片img本身宽高:

709×620

其中:

709* 20%=141.8

375*0.2=75

或许又关系?

所以解决办法是:

想办法重新找别的方法设置img的宽高

后者是:

参考原图logo,重新弄logo,也弄成类似于200×60的图片,且右边是透明的,以配合此处的模板去使用

-》后者有点怪,暂时放弃。

还是用前面的办法去试试

【总结】

解决办法:

然后最后换用了分辨率不是太高,但是又算很清楚的logo图片,确保width宽度比较适合的:

logo_transparent_183x160.png

保持之前的html的代码的写法:(没有在html中的img加上width和height)

          <div class="navbar-header">

            <a href="index.html" class="navbar-brand">

              <img src="img/logo_transparent_183x160.png" alt="Naturling Logo">

            </a>

而是通过css去控制在PC端和移动端的效果,即图片的大小和宽高:

.navbar-brand {

  position: relative;

  padding: 0px;

}

.navbar-brand img {

  /* width: 60px;

  height: 52px; */

  width: 50%;

}

@media screen and (max-width: 768px) {

  .navbar-header {

    width: 100%;

  }

  .navbar-brand {

    position: absolute;

    /* padding: 15px; */

    padding: 10px;

    top: 0;

  }

  .navbar-brand img {

    /* width: 70%; */

    width: 35%;

    /* width: 20%;

    width: 60px;

    height: 52px; */

  }

}

最终的效果是:

PC端:

移动端:

此时移动端的顶部,图片所在的区域,就不会很宽了:

就可以正常空出空间,点击右边的菜单了:

然后点击菜单后,可以跳转到对应区域了:

转载请注明:在路上 » 【已解决】修复公司主页html5网页的移动端的菜单显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
58 queries in 0.248 seconds, using 9.90MB memory