בפוסט אחר דיברנו על הצללות לקופסאות והיום אני רוצה לשמור לעצמי מאגר של עיצובים מוכנים של אלמנט Select. כמו כן הוספתי מספר קישורים בתחתית המדריך לתוספי jQuery שמאפשרים תפריטי Select בעיצובים מיוחדים.
הסיבה העיקרית לריכוז תפריטי Select בדף זה היא העובדה שנמאס לי לכתוב קוד CSS בכל פעם שאני צריך תפריט Select בעיצוב קצת שונה ובעיקר נמאס לי לחפש ברשת אחר עיצובים מוכנים של תפריטי Select מעוצבים ולכן ריכזתי כמה דוגמאות אל עמוד אחד!
אני בעיקר ריכזתי דוגמאות של תפריטי Select שונים זה מזה ככל האפשר אבל אם אתם צריכים משהו אחר שיכול להעשיר את המאגר הזה אני מזמין אתכם לכתוב לנו זאת כתגובה ונשמח לעזור.
אם אהבתם נודה לכם על לייק, שיתוף או מילה חמה.
| דוגמה חיה | קוד CSS |
|
פריט א לדוגמה פריט ב לדוגמה פריט ג לדוגמה |
.select01 {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
font-size: 16px;
padding: 5px;
width: 250px;
}
קוד HTML של התפריט +
[html]
<select class="select01">
<option>פריט א לדוגמה</option>
<option>פריט ב לדוגמה</option>
<option>פריט ג לדוגמה</option>
</select>
[/html]
|
|
פריט א לדוגמה פריט ב לדוגמה פריט ג לדוגמה |
.select02 {
background: none repeat scroll 0 0 #444444;
border: 1px solid #F3F3F3;
color: #FFFFFF;
font-size: 16px;
padding: 5px;
width: 250px;
}
קוד HTML של התפריט +
[html]
<select class="select02">
<option>פריט א לדוגמה</option>
<option>פריט ב לדוגמה</option>
<option>פריט ג לדוגמה</option>
</select>
[/html]
|
|
פריט א לדוגמה פריט ב לדוגמה פריט ג לדוגמה |
.select03 {
background: none repeat scroll 0 0 #444444;
border: 1px solid #F3F3F3;
color: #FFFFFF;
font-size: 16px;
padding: 5px;
width: 250px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
קוד HTML של התפריט +
[html]
<select class="select03">
<option>פריט א לדוגמה</option>
<option>פריט ב לדוגמה</option>
<option>פריט ג לדוגמה</option>
</select>
[/html]
|
|
פריט א לדוגמה פריט ב לדוגמה פריט ג לדוגמה |
.select04 {
background: #ffffff;
border-right: red 2px solid;
border-top: red 2px solid;
border-left: red 2px solid;
border-bottom: red 2px solid;
}
קוד HTML של התפריט +
[html]
<select class="select04">
<option>פריט א לדוגמה</option>
<option>פריט ב לדוגמה</option>
<option>פריט ג לדוגמה</option>
</select>
[/html]
|
|
פריט א לדוגמה פריט ב לדוגמה פריט ג לדוגמה |
.select05 {
background: url(YOUR IMAGE URL HERE) no-repeat 0 1px #F3F3F3;
-webkit-appearance: none;
-webkit-border-radius: 9px;
border-radius: 9px;
}
קוד HTML של התפריט +
[html]
<select class="select05">
<option>פריט א לדוגמה</option>
<option>פריט ב לדוגמה</option>
<option>פריט ג לדוגמה</option>
</select>
[/html]
|
|
שפת תרגום תרגום לאנגלית תרגום לצרפתית תרגום לאיטלקית תרגום לספרדית |
.select06 option {
background-repeat:no-repeat;
background-position:bottom right;
padding-right:30px;
}
.select06 option[value="usa"] {
background-image:url(USA IMAGE HERE);
}
.select06 option[value="french"] {
background-image:url(FRANCE IMAGE HERE);
}
.select06 option[value="italian"] {
background-image:url(ITALIAN IMAGE HERE);
}
.select06 option[value="spain"] {
background-image:url(SPAIN IMAGE HERE);
}
קוד HTML של התפריט +
[html]
<select name="translations" id="translations" class="translation-menu">
<option value="">שפת תרגום</option>
<option value="usa">תרגום לאנגלית</option>
<option value="french">תרגום לצרפתית</option>
<option value="italian">תרגום לאיטלקית</option>
<option value="spain">תרגום לספרדית</option>
</select>
[/html]
|
כלים נוספים ליצירת תפריטי Select מיוחדים:
סיימנו (לבינתיים)
מקווה שמצאתם את המדריך הזה למועיל ואיפורמטיבי… אם אתם מכירים תוספי Jquery או מדריכים מעולים שעוסקים בבניית אלמנט Select אשמח אם תוסיפו אותם כתגובה. בנוסף אם נתקלתם בבעיה או שאלה רלוונטית לעמוד זה אתם מוזמנים לפרסם אותם כתגובה ונשמח לעזור.
3 תגובות