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

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>

kaynak

2017-12-22 lloyd

kullanın düğmesi veya Yani istiyorum –

için düğme gibi css uygulamak senin metin bağlantıları düğmeleri olmakla birlikte yine de metin gibi görünüyor mu? – Xoog

@ sconner87 evet, istediğim bu – lloyd

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>

kaynak

2017-12-22 09:28:12 Xoog

[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

Sabit, benim hatam. Afedersiniz :) – Xoog

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>

kaynak

2017-12-22 09:26:58

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

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>

kaynak

2017-12-22 09:37:48 cssmagic

bir nedenle bağlantılarınızı tutmak için wan't eğer böyle yapabilirdi: yerine ait

<!DOCTYPE> 

<html> 
<head> 
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
</head> 
<body> 
    <a href="http://www.google.com" onclick="hRefClick(event);">alikn</a> 
</body> 
</html> 
<script> 
    function hRefClick(event){ 
     event.preventDefault(); 
     alert("redirection prevented"); 
    } 
</script>

kaynak

2017-12-22 09:43:08 user3532232

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

cevap

İlgili konular