آموزش ساخت باکس جستجو در طراحی وب سایت

آموزش ساخت باکس جستجو در طراحی وب سایت

آموزش طراحی سایت

آموزش ساخت باکس جستجو در طراحی وب سایت

در این مقاله می آموزیم که چطور با استفاده از کد جاوا اسکریپت، یک منوی جستجو برای فیلتر کردن لینک ها ایجاد کنید.

ایجاد باکس جستجو در طراحی وب سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

<input type=&quottext&quot id=&quotmySearch&quot =&quotmyFunction()&quot placeholder=&quotSearch..&quot title=&quotType in a category&quot>
<ul id=&quotmyMenu&quot>
<li><a href=&quot#&quot>HTML</a></li>
<li><a href=&quot#&quot>CSS</a></li>
<li><a href=&quot#&quot>JavaScript</a></li>
<li><a href=&quot#&quot>PHP</a></li>
<li><a href=&quot#&quot>Python</a></li>
<li><a href=&quot#&quot>jQuery</a></li>
<li><a href=&quot#&quot>SQL</a></li>
<li><a href=&quot#&quot>Bootstrap</a></li>
<li><a href=&quot#&quot>Node.js</a></li>
</ul>

توجه : در این مثال ما از href="#"استفاده کردیم چون پیجی برای لینک دادن به آن نداریم.در حقیقت در اینجا باید یک url واقعی مربوط به پیجی خاص را قرار دهیم.

قدم دوم : کد CSS را اضافه کنید. منوی navigation و باکس جستجو را فرم دهید.
مثال :

/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation menu */
#myMenu {

list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}

#myMenu li a:hover {
background-color: #eee;
}

قدم سوم : برای ساخت نهایی باکس جستجو کد جاوا اسکریپت زیر را اضافه کنید.

مثال ساخت باکس جستجو :

توجه : اگر میخواهید جستجو به بزرگی و کوچکی حروف حساس باشد، toUpperCase() را حذف کنید.

جهت مشاهده نمونه مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.