我在这里成功创建了一个地铁菜单:
但是我有两个问题/问题:
我的菜单底部还有很大的空间,所以我想确保它只显示菜单之间的适当空间。我在body元素上添加了max-height但是没有用。有什么想法吗?
这是我的CSS:
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
body {
font-family: 'Lato', sans-serif;
background: #ecf0f1;
}
a{ text-decoration: none; }
h2 { color: #fff;
font-size: 22px;
margin: 0 24px;
font-weight: 300;
}
/*= ICON BOXES
--------------------------------------------------------*/
ul.icon-menu {margin-top: 16px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #2b99ce;}
li.icon-box.design {background: #24cccd;}
li.icon-box.coding {background: #9a639a;}
li.icon-box.shop {background: #c44745;}
li.icon-box.contact {background: #2d9a63;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
i.fa {
position:absolute;
pointer-events:none;
color:white ;
margin:16px 0 0 14px;
}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #2b99ce;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #247eaa;
}
.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.design h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #24cccd;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #1da7a8;
}
.icon-box.design a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.coding h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #9a639a;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #6d466d;
}
.icon-box.coding a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.shop h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #c44745;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #9b3735;
}
.icon-box.shop a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #2d9a63;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #1e6b44;
}
.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
.icon-box a {
padding: 120px;
}
.icon-menu i {
border-radius: 50%;
box-shadow: 0 0 0 50px transparent;
padding: 0.2em 0.25em;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}
.icon-menu li:hover i,
.icon-menu li:active i,
.icon-menu li:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
感谢您的帮助。谢谢!
答案 0 :(得分:1)
当您:focus
或链接为:active
时会显示。它是为了访问目的。使用以下CSS来摆脱它。
.icon-box a:focus,
.icon-box a:active {
outline: none;
}
从那里删除填充将删除底部空格并将其替换为width
和height
:
.icon-box a {
padding: 0;
width: 120px;
height: 120px;
}
创建<h1>
或其他内容,您可以使用以下包装类:
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
h2,
i.fa {
color: #fff
}
.icon-box.design h2,
.icon-box.home h2 {
z-index: -999;
top: 0;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s
}
body {
font-family: Lato, sans-serif;
background: #ecf0f1
}
a {
text-decoration: none
}
h2 {
font-size: 22px;
margin: 0 24px;
font-weight: 300
}
ul.icon-menu {
margin-top: 16px
}
li.icon-box {
width: 120px;
height: 120px;
list-style: none;
left: -47px;
position: relative;
margin-bottom: 3px
}
li.icon-box.home {
background: #2b99ce
}
li.icon-box.design {
background: #24cccd
}
li.icon-box.coding {
background: #9a639a
}
li.icon-box.shop {
background: #c44745
}
li.icon-box.contact {
background: #2d9a63
}
.icon-box h2 {
font-size: 20px;
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1)
}
.icon-box a {
display: block;
padding: 120px
}
i.fa {
position: absolute;
pointer-events: none;
margin: 16px 0 0 14px
}
.icon-box.home h2 {
position: absolute;
left: 0;
opacity: 0;
background: #2b99ce;
transition: all .5s;
border-left: 3px solid #247eaa
}
.icon-box.home a:hover h2 {
opacity: 1;
left: 120px;
margin: 0;
text-align: center
}
.icon-box.design h2 {
position: absolute;
left: 0;
opacity: 0;
background: #24cccd;
transition: all .5s;
border-left: 3px solid #1da7a8
}
.icon-box.coding h2,
.icon-box.shop h2 {
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
z-index: -999;
position: absolute;
top: 0;
line-height: 120px;
width: 120px
}
.icon-box.design a:hover h2 {
opacity: 1;
left: 120px;
margin: 0;
text-align: center
}
.icon-box.coding h2 {
left: 0;
opacity: 0;
background: #9a639a;
transition: all .5s;
border-left: 3px solid #6d466d
}
.icon-box.coding a:hover h2 {
opacity: 1;
left: 120px;
margin: 0;
text-align: center
}
.icon-box.shop h2 {
left: 0;
opacity: 0;
background: #c44745;
transition: all .5s;
border-left: 3px solid #9b3735
}
.icon-box.shop a:hover h2 {
opacity: 1;
left: 120px;
margin: 0;
text-align: center
}
.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #2d9a63;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #1e6b44
}
.icon-box.contact a:hover h2 {
opacity: 1;
left: 120px;
margin: 0;
text-align: center
}
span.icon {
display: inline-block;
background: url(../img/icon-sprites.png) no-repeat;
width: 32px;
height: 32px;
margin: 43px 40px
}
span.icon.home {
background-position: 0 0
}
span.icon.aboutme {
background-position: -36px 0
}
span.icon.portfolio {
background-position: -72px 0
}
span.icon.blog {
background-position: -109px 0
}
span.icon.contact {
background-position: -145px 0
}
.icon-menu i {
border-radius: 50%;
box-shadow: 0 0 0 50px transparent;
padding: .2em .25em;
background: rgba(255, 255, 255, .1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out
}
.icon-menu li:active i,
.icon-menu li:focus i,
.icon-menu li:hover i {
box-shadow: 0 0 0 0 rgba(255, 255, 255, .2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out
}
.icon-box a:active,
.icon-box a:focus {
outline: 0
}
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #000;
}
.icon-box a {
padding: 0;
width: 120px;
height: 120px;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<ul class="icon-menu">
<li class="icon-box home"> <i class="fa fa-home fa-4x"></i>
<a href="#">
<h2>Home</h2>
</a>
</li>
<li class="icon-box design">
<i class="fa fa-paint-brush fa-4x"></i>
<a href="#">
<h2>Design</h2>
</a>
</li>
<li class="icon-box coding">
<i class="fa fa-code fa-4x"></i>
<a href="#">
<h2>Coding</h2>
</a>
</li>
<li class="icon-box shop">
<i class="fa fa-shopping-cart fa-4x"></i>
<a href="#">
<h2>Shop</h2>
</a>
</li>
<li class="icon-box contact">
<i class="fa fa-envelope fa-4x"></i>
<a href="#">
<h2>Contact</h2>
</a>
</li>
</ul>
<div class="center">
<h1>Hello</h1>
<h2>How are you?</h2>
</div>
&#13;
预览强>
它对我来说就是这样: