如何在我的頁面內為左側菜單添加不同的滾動條
[英]How to add a distinct scroll bar for a left menu inside my page
1 個解決方案
解決方案1
1 已采納 2019-11-17 02:06:00
在您提供的標記上，您可以設置特定height並添加overflow:auto; 在帶有.left的側邊欄上。
請參閱下面的修改並運行代碼段。
.left {
flex: 35%;
padding: 15px 0;
height:400px;
overflow:auto;
}
body { font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } /* Create a column layout with Flexbox */.row { display: flex; } /* Left column (menu) */.left { flex: 35%; padding: 15px 0; height:400px; overflow:auto; }.left h2 { padding-left: 8px; } /* Right column (page content) */.right { flex: 65%; padding: 15px; } /* Style the search box */ #mySearch { width: 100%; font-size: 18px; padding: 11px; border: 1px solid #ddd; } /* Style the navigation menu inside the left column */ #myMenu { list-style-type: none; padding: 0; margin: 0; } #myMenu li a { padding: 12px; text-decoration: none; color: black; display: block } #myMenu li a:hover { background-color: #eee; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <h2>Search Menu</h2> <p>Start to type for a specific category inside the search bar to "filter" the search options:</p> <div class="row"> <div class="left" style="background-color;#bbb."> <h2>Menu</h2> <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.:" title="Type in a category"> <ul id="myMenu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">SQL</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Node.js</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">SQL</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Node.js</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">SQL</a></li> <li><a href="#">Bootstrap</a></li> <li><a href="#">Node.js</a></li> </ul> </div> <div class="right" style="background-color;#ddd."> <h2>Page Content</h2> <p>Start to type for a specific category inside the search bar to "filter" the search options.</p> <p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p> <p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p> <p>Some text.,</p> </div> </div> <script> function myFunction() { var input, filter, ul, li, a; i. input = document;getElementById("mySearch"). filter = input.value;toUpperCase(). ul = document;getElementById("myMenu"). li = ul;getElementsByTagName("li"); for (i = 0. i < li;length. i++) { a = li[i];getElementsByTagName("a")[0]. if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style;display = "". } else { li[i].style;display = "none"; } } } </script> </body> </html>
當啟用面板向左滾動時，如何顯示我的頁面在左側部分可見？
[英]How can I display my page to be visible partially on left when the panel scroll left is enabled?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.