ナビゲーションバーの内容がリンクではなくボタンとして機能することは可能ですか

メニューのナビゲーションバー内にボタンを簡潔にしていますが、ナビゲーションバーのコンテンツのほとんどがリンクとして機能していますナビゲーションバーの中の私のボタンのテーブル。これが可能かどうかわかりません。私はこれで本当に新しい............................................ ..................ナビゲーションバーの内容がリンクではなくボタンとして機能することは可能ですか

<!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>

出典

2017-12-22 lloyd

使用ボタンをか –

にボタンのようなCSSを適用テキストリンクはボタンになりますが、テキストのように見えますか？ – Xoog

@ sconner87はい、それは私が欲しいものです – lloyd

これは、あなたが必要なものを与える必要があります。メニューリンクを

に変更する

<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>

次に、あなたのスタイルに次のものを追加してください。

.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; 
}

私たちはここに行ってきたすべてが<button>タグにあなたの<a>タグを変更し、それはあなたのテキストリンクと同じ表示されるように、あなたのボタンをスタイリングしています。お役に立てれば。

編集：あなたは再び応答性を追加するために、あなたのメディアクエリを編集する必要があります:)

<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>

出典

2017-12-22 09:28:12 Xoog

[スタックスニペットで "実行可能"の例を作成するように指示されていますが、どうすればよいですか？]（https://meta.stackoverflow.com/a/358993/402037） – Andreas

固定されています。ごめんなさい：） – Xoog

を参照してください、ここで私が作業スニペットをした、あなたに応じてボタンクラスの色とパディング/マージンを変更することができます。

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>

出典

2017-12-22 09:26:58

@アンドレアス：提案いただきありがとうございます、私は私の答えを更新しました。 –

あなたのリンクに.btnクラスを追加し、いくつかのスタイルを追加します。アクティブセレクタを使用すると、標準ボタンのようなクリックエフェクトを追加できます。

.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>

出典

2017-12-22 09:37:48 cssmagic

あなたが何らかの理由であなたのリンクを維持するためにwan't場合は、次のように行うことができます：だから、あなたが欲しいの代わりの

<!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>

出典

2017-12-22 09:43:08 user3532232

ナビゲーションバーの内容がリンクではなくボタンとして機能することは可能ですか

答えて

関連する問題