メニューバー水平号

私はメニューバーをクリックしていた場合、それは水平取得するが、私はそれが垂直である必要は...メニューバー水平号

を私はメニューバーを持っているウェブサイトを作成しています。わかりやすいように私はコードを投稿しています。このバグで私を助けてください。

<style> 
body {margin:0;} 

.navbar { 
    overflow: hidden; 
    background-color: gold; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

.navbar a { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 

    text-decoration: none; 
    font-size: 17px; 
} 

.main { 

    margin-top: 65px; 
} 

</style> 
<style> 
.dropbtn { 
    background-color: red; 
    color: gold; 
    padding: 25px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 
.dropbtn:hover, .dropbtn:focus { 
    background-color: gold; 
    color: red; 
} 

.dropdown { 
    float: right; 
    position: relative; 
    display: inline-block; 

} 

.dropdown-content { 
    display: none; 

    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    right: 0; 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown a:hover {background-color: blue} 

.show {display:block;} 
</style> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 

<div class="navbar"> 
    <a href="#home"><img src="typ.png" width="62px"></a> 
    <button onclick="myFunction()" class="dropbtn dropdown fa fa-bars fa-lg"></button> 
    <div id="myDropdown" class="dropdown-content"> 
    <a href="#home">Home</a> 
    <a href="#about">About</a> 
    <a href="#contact">Contact</a> 
    </div> 
</div> 
<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 
</body>

出典

2017-05-01 Chirag Jain

ありがとう有意義コードとここで問題の記述を追加してください。修復が必要なサイトにリンクしないでください。そうしないと、問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例（MCVE）]を投稿すると（）、より良い回答を得るのに役立ちます（http://stackoverflow.com/help/mcve）。詳細については、 [私のWebサイトの何かが動作しません。 ]リンクを貼り付けることはできますか？]（https://meta.stackexchange.com/questions/125997/）ありがとう！ – j08691

すべてのご意見をお聞かせください。私は疑いを明らかにした。他人のために

、コードはここに行く： -

<style> 
body {margin:0;} 

.navbar { 
    overflow: hidden; 
    background-color: gold; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

.navbar a { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 

    text-decoration: none; 
    font-size: 17px; 
} 

.main { 

    margin-top: 65px; 
} 

</style> 
<style> 
.dropbtn { 
    background-color: red; 
    color: gold; 
    padding: 25px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 
.dropbtn:hover, .dropbtn:focus { 
    background-color: gold; 
    color: red; 
} 

.dropdown { 
    float: right; 
    position: relative; 
    display: block; 

} 

.dropdown-content { 
    display: none; 
    float: right; 
    margin-top: 65px; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    right: 0; 
    z-index: 1; 
} 

.dropdown-content li { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown li:hover {background-color: blue} 

.show {display:inline-block;} 
</style> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 

<div class="navbar"> 
    <a href="#home"><img src="typ.png" width="62px"></a> 
    <button onclick="myFunction()" class="dropbtn dropdown fa fa-bars fa-lg"></button> 
</div> 
<ul id="myDropdown" class="dropdown-content"> 
    <li href="#home">Home</li> 
    <li href="#about">About</li> 
    <li href="#contact">Contact</li> 
    </ul> 
<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 
</body>

は

出典

2017-05-01 18:10:29

実際には水平です。しかし、あなたがそれを垂直になるようにしようとしているなら、あなたはnavbarの高さと幅を変更しようとしましたか？例：

.navbar { 
    overflow: hidden; 
    background-color: gold; 
    position: fixed; 
    top: 0; 
     width: 200px; 
height: 100%; 
    }

これは役立ちます。がんばろう。

出典

2017-05-01 17:46:11 alex1983

私はこの1つを試していないが、有用であるようだ –

myDropdown DIVをulのリストに書き換えてください。liのタグには、aというタグが含まれています。これは今日のメニューを作成するための通常の方法です。

これはデフォルトで垂直になります。水平にするには、liの項目にdisplay: inline-blockを追加します。（リストの箇条書きを非表示にするにはlist-style:none;を追加してください）

出典

2017-05-01 17:46:18 Johannes

本当にそれは私を助けた。あなたと@MehdiKarimi先生の助けを借りて。ありがとう –

答えて

関連する問題