可以't get button to move on li:悬停在活动时
Can't get button to move on li:hover when .active
我对javascript有点陌生,并使用了一个小的javascript来让我的菜单相应地移动按钮,但我想实现子菜单。现在,当我想让按钮在子菜单被激活时移动(悬停在主li上),它不会移动。
我做错了什么?
需要注意的是,菜单在未激活时也会扩展(悬停第2个li时),这是我的第二个问题。
http://jsfiddle.net/drjvdyhb/
body {
font: 400 18px'Fjord One', sans-serif;
line-height: 1em;
background-color: #fff;
color: #c0c5ce;
}
header {
position: relative;
background-color: #2c353a;
}
header ul.nav {
overflow: auto;
margin: 0em;
padding: 0em;
}
header ul.nav li {
position: relative;
float: left;
width: 20%;
list-style: none;
}
header ul.nav li a {
display: block;
height: 30px;
opacity: 0;
font: 400 1.15em'Fjord One', serif;
line-height: 30px;
color: #848e92;
text-decoration: none;
text-align: center;
cursor: default;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
header ul.nav li:hover a {
color: #fff;
background-color: #222b2f;
}
header ul.nav li:hover ul li a {
color: #848e92;
background-color: #2c353a;
}
header ul.nav li ul li:hover a {
color: #fff;
background-color: #222b2f;
}
header ul li ul {
position: relative;
left: 0px;
padding: 0px 0px 0px;
width: 100%;
height: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
header ul li ul li {
display: block;
color: #fff;
}
header ul.nav li ul li {
width: 50%;
font-size: 14px;
}
header ul.nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
header ul.nav li:hover button.toggle-nav {
top 90px;
}
header ul li ul li a {
font: 400 1em'Fjord One', serif;
color: #848e92;
}
header.active ul.nav li a {
height: 60px;
opacity: 1;
line-height: 60px;
cursor: pointer;
}
header.active ul.nav li ul li a {
Height: 30px;
line-height: 100%;
}
button.toggle-nav {
position: absolute;
top: 30px;
left: calc(50% - 30px);
width: 40px;
height: 35px;
background-color: #38a6a6;
font: 400 1.2em'Allan', serif;
color: #fff;
border: none;
line-height: 30px;
vertical-align: middle;
outline: none;
cursor: pointer;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
button.toggle-nav:hover {
height: 50px;
}
button.toggle-nav span {
display: block;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
header.active button.toggle-nav {
top: 60px;
background-color: #256f6f;
}
/* My try so far */
header.active ul.nav li.hvr a:hover button.toggle-nav {
top: 90px;
}
header.active button.toggle-nav span {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
#nav-toggle {
cursor: pointer;
padding: 5px 10px 10px 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 20px;
background: white;
position: absolute;
display: block;
content:'';
}
#nav-toggle span:before {
top: 10px;
}
#nav-toggle span:after {
bottom: 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
为button.toggle-nav
设置position: relative
,并移除top: 30px;
,
看看这个JSFiddle
try this css code
#nav-toggle {
z-index: 10000000;
position: fixed;
cursor: pointer;
padding: 5px 10px 10px 10px;
top: 0px;
}
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 更改li标记文本的Javascript
- 完全可链接的li元素
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- window.on.scroll事件未启动
- 使用jquery动态创建ul-li
- tiltSlider播放/暂停视频元素(如果li有当前类)
- Socket.io on Mozilla Rhino
- CSS中的游标属性似乎不适用于USB On The Go
- 使用下拉列表筛选列表(ul>li)
- Change z-Index on <li>
- Change the title on click of <li>
- Jquery Filter <li> on Multiselect
- on单击li项目上的事件,以更改文本字段
- JavaScript "onClick" on li elements
- 可以't get button to move on li:悬停在活动时
- Show hidden div on li has class 'selected'
- 当class on li不存在时禁用按钮