Blogger'da arama çubuğunu kullanarak yan yana menü çubuğu nasıl oluşturulur

Blog'um var ve menü çubuğunu arama çubuğuna göre yan yana ayarlamak istiyorum.Blogger'da arama çubuğunu kullanarak yan yana menü çubuğu nasıl oluşturulur

Başarıyla kodladı ve masaüstü veya mobil cihazlarda çok iyi görüntüleniyor. Sorun, menü simgesine tıkladığımda (mobil veya daha küçük ekranda görüntülendiğinde) arama çubuğu aşağı iner. Arama çubuğu çubuğunu konumuna getiremiyorum.

Sorunumu daha iyi anlamak için aşağıdaki resim bağlantısına bakın.

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

kod

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

olduğunu

kaynak

2016-03-31 user6140292

Eğer pozisyon test ettiniz CSS Kodu: Mutlak .main- nispi pozisyonu ile mobil görünümde arama çubuğunda menü kabı? –

evet, denedim ama sonuç istediğim şey değil. yukarı yapıştırmak yerine, – user6140292

en sol tarafına doğru hareket ettirerek bir JSFiddle yapabilir misiniz? –

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

kaynak

2016-03-31 15:54:43

kutsal inek, ipucu için @Javier Gonzalez teşekkür ederim, ben kodunuzu değiştirmek ve bazı z indeksi eklemek, ve ne istediğimi mükemmel çalışır. yardım için herkese teşekkür ederim – user6140292

Blogger'da arama çubuğunu kullanarak yan yana menü çubuğu nasıl oluşturulur

cevap

İlgili konular