مشخصات مقاله
-
767
-
0.0
-
3658
-
0
-
0
آموزش ساخت سرچ بار در طراحی وب سایت
در این مقاله می آموزید که چطور یک باکس جستجو در منوی 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;
}
توجه : : برای ایجاد نوارهایی که ریسپانسیو باشند و تجربه خوبی را برای کاربر ایجاد کنند، بخش ایجاد منو ریسپانسیو در طراحی وب سایت را نیز مطالعه کنید.