[英]w3.css topnav on small screen
在小屏幕上,必須單擊topnav導航兩次才能打開。 我不知道是什么問題。 我當然想實現一種狀態,當用戶單擊圖標時,topnav打開並顯示其余按鈕(在一行中)。 我必須始終在topnav中具有搜索輸入字段。
<!--MAIN NAVBAR-->
<ul class="topnav w3-card-4" id="myTopnav">
<div class="w3-content">
<li class="w3-hide-small"><a href="./index-w3.php"><i class="fa fa-home" title="úvodní strana"></i></a>
<li>
<div class="w3-container" id="searchbar">
<div class="w3-row">
<form class="w3-container" action="search-w3.php?action=find&list_kind=users" method="post" name="form1">
<div class="w3-col s10 m10 l10"><input type="text" name="search_string" id="search_string" class="w3-input w3-border-right w3-hover-border-red" placeholder="Vyhledej.."> </div>
<div class="w3-col s2 m2 l2"><button class="w3-btn w3-white" style=" padding: 8px 16px!important;"><i class="fa fa-search w3-text-hvalur-color"></i></button></div>
</form>
</div>
</div>
</li>
<li class="small-right"><a href="javascript:void(0)" onclick="w3_open_keyboard()"><i class="fa fa-keyboard-o"></i></a></li>
<li class="w3-right" style="cursor:pointer;"><a href="javascript:void(0)" onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-sign-in" title="login"></i></a></li>
<li class="w3-right"><a href="javascript:void(0)" onclick="w3_open_language()"><i class="fa fa-globe" title="jazyk"></i></a></li>
<li class="w3-right"><a href="javascript:void(0)" onclick="w3_open()">menu <i class="fa fa-caret-down"></i></a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>
</div>
問題是您的topnav列表具有2個topnav和w3-card-4類,但是單擊的JavaScript僅檢查topnav。
這是一個工作的小提琴: http : //jsfiddle.net/xrakxv5p/
因此,如果您想根據您的小提琴進行簡單的修復,請將切換功能更改為此。
function myFunction(e) {
var x = document.getElementById("myTopnav");
if (x.className === "topnav w3-card-4") {
x.className += " responsive";
} else {
x.className = "topnav w3-card-4";
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.