Bloggerの検索バーでレスポンシブメニューバーを並べる方法

私はブログを持っており、検索バーでメニューバーを並べて設定したいと思います。Bloggerの検索バーでレスポンシブメニューバーを並べる方法

私は正常にコード化され、デスクトップまたはモバイルで非常によく表示されます。問題は、メニューバーのアイコン（モバイルまたは小さい画面に表示されます）をクリックして検索バーが停止したときです。私は検索バーをその位置に固執させることはできません。

私の問題をよりよく理解するには、下の画像リンクをご覧ください。

this is desktop view - OK 
https://lh3.googleusercontent.com/--K3PoETimG8/Vvx5QZM__OI/AAAAAAAAEYs/4LScpQH4wwUGLRof0fyh1qPUGhIiXo31QCCo/s912-Ic42/menu%2Bdesktop.jpg 

this is responsive view - OK 
https://lh3.googleusercontent.com/-r05X_rR1qzQ/Vvx5i-oP9vI/AAAAAAAAEY0/tWIN_lkqOsE3pwaP3Gd8oBlMaxfCiONtwCCo/s590-Ic42/menu%2Bmobile.jpg 

this is responsive view when i click on menu icon - not OK, the search bar should always in top 
https://lh3.googleusercontent.com/-tftYFNr4fls/Vvx5t2Is96I/AAAAAAAAEY0/hD-U7uT3Mo4s2lOzpZf-iw06FNujXV-hwCCo/s581-Ic42/menu%2Bmobile%2B2.jpg

この

はコード

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body {margin:0;} 
ul.main-menu { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #193550; 

} 

ul.main-menu li {float: left;} 

ul.main-menu li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 16px; 
} 

ul.main-menu li a:hover {background-color: #111;} 

ul.main-menu li.icon {display: none;} 

@media screen and (max-width:680px) { 
    ul.main-menu li:not(:first-child) {display: 

none;} 
    ul.main-menu li.icon { 
    float: left; 
    display: inline-block; 
    } 
} 

@media screen and (max-width:680px) { 
    ul.main-menu.responsive-main-menu {position: 

relative;} 
    ul.main-menu.responsive-main-menu li.icon { 
    position: relative; 
    right: 0; 
    top: 0; 
    } 
    ul.main-menu.responsive-main-menu li { 
    float: none; 
    display: inline; 
    } 
    ul.main-menu.responsive-main-menu li a { 
    display: block; 
    text-align: left; 
    } 
} 
#searchbar{float:right; margin:7px 8px 5px 0;} 
#searchbar input[type="text"] { -moz-box-sizing: 

border-box;background: #FCFCFC; border: 1px solid 

#DFDFDF; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04); 

color: #888888; padding: 5px 0; width: 120px; 

transition: all 0.25s linear 0s; text-indent:8px;} 
#searchbar button {background:#00a1e0; border:0; 

color: #FFFFFF; cursor:pointer; padding:5px 8px; 

box-shadow:0 0 0 3px rgba(0, 0, 0, 0.04);} 
#searchbar button:hover{opacity:0.8;} 
</style> 
</head> 
<body> 
<ul class="main-menu"> 
    <li class="icon"> 
    <a href="javascript:void(0);" style="font- 

size:15px;" onclick="myFunction()">☰ MENU</a> 
    </li> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
<form action='/search' id='searchbar' method='get'> 
<input id='s' name='q' onblur='if (this.value == 

&quot;&quot;) {this.value = &quot;Enter 

keywords&quot;;}' onfocus='if (this.value == 

&quot;Enter keywords&quot;) {this.value = 

&quot;&quot;;}' type='text' value='Enter 

keywords'/> 
<button type='submit'><i class='fa fa- 

search'/></button> 
</form> 
</ul> 

<script> 
function myFunction() { 
    document.getElementsByClassName("main-menu") 

[0].classList.toggle("responsive-main-menu"); 
} 
</script> 

</body> 
</html>

ある

出典

2016-03-31 user6140292

は、あなたが位置テストでしたCSSコード：絶対.main-の相対位置とモバイルビューの検索バーにメニューコンテナ？ –

はい、私はそれを試しましたが、結果は私が望んでいたものではありません。突き刺すのではなく、左端に移動します – user6140292

JSFiddleを作れますか？ –

<div id="top"> 

    <div class="nav"> 
    <ul class="main-menu"> 
    </ul> 
    </div> 

    <div class="search"> 
    <form></form> 
    </div> 

    </div>

.nav { 
    position:relative; 
    float:left; 
    width:50%; 
    } 

.search { 
    position:relative; 
    float: right; 
    width:50%; 
    }

出典

2016-03-31 15:54:43

神聖な牛、手がかりのために@Javier Gonzalezに感謝します、私はあなたのコードを変更し、いくつかのzインデックスを追加し、それが私が望んだものを完全に動作します。誰も助けてくれてありがとう – user6140292

Bloggerの検索バーでレスポンシブメニューバーを並べる方法

答えて

関連する問題