Select Menü mit CSS gestalten
Hallo zusammen,
ich möchte ein Select Menü gestalten mit mehreren Optionen.
Eigentlich ganz simpel, ich möchte statt den Text, auf den man klickt und das Auswahl Menü öffnet,
nur eine Grafik auf die man klickt.
Also ich habe eine kleine Grafik (z.B. ein Symbol für Filter), wenn man darauf klickt, öffnet das Menü
Mit der entsprechenden Auswahl. Hat man ausgewählt, verschwindet die Auswahl wieder und bleibt.
Ganz normal im Hintergrund für das Formular selektiert.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
.vodiapicker{
display: none;
}
#a{
padding-left: 0px;
}
#a img, .btn-select img{
/*width: 12px;*/
width: 29px;
}
#a li{
list-style: none;
padding-top: 5px;
padding-bottom: 5px;
}
#a li:hover{
background-color: #F4F3F3;
}
#a li img{
margin: 5px;
}
#a li span, .btn-select li span{
margin-left: 30px;
position: relative;
top: -10px;
}
/* item list */
.b{
display: none;
width: 100%;
max-width: 350px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
border: 1px solid rgba(0,0,0,.15);
border-radius: 5px;
}
.open{
display: show !important;
}
.btn-select{
margin-top: 10px;
width: 100%;
max-width: 350px;
height: 34px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.btn-select li{
list-style: none;
float: left;
padding-bottom: 0px;
}
.btn-select:hover li{
margin-left: 0px;
}
.btn-select:hover{
background-color: #F4F3F3;
border: 1px solid transparent;
box-shadow: inset 0 0px 0px 1px #ccc;
}
.btn-select:focus{
outline:none;
}
.lang-select{
margin-left: 50px;
}
</style>
<select class="vodiapicker">
<option value="en" class="test" data-thumbnail="/image/NYCS-bull-trans-B.svg.png">English</option>
<option value="au" data-thumbnail="/image/NYCS-bull-trans-B.svg.png">Engllish (AU)</option>
<option value="uk" data-thumbnail="/image/c.svg">Chinese (Simplified)</option>
<option value="cn" data-thumbnail="/image/NYCS-bull-trans-D.svg.png">German</option>
<option value="de" data-thumbnail="/image/600px-MO-supp-E.svg.png">Danish</option>
<option value="dk" data-thumbnail="/image/F_icon.svg.png">French</option>
<option value="fr" data-thumbnail="/image/Google__G__Logo.svg.webp">Greek</option>
<option value="gr" data-thumbnail="/image/4H_Emblem.svg.png">Italian</option>
</select>
<div class="lang-select">
<button class="btn-select" value=""></button>
<div class="b">
<ul id="a"></ul>
</div>
</div>
<script>
//test for getting url value from attr
// var img1 = $('.test').attr("data-thumbnail");
// console.log(img1);
//test for iterating over child elements
var langArray = [];
$('.vodiapicker option').each(function(){
var img = $(this).attr("data-thumbnail");
var text = this.innerText;
var value = $(this).val();
var item = '<li><img src="'+ img +'" alt="" value="'+value+'"/><span>'+ text +'</span></li>';
langArray.push(item);
})
$('#a').html(langArray);
//Set the button value to the first el of the array
$('.btn-select').html(langArray[0]);
$('.btn-select').attr('value', 'en');
//change button stuff on click
$('#a li').click(function(){
var img = $(this).find('img').attr("src");
var value = $(this).find('img').attr('value');
var text = this.innerText;
var item = '<li><img src="'+ img +'" alt="" /><span>'+ text +'</span></li>';
$('.btn-select').html(item);
$('.btn-select').attr('value', value);
$(".b").toggle();
//console.log(value);
});
$(".btn-select").click(function(){
$(".b").toggle();
});
//check local storage for the lang
var sessionLang = localStorage.getItem('lang');
if (sessionLang){
//find an item with value of sessionLang
var langIndex = langArray.indexOf(sessionLang);
$('.btn-select').html(langArray[langIndex]);
$('.btn-select').attr('value', sessionLang);
} else {
var langIndex = langArray.indexOf('ch');
console.log(langIndex);
$('.btn-select').html(langArray[langIndex]);
//$('.btn-select').attr('value', 'en');
}
</script>
<!--https://makitweb.com/insert-image-in-dropdown-lists-with-jquery/-->