javascript - 请教下一个CSS下拉菜单实现效果
巴扎黑
巴扎黑 2017-04-11 12:27:37
0
2
1020

最近在模仿之前公司的官网页面www.yeeuu.com,大致静态页面都模仿好了,静态页面部分基本上就是用p+css布局实现的,具体细分为header,body,footer这几块,对于header中的下拉菜单它的实现效果不是太明白,我自己当初在仿照的时候下拉菜单部分完全是用css写的,但是视觉上的效果不是太美观,所以我就去看官网上header部分的源码,发现它还加了js部分上去,当我照抄header部分的html和css时,发现自己页面上出不来下拉菜单,想请教下各位,下拉菜单的效果是如何在html+css+js效果下实现的?

官网上的源码如下(我所的可能太啰嗦,可以直接在www.yeeuu.com上查看头部的下拉菜单):
html部分:

CSS部分代码如下:
header {

background-color: rgba(17, 17, 17, 0.9); height: 60px; position: relative;

}
header .content {

width: 1106px; margin: 0 auto; height: 100%;

}
header .content .logo {

position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;

}
header .content .nav-menu {

float: right; display: inline-block; height: 100%;

}
header .content .nav-menu .nav-item-wrapper {

display: inline-block; height: 100%; line-height: 60px; margin-left: 56px; text-align: right;

}
header .content .nav-menu .nav-item {

display: block; color: #bebebe; font-size: 14px; cursor: pointer; text-decoration: none;

}
a {

background-color: transparent;

}
header .subheader {

position: absolute; top: 60px; left: 0; background-color: #fff; width: 100%; height: 0; z-index: 15; -webkit-transition: height 0.3s; transition: height 0.3s; overflow: hidden; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.18);

}
header .subheader .subheader-content {

width: 1106px; margin: 0 auto; text-align: center; line-height: 1; padding: 20px 0; height: 100%; position: relative;

}
header .subheader .subheader-content .item {

float: left; height: auto; top: 50%; transform: translateY(-50%); width: 20%; text-align: center; color: gray; display: inline-block; cursor: pointer; text-decoration: none; outline: none; font-size: 14px; position: relative;

}
header .subheader .subheader-content .item:before {

position: absolute; right: 1px; top: 20px; width: 1px; height: 140px; border-right: solid 1px #e8e8e8; content: "";

}
header .subheader .subheader-content .item .img-wrapper {

width: 100%; min-height: 145px;

}
header .content .nav-menu .nav-item.active {

color: #e60044;

}

现在的问题就是想用它的方法来实现,copy了它的html+css实现不了下拉菜单,F12看它的源码有用id选择器,估计是用js来选择元素,从而实现调用,哪位可以跟我详细讲下它这下拉菜单实现的原理.

PS:这是我自己下午做的下拉菜单

宽度我已经设置为和header部分的最大宽度1106px了,但是还是不能像官网界面那样下拉菜单能填充整个界面,官网界面如下:

我还试过用相对宽度100vw的方法,还是不管用,假如用自己这种纯css方法实现下拉菜单的方法,这个细节问题又该怎么解决?

巴扎黑
巴扎黑

membalas semua (2)
Ty80

看了下.subheader的样式其中有heigth: 0;transition: height 0.3s;所以应该是改.subheaderheight的方式来实现的

至于width问题,首先header的position为relative,.subheader是绝对定位且是以header为定位上下文,.subheader的width为100%,所以.subheaderheader的width是一样的。

    Ty80
    header .subheader { position: absolute; top: 60px; left: 0; background-color: #fff; width: 100%; height: 0; z-index: 15; -webkit-transition: height 0.3s; transition: height 0.3s; overflow: hidden; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.18); } header .nav-item-wrapper:hover .subheader { height: 240px; /* 具体 高度 我 也 不知道 是 多少 乱 填滴 既然 她 有 写 CSS3 的 过渡 效果 那效果 就是 过渡 效果 了 这个 好像 她 是 写在 JS 那里 了吧(我 也 不知道 猜的) 也就是 鼠标 悬停 在 类 nav-item-wrapper p元素 上 子元素 类 subheader 从 高度 0 到 240px 的 过渡 鼠标 移开 就 高度 变 0 的 过渡 */ -webkit-transition: height 0.6s; transition: height 0.6s; }
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!