Html Select box options on Hover?
I've seen this very simple selectbox on youtube, where the select options are visible on hover (instead of clicking), as seen in following screenshot.
I'm trying to create similar effect in the following simple select box. Can someone please help how this can be done? Thanks.
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
Here's one way of doing it, though I'd prefer a more plug-in approach (rather than hard-coding the html ul ):
$('#selectUl li:not(":first")').addClass('unselected');
// Used to hide the 'unselected' elements in the ul.
$('#selectUl').hover(
function(){
// mouse-over
$(this).find('li').click(
function(){
$('.unselected').removeClass('unselected');
// removes the 'unselected' style
$(this).siblings('li').addClass('unselected');
// adds 'unselected' style to all other li elements
var index = $(this).index();
$('select option:selected').removeAttr('selected');
// deselects the previously-chosen option in the select
$('select[name=size]')
.find('option:eq(' + index + ')')
.attr('selected',true);
// assumes a 1:1 relationship between the li and option elements
});
},
function(){
// mouseout (or mouseleave, if they're different, I can't remember).
});
JS Fiddle demo.
Edited to include an alert demonstrating the changes in the select element's value: JS Fiddle demo.
Edited to include the css and html used in the demo:
html
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<ul id="selectUl">
<li>small</li>
<li>medium</li>
<li>large</li>
</ul>
css:
select {
opacity: 0.5;
}
ul {
width: 8em;
line-height: 2em;
}
li {
display: list-item;
width: 100%;
height: 2em;
border:1px solid #ccc;
border-top-width: 0;
text-indent: 1em;
background-color: #f90;
}
li:first-child {
border-top-width: 1px;
}
li.unselected {
display: none;
background-color: #fff;
}
ul#selectUl:hover li.unselected {
background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
display: list-item;
}
ul#selectUl:hover li {
background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
background-color: #f90;
}
This causes the menu to hide the unselected items until the ul is hovered over, then revealing all the options, and uses the click() event to assign the unselected class name to the non-clicked elements; which allows the clicked element to be still visible on mouseout.
The above CSS reflects the most-recent edit, to make the currently-selected, and :hover -ed, li more visible.
Latest JS Fiddle demo.
Edited because, well, I got a little bored. And had nothing better to do, so I made a simple plug-in:
(function($) {
$.fn.selectUl = function(){
var $origSelect = $(this);
var newId = $(this).attr('name') + '-ul';
var numOptions = $(this).children().length;
$('<ul id="' + newId + '" class="plainSelect" />')
.insertAfter($(this));
for (var i = 0; i < numOptions; i++) {
var text = $(this).find('option').eq(i).text();
$('<li />').text(text).appendTo('#' + newId);
}
if ($(this).find('option:selected')) {
var selected = $(this).find('option:selected').index();
$('#' + newId)
.find('li')
.not(':eq(' + selected + ')')
.addClass('unselected');
}
$('#' + newId + ' li')
.hover(
function(){
$(this).click(
function(){
var newSelect = $(this).index();
$(this)
.parent()
.find('.unselected')
.removeClass('unselected');
$(this)
.parent()
.find('li')
.not(this)
.addClass('unselected');
$($origSelect)
.find('option:selected')
.removeAttr('selected');
$($origSelect)
.find('option:eq(' + newSelect + ')')
.attr('selected',true);
});
},
function(){
});
// assuming that you don't want the 'select' visible:
$(this).hide();
return $(this);
}
})(jQuery);
$('#sizes').selectUl();
JS Fiddle demo, including the 'plug-in'.
Notes:
select (which you can certainly do, and works okay) it does screw with the page-flow a little (or a lot), but this can be amended in the CSS (I'd imagine, though I've not yet tried). dl elements to be used in place of the current ul , which would allow for giving an explanation of the available options. Edited because I felt that there should be a visible 'guidance' element, and also to try and explain something of how it all works.
Given the html:
<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
<option value="xxs">XX-Small</option>
<option value="xs">X-Small</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">X-Large</option>
<option value="xxl">XX-Large</option>
</select>
Use the jQuery to call the plugin:
$('#sizes').selectUl();
This takes the above select, and creates a ul with the following mark-up:
<ul id="sizes-ul" class="plainSelect">
<li class="guidance">Select a size:</li>
<li>XX-Small</li>
<li class="unselected">X-Small</li>
<li class="unselected">Small</li>
<li class="unselected">Medium</li>
<li class="unselected">Large</li>
<li class="unselected">X-Large</li>
<li class="unselected">XX-Large</li>
</ul>
The CSS used (in the demo):
ul.plainSelect {
/* targets those 'ul' elements created by the plug-in */
border: 1px solid #000;
}
ul.plainSelect li {
/* this styles the 'selected' li 'option' element */
background-color: #f90;
display: list-item;
}
ul.plainSelect li.guidance {
/* this is the 'Select a Reason' guidance/explanation from the image in the question */
border-bottom: 1px solid #000;
padding: 0.3em;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
ul.plainSelect li.unselected {
/* hides the 'unselected' options, and removes the background-color for contrast */
background-color: #fff;
display: none;
}
ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
/* ensures that the 'li' elements pop-up when the list is hovered over, */
/* and act/display like 'li' elements */
display: list-item;
}
JS Fiddle demo.
It is impossible to open a select box in the plain way your are describing. It is no coincidence that the image you have provided looks nothing like a normal select box. This is because it is probably actually a ul list which is styled to look as it does, revealing itself on hover, which is actually possible.
I created an example over on jsfiddle of how it could be done.
If you're interested in doing it this way, I've got a simple, non-javascript way of doing it on my current project actually (look at the "I Want To" menu at the top). Like @Marcus said, this is not with a select box, but is done with a unordered list ( <ul> ).
The html is straightforward:
<div id="iWantToMenuContainer">
<ul id="i-want-to" class="menu">
<li><a href="http://cumberlandme.info/contact">contact the town office</a></li>
<li><a href="http://cumberlandme.info/upcoming-events">find out what’s happening</a></li>
<li><a href="http://cumberlandme.info/online-services">get permits and services applications</a></li>
</ul>
</div>
the important part is the css, essentially just the first 2 rules. The div appears to expand because of the overflow:visible on :hover .
#iWantToMenuContainer {
overflow:hidden;
}
#iWantToMenuContainer:hover {
overflow:visible
}
#iWantToMenuContainer ul {
border:1px solid #b6c2b9;
background:#fff;
padding:1px 20px 3px 5px
}
#iWantToMenuContainer a:link,#iWantToMenuContainer a:visited {
display:block;
background: #fff;
}
#iWantToMenuContainer a:hover {
background:#e6e6e6
}
上一篇: 选择箭头样式更改
下一篇: Html在悬停上选择框选项？