డ్రాప్‌డౌన్ మెనూను శోధించడం/స్క్రీన్ చేయడం ఎలా చేయాలి

సిఎస్ఎస్ మరియు జెస్క్రిప్ట్ ఉపయోగించి డ్రాప్‌డౌన్ మెనూలో అంశాలను శోధించడానికి నేర్చుకోండి.

డ్రాప్‌డౌన్ మెనూను స్క్రీన్ చేయండి

స్వయంగా ప్రయత్నించండి

క్లిక్ చేయగల డ్రాప్‌డౌన్ మెనూ సృష్టించండి

వినియోగదారు బటన్ నొక్కినప్పుడు కనిపించే డ్రాప్‌డౌన్ మెనూ సృష్టించండి.

మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">డ్రాప్‌డౌన్</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="శోధించు.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">అబౌట్</a>
    <a href="#base">బేస్</a>
    <a href="#blog">బ్లాగ్</a>
    <a href="#contact">కాంటక్ట్</a>
    <a href="#custom">కస్టమ్</a>
    <a href="#support">సపోర్ట్</a>
    <a href="#tools">టూల్స్</a>
  </div>
</div>

例子解释:

డ్రాప్‌డౌన్ మెనూను తెరిచేందుకు ఏ ఎలమెంట్ నుండి వాడవచ్చు, ఉదాహరణకు బటన్, ఎ లేదా పి ఎలమెంట్.

డ్రాప్‌డౌన్ మెనూను సృష్టించడానికి ఒక కంటైనర్ ఎలమెంట్ (డివ్ లాగా) వాడండి మరియు డ్రాప్‌డౌన్ మెనూ లింకులను లోపల జోడించండి.

బటన్‌ను మరియు మరొక డివ్ ఎలమెంట్‌ను ఒక డివ్ ఎలమెంట్ లో చుట్టివచ్చించండి మరియు డ్రాప్‌డౌన్ మెనూను సరైనవిధంగా స్థానం చేయండి.

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

/* డ్రాప్‌డౌన్ మెనూ బటన్ */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* మౌస్ హోవర్ లేదా ఫోకస్ స్థితిలో క్రింది మెనూ బటన్ */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* సెచ్ ఫీల్డ్ */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
/* సెచ్ ఫీల్డ్ ఫోకస్ లేదా క్లిక్ అయినప్పుడు */
#myInput:focus {outline: 3px solid #ddd;}
/* కంటెయినర్ <div> - క్రింది మెనూ పెట్టె కంటెంట్ ని స్థానం చేయడానికి */
.dropdown {
  position: relative;
  display: inline-block;
}
/* క్రింది మెనూ పెట్టె కంటెంట్ (డిఫాల్ట్గా దాచినది) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* క్రింది మెనూ పెట్టెలో లింక్లు */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* మౌస్ అవుట్ స్థితిలో క్రింది మెనూ లింక్ రంగు మార్చు */
.dropdown-content a:hover {background-color: #f1f1f1}
/* దిగువని ప్రదర్శించు క్రింది మెనూ (వినియోగదారు క్రింది మెనూ బటన్ నొక్కినప్పుడు, ఈ క్లాస్ ను .dropdown-content కంటెయినర్ కు జెఎస్ వాడు) */
.show {display:block;}

例子解释:

我们已对下拉菜单按钮进行了样式设计,包括背景色、内边距、悬停效果等。

.dropdown 类使用 position:relative,这是因为我们希望下拉内容能够正好位于下拉菜单按钮的下方(通过使用 position:absolute 实现)。

.dropdown-content 类包含实际的下拉菜单。默认情况下,它是隐藏的,并且会在悬停时显示(参见下文)。注意,min-width 被设置为 230px。你可以根据需要修改它。提示:如果你希望下拉内容的宽度与下拉菜单按钮一样宽,那么可以将 width 设置为 100%(并将 overflow 设置为 auto,以便在小屏幕上启用滚动)。

搜索框(#myInput)已进行了样式设计,以适应下拉菜单内部。我们已添加一个搜索图标,它位于搜索框内部的左侧,用于指示这实际上是一个搜索框。

第三步 - 添加 JavaScript:

/* 当用户点击按钮时,在下拉内容的隐藏与显示之间进行切换 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

స్వయంగా ప్రయత్నించండి

相关页面

教程:CSS 下拉菜单

教程:如何创建可悬停的下拉菜单