已经有一段时间了 - 但我发现自己在网络开发方面有了新的兴趣,我希望你能帮助我克服以下问题:
我正在个人网站上工作。内容等都是初步的。我主要关注的是左侧的垂直菜单。虽然我对目前的表现非常满意,但仍有一些问题:
1)我必须将过渡设置为轻松到> 0s,这样我在主菜单悬停和悬停在子菜单之间有足够的时间。因此,如果我将鼠标悬停在主菜单项之间,由于逐步淘汰,它们会短暂重叠。有办法解决这个问题吗? (焦点选择器可能是一个选项,但这需要单击菜单项,我更喜欢悬停)
2)子菜单与主菜单的li顶部对齐。因此,最后一项的子(测试)超出了页面的边界,在页面下方给出了空白。有没有办法让子菜单向上移动,如果它按在整个身体的边缘? 我可能会给它一个不同的标签,并以不同的方式设计它,我希望有一个更通用的解决方案。
3)次要问题:从主菜单悬停切换到子菜单悬停时,主图标"闪烁"非常简短。这是正常的行为吗?当然不是很漂亮。
4)最后但同样重要的是:由于这是我第一次访问网站,我非常感谢您对代码中的低效率获得一般性反馈,因此我将来可以更加精益求精。
(请参阅下面更新的小提琴 - 删除完整代码以节省空间。)
感谢您的帮助!
修改 谢谢您的回答 - 问题#1已经使用您概述的方法解决了!
然而,最后一个子菜单仍让我有点头疼。
如果我使用"最后一个孩子"选择器,以及下面添加的代码,它不会改变任何东西。但是,如果我给出最后一个" bubble"一个不同的标签,使用完全相同的代码,气泡将对齐到最后一个主菜单项的底部,但包含UL仍然是挑衅。
从原始CSS中可以看出,最后一个"亲戚"是主菜单IL,所以不应该将子菜单和包含的UL都对齐到它们各自的父/祖父母的底部?
以及随附的新代码(更新完整代码:继承人Fiddle ...使用大屏幕查看对齐问题):
.navigation ul li:last-child {
border: solid orange;
}
.navigation .bubble_last{
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
bottom: 0px;
width: 400px;
height: 200px;
border: solid red;
}
.navigation .bubble_last ul{
position: absolute;
left: 0;
bottom: : 0px;
margin-top: 0px;
padding: 0px;
width: 20vw;
height: 100px;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border: solid blue;
margin-left: 28%;
display: block;
}
.navigation .bubble_last ul li {
list-style: none;
background-color: none;
border-radius: 3px;
height: 2vw;
line-height: 1.2vw;
width: 20vw;
position: relative;
padding-top: 0px;
margin: 0;
padding: 0;
}
答案 0 :(得分:0)
而不是在.bubble
上添加转换延迟,您只需要使.bubble
类足够宽(并使用li
从主left: 60px
触发器后面开始)这样悬停将是连续的:
.navigation .bubble {
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
top: 0px;
width: 200px;
height: 100%;
background-color: none;
}
然后只需在子菜单中添加margin-left
:
.navigation ul li ul {
margin-left: 20px;
}
要修复第二个问题,只需添加以下CSS即可使最后一个子菜单相对于导航项的底部定位:
ul li ul.subm:last-child {
top: auto;
bottom:0px;
}
更新演示:JSFiddle
答案 1 :(得分:0)
这个怎么样?调整导航以使用<excludePatterns>multi3*.war,multi2*.jar</excludePatterns>
元素,将其设置为使用弹性框,调整它以使其适合页面的高度,然后调整过渡效果,以便它们正确地进出。
我希望这会有所帮助。
nav
@import url("http://fonts.googleapis.com/css?family=Roboto");
* {
border: none;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Roboto Condensed;
box-sizing: border-box;
}
.landing {
display: table;
margin: auto;
width: 100%;
height: 100%;
background: url("https://imageshack.com/i/poXkyeIYj") 50% 50% no-repeat;
background-size: cover;
top: 0;
position: relative;
z-index: 1;
}
.landing .welcome {
margin: 10px;
width: 89%;
color: #FFF;
text-align: center;
display: table-cell;
vertical-align: middle;
position: absolute;
left: 10%;
top: 30%;
}
#mug {
background: url("https://imageshack.com/i/pmJaAuFkj") 50% 50% no-repeat;
background-size: cover;
border: solid 3px #FFF;
/*max-width: 20%;
max-height: 20%; */
width: 150px;
height: 150px;
margin: auto;
border-radius: 100%;
}
nav {
width: 50px;
height: 100%;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
nav img {
max-width: 50px;
max-height: 50px;
}
.nav ul {
*zoom: 1;
list-style: none;
margin: 0;
padding: 0;
-ms-flex: 0 100px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
margin-top: 0px;
padding: 0px;
width: 11vw;
height: auto;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border-color: none;
}
nav ul li {
background-color: rgba(222, 225, 229, 0.8);
border-radius: 3px;
width: 100%;
font-size: 15px;
font-size: 1.2vw;
font-weight: 900;
}
.nav ul:before,
.nav ul:after {
content: "";
display: block;
}
.nav ul:after {
clear: both;
}
.nav ul>li {
position: relative;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 1.2em;
color: #fff;
border-left: 1px solid #595959;
text-decoration: none;
color: #FFF;
}
.nav a:hover {
text-decoration: none;
background-color: rgba(242, 93, 38, 0.8);
}
.nav li ul {
background: #273754;
}
.nav li ul li {
width: 200px;
}
.nav li ul a {
border: none;
}
.nav li ul a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav li ul {
position: absolute;
left: 11vw;
top: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 200ms ease;
-moz-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.nav ul>li:hover ul {
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
span.caption {
display: none;
}