2017-12-22 148 views
5

bağlayan ama bağlantı olarak nav çubuğu eyleminde içeriklerin çoğu, ben saklamak istediğiniz fark düğmelerimde, nav çubuğunun içinde. Bunun mümkün veya mantıklı olup olmadığını bilmiyorum. Bu konuda gerçekten yeniyim ............................................ ..................düğmeleri değil gibi davranmaya bir gez çubuğundaki içeriği için mümkün mü benim düğmeleri menü gezinme çubuğunda içine özlü tutmaya çalışıyorum

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
    font-family: 'Lato', sans-serif; 
} 

.overlay { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-x: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

    @media screen and (max-height: 450px) { 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
} 
</style> 
</head> 
<body> 

<div id="myNav" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
</a> 
    <div class="overlay-content"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
    </div> 
</div> 

<h2>Fullscreen Overlay Nav Example</h2> 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
<p>In this example, the navigation menu will slide in, from left to right: 
</p> 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 

<script> 
function openNav() { 
document.getElementById("myNav").style.width = "50%"; 
} 

function closeNav() { 
document.getElementById("myNav").style.width = "0%"; 
} 
</script> 

</body> 
</html> 

cevap

0

Bu ihtiyacın olanı vermelidir. Menü bağlantılarınızı

<div class="overlay-content"> 
<button class="buttonStyle" href="#">About</button> 
<button class="buttonStyle" href="#">Services</button> 
<button class="buttonStyle" href="#">Clients</button> 
<button class="buttonStyle" href="#">Contact</button> 
</div> 

Daha sonra, stilinize aşağıdakileri ekleyin.

.buttonStyle { 
padding: 8px; 
text-decoration: none; 
font-size: 36px; 
color: #818181; 
display: block; 
transition: 0.3s; 
background-color: transparent; 
border: 0; 
outline: 0; 
position: relative; 
top: 25%; 
width: 100%; 
text-align: center; 
margin-top: 30px; 
} 
.buttonStyle:hover { 
color: #f1f1f1; 
} 

Tüm biz burada yaptık

<button> etiketlere <a> etiketleri değişti ve metin bağlantıları aynı görünmesi için düğmeye tarz. Bu yardımcı olur umarım.

Düzenleme: Yine yanıt eklemek için medya sorguyu düzenlemek gerekir :)

<style> 
 
body { 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 
.buttonStyle { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
    background-color: transparent; 
 
    border: 0; 
 
    outline: 0; 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 
.buttonStyle:hover { 
 
    color: #f1f1f1; 
 
} 
 

 
    @media screen and (max-height: 450px) { 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
} 
 
</style> 
 
<body> 
 

 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
 
</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <button class="buttonStyle" href="#">Services</button> 
 
    <button class="buttonStyle" href="#">Clients</button> 
 
    <button class="buttonStyle" href="#">Contact</button> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide in, from left to right: 
 
</p> 
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 

 
<script> 
 
function openNav() { 
 
document.getElementById("myNav").style.width = "50%"; 
 
} 
 

 
function closeNav() { 
 
document.getElementById("myNav").style.width = "0%"; 
 
} 
 
</script> 
 

 
</body>

+1

[I “Yığın Snippet'lar” ile “çalıştırılabilir” örnek oluşturmak için söylendi, bunu nasıl?] (Https://meta.stackoverflow.com/a/358993/402037) – Andreas

+0

Sabit, benim hatam. Afedersiniz :) – Xoog

0

See, burada ben çalışıyorum pasajı ettik, size göre düğmesi sınıf için renk ve dolgu/marjı değiştirebilir.

function openNav() { 
 
document.getElementById("myNav").style.width = "50%"; 
 
} 
 

 
function closeNav() { 
 
document.getElementById("myNav").style.width = "0%"; 
 
}
.button { 
 
    display: block; 
 
    width: 115px; 
 
    height: 25px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-weight: bold; 
 
    margin-left : 100px; 
 
    margin-bottom:5px; 
 
} 
 
body { 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 

 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
    @media screen and (max-height: 450px) { 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
}
<!DOCTYPE html> 
 

 

 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
 
</a> 
 
    <div class="overlay-content"> 
 
    <a href="#" class="button">About</a> 
 
    <a href="#" class="button">Services</a> 
 
    <a href="#" class="button">Clients</a> 
 
    <a href="#" class="button">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide in, from left to right: 
 
</p> 
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

+0

@Andreas: Öneriler için teşekkürler, cevabımı güncelledim. –

0

Bağlantınıza .btn sınıfını ekleyin ve bazı stilleri ekleyin. Şununla birlikte: aktif seçici, standart düğme gibi tıklama efektini ekleyebilirsiniz - örneğin: gölge gölgesi.

.overlay a.btn { 
    background: #818181; 
    color: #fff; 
    display: inline-block; 
    font-weight: 600; 
    font-size: 36px; 
    line-height: 36px; 
    text-align: center; 
    vertical-align: middle; 
    cursor: pointer; 
    border-radius: 6px; 
    padding: 17px; 
    text-transform: uppercase; 
    text-decoration: none; 
    white-space: normal; 
} 
.overlay a.btn:active { 
    box-shadow: inset 0px 0px 8px rgba(0,0,0,.7); 
} 

<a href="#" class="btn">About</a>