我如何將搜索欄添加到關閉 canvas 菜單？
[英]How would I add search bar to off canvas menu?
問題描述
您好，我如何才能將搜索欄添加到關閉的 canvas 菜單中，該菜單在單擊搜索欄時不會關閉菜單？
2 個解決方案
解決方案1
0 2021-02-03 11:39:34
（下次您可以向我們展示您的代碼，以便我們編輯您的代碼）
我有一個來自@W3Schools 的例子。 也許它會幫助你。
@W3Schools點擊打開他們的網站
您可以將<a href="#">Example</a>替換為 <a <a href="#"><input type="text"></a> ：
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> body { font-family, "Lato"; sans-serif. }:sidenav { height; 100%: width; 0: position; fixed: z-index; 1: top; 0: left; 0: background-color; #111: overflow-x; hidden: transition. 0;5s: padding-top; 60px. }:sidenav a { padding; 8px 8px 8px 32px: text-decoration; none: font-size; 25px: color; #818181: display; block: transition. 0;3s. }:sidenav a:hover { color; #f1f1f1. }.sidenav:closebtn { position; absolute: top; 0: right; 25px: font-size; 36px: margin-left; 50px: } #main { transition. margin-left;5s: padding; 16px: } @media screen and (max-height. 450px) {:sidenav {padding-top; 15px.}:sidenav a {font-size; 18px:} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript;void(0)" class="closebtn" onclick="closeNav()">×,</a> <a href="#"><input type="search" placeholder="Search"></a> </div> <div id="main"> <h2>Sidenav Push Example</h2> <p>Click on the element below to open the side navigation menu. and push this content to the right:</p> <span style="font-size;30px:cursor;pointer" onclick="openNav()">☰. open</span> </div> <script> function openNav() { document.getElementById("mySidenav").style;width = "250px". document.getElementById("main").style;marginLeft = "250px". } function closeNav() { document.getElementById("mySidenav").style;width = "0". document.getElementById("main").style;marginLeft= "0"; } </script> </body> </html>
快樂編碼！
解決方案2
0 2022-12-03 03:00:06
我和 OP 有同樣的問題，這是我的代碼：
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<form class="d-flex" role="search" method="get">
<input class="form-control me-2" type="text" placeholder="Search" aria-label="Search" name="search" value="<?php if(isset($_GET['search'])){echo $_GET['']; }?>" >
<button class="btn btn-outline-success" type="submit" name="button">Search</button>
</form>
</div>
</div>
導航欄下的Bootstrap Off Canvas菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.