使CSS菜单覆盖整个页面

我正在尝试制作一个覆盖整个页面的菜单。到目前为止它只显示一行。我想菜单元素居中页面，而不是顶部。使CSS菜单覆盖整个页面

这是一个示例： http://codepen.io/anon/pen/mxAhv

和代码 CSS

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active { 
    -webkit-transition: 250ms all; 
    transition: 250ms all; 
} 

.menu-opener { 
    cursor: pointer; 
    height: 64px; 
    position: absolute; 
    top: 2%; 
    right: 1%; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 64px; 
} 
.menu-opener:hover, .menu-opener.active { 
    background: #231F20; 
} 

.menu-opener-inner { 
    background: #000; 
    height: .5rem; 
    margin-left: .75rem; 
    margin-top: 1.75rem; 
    width: 2.5rem; 
} 
.menu-opener-inner::before, .menu-opener-inner::after { 
    background: #000; 
    content: ''; 
    display: block; 
    height: .5rem; 
    width: 2.5rem; 
} 

.menu-opener-inner::before { 
    -webkit-transform: translateY(-0.75rem); 
    -ms-transform: translateY(-0.75rem); 
    transform: translateY(-0.75rem); 
} 
.menu-opener-inner::after { 
    -webkit-transform: translateY(0.25rem); 
    -ms-transform: translateY(0.25rem); 
    transform: translateY(0.25rem); 
} 
.menu-opener-inner.active { 
    background: transparent; 
} 
.menu-opener-inner.active::before { 
    background: #fff; 
    -webkit-transform: translateY(0rem) rotate(-45deg); 
    -ms-transform: translateY(0rem) rotate(-45deg); 
    transform: translateY(0rem) rotate(-45deg); 
} 
.menu-opener-inner.active::after { 
    background: #fff; 
    -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
    -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
    transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
} 

.menu { 
    background: #231F20; 
    color: transparent; 
    height: 64px; 
    position: absolute; 
    top: 2%; 
right: 1%; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 0rem; 
    z-index: -1; 
} 
.menu.active { 
    width: -webkit-calc(100% - 2rem); 
    width: calc(100% - 2rem); 
} 
.menu.active .menu-link { 
    color: white; 
} 

.menu-inner { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    height: 100%; 
    list-style-type: none; 
    margin: 0; 
    margin-left: 4rem; 
    padding: 0; 
} 

.menu-link { 
    color: transparent; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
    font-size: 2rem; 
    font-weight: 100; 
    height: 100%; 
    text-align: center; 
    text-decoration: none; 
} 
.menu-link li { 
    margin: auto; 
} 

@media screen and (max-width: 768px) { 
    .menu { 
    height: auto; 
    } 
    .menu-inner { 
    display: block; 
    } 
    .menu-link { 
    padding: 10px 0; 
    font-size: 1.2em; 
    } 
    .menu.active { 
    width: -webkit-calc(100% - 0.5rem); 
    width: calc(100% - 0.5rem); 
    } 
}

来源

2014-09-02 nabeelaa

你的意思是你想让菜单覆盖整个页面吗？ – 2014-09-02 19:27:04

yea..like当我点击它覆盖整个页面的菜单。而不是只在一行，菜单元素应该居中到页面中间 – nabeelaa 2014-09-02 19:29:20

尝试http://codepen.io/anon/pen/yCiLm. 我加的。菜单下面。主动定义：

.menu.active { 
    width: -webkit-calc(100% - 2rem); 
    width: calc(100% - 2rem); 
    height: calc(100% - 1rem); 
}

来源

2014-09-02 19:33:41 tejzpr

感谢您的帮助。 – nabeelaa 2014-09-02 20:09:46

试试这个代码：

.menu.active { 
    height: 100%; 
}

来源

2014-09-02 19:28:09 Kamil

感谢您的回答:) – nabeelaa 2014-09-02 20:12:45

使CSS菜单覆盖整个页面

回答

相关问题