我正在对菜单进行编码,这次使用CSS进行动画制作,js将类更改为显示,隐藏和半隐藏。 (我还没有开始使用js)
有些问题我不知道如何解决(变得非常紧张)。
html,
body {
background: #E6E6E6;
}
.menu {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
-webkit-transition: all ease .65s;
-moz-transition: all ease .65s;
-ms-transition: all ease .65s;
-o-transition: all ease .65s;
transition: all ease .65s;
}
.left {
right: 0;
margin-right: 0;
}
.left.bar {
right: 100%;
margin-right: -60px;
}
.left.hidden {
right: 100%;
margin-right: 0;
}
.menu > .links {
color: white;
font-family: sans-serif;
font-size: 2.5em;
font-weight: 500;
text-align: center;
text-transform: uppercase;
}
.menu li {
color: rgba(255, 255, 255, .75);
cursor: pointer;
list-style: none;
padding: 15px;
margin: 5px;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-ms-transition: all ease 1s;
-o-transition: all ease 1s;
transition: all ease 1s;
}
.menu li:hover {
color: rgba(255, 255, 255, 1);
background: rgba(0, 0, 0, .1);
}
.m1 {
background: orange;
z-index: 8;
}
<div class="menu left m1">
<div class="links l1">
<ul>
<li data-open=".m2">Architecture</li>
<li data-open=".m3">Coding</li>
<li data-open=".m4">Thesis</li>
</ul>
</div>
</div>
答案 0 :(得分:0)
默认情况下,<UL>
带有填充,这就是为什么您会看到链接左侧的间距。如果你设置
.links ul {margin:0; padding:0;}
额外的空间将被删除。作为建议,我建议将所有元素填充和边距设置为默认值为0,以帮助处理这些类型的问题。
* {
padding:0;
margin:0;
}
对于垂直对齐文本,如果您的文本全部位于同一行,则无法将line-height
设置为与其容器垂直对齐的容器高度。
答案 1 :(得分:0)
要删除左侧和顶部的空格,您必须覆盖ul:
的默认样式ul{
padding: 0;
margin: 0;
}
并垂直居中,我这样做:
.links ul{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.links{
height: 100%;
}
请在此处查看:JSFiddle