در این مقاله می آموزید که چطور یک باکس جستجو در منوی navigation واکنش گرا ایجاد کنید.
ایجاد نوار جستجو در طراحی وب سایت
قدم اول : کد HTML را اضافه کنید.
مثال :
قدم دوم :برای ساخت نوار جستجو از کد CSS زیر استفاده کنید.
مثال ساخت نوار جستجو :
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}.topnav {
overflow: hidden;
background-color: #e9e9e9;
}.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}.topnav a:hover {
background-color: #ddd;
color: black;
}.topnav a.active {
background-color: #2196F3;
color: white;
}.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-left: 16px;
border: none;
font-size: 17px;
}
.Content {
padding-right:16px;
direction:rtl;
text-align:right;
}@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: right;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
ایجاد نوار سرچ همراه با دکمه ارسال
قدم اول : کد HTML را اضافه کنید.
مثال :
برای ساخت نوار جستجویی که دارای دکمه ارسال باشد از کد CSS زیر استفاده کنید.
مثال ساخت نوار جستجو همراه با دکمه ارسال :
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
direction: rtl;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: left;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: left;
padding: 6px;
margin-top: 8px;
margin-left: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
.Content {
padding-right:16px;
direction:rtl;
text-align:right;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
نوار جستجو همراه با آیکون جستجو
قدم اول : کد HTML را اضافه کنید.
مثال :
برای ساخت نوار جستجویی که دارای آیکون جستجو باشد از کد CSS زیر استفاده کنید.
مثال ساخت نوار جستجو همراه با آیکون سرچ :
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
direction: rtl;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: left;
direction: rtl;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: left;
padding: 6px 10px;
margin-top: 8px;
margin-left: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.Content {
padding-right:16px;
direction:rtl;
text-align:right;
}
توجه : : برای ایجاد نوارهایی که ریسپانسیو باشند و تجربه خوبی را برای کاربر ایجاد کنند، بخش ایجاد منو ریسپانسیو در طراحی وب سایت را نیز مطالعه کنید.