使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菜單覆蓋整個頁面

回答

相關問題