Html dropdown with images

Dropdown Select With Images

In Firefox you can just add background image to option:

Better yet, you can separate HTML and CSS like that

select#gender option[value=»male»] < background-image:url(male.png); >
select#gender option[value=»female»] < background-image:url(female.png); >
select#gender option[value=»others»]

In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.

From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.

Dropdown select with images

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/

EDIT: Updated/working as of 2013, July 02: jsfiddle.net/GHzfD/357

#webmenu width:340px;
>

 
 
 
 
 
 
 

$("body select").msDropDown();

select and display an image from a dropdown menu

You must need to keep your file inside your project .

images is the folder name which inside your project.

xampp or wampp not consider the local path files.

And it won’t display the images as well.

Hope this Helpful.

I have changed two places in your code.

 
 
$folder = 'images\\'; // changed here
 
echo ''."\n".''."\n". 
dropdown(image_filenames($folder), @$_POST['image']). 
''."\n".''."\n".' '; 
function image_filenames($dir) 
 $handle = @opendir($dir) 
or die("I cannot open the directory '$dir' for reading."); 
$images = array(); 
while (false !== ($file = readdir($handle))) 
 if (preg_match('/^.*\.(jpg|jpeg|png|gif|svg)$/', $file)) 
 $images[] = $file; 
> 
> 
closedir($handle); 
return $images; 
> 
function dropdown($options_array, $selected = null) 
 $return = null; 
foreach($options_array as $option) 
 $return .= ' (($option == $selected) ? ' selected="selected"' : null ). 
'>'.$option.''."\n"; 
> 
return $return; 
>

 
if (isset($_POST['submit']))  
echo ''; // changed here


 
> 
?>

want to show image/icons in dropdown list

Display Image Based on 2 Dropdown Values

The variable you stored the image filename is different from the variable you passed as the value in for the image’s src tag

$('select.form-control').change(function() var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg'; 
$('#imgToChange').attr('src', filename);
>);

You can also try using the .attr() method in place of the .prop() method like i did

Updated See code below
HTML

Brown Head
Black Head
Blue Head
Brown Body
Black Body
Blue Body

var imageSrc;
var imgFolder = "/path/to/image/folder/"; // specify the path to the folder containing the imgs in this variable

$("select").change(function() imageSrc = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg"; 
$("#imgElem").attr("src", imageSrc); 
$("p").text(imageSrc);
>);

UPDATED ONCE AGAIN

This update creates the img tag each time an option is selected, replacing the previous img tag. This is to prevent the img src(undefined) error on page load.

To archive this, i added a div in the html to hold the img element, and simply change the divs html content.

HTML UPDATED

Brown Head
Black Head
Blue Head
Brown Body
Black Body
Blue Body

// specify the path to the folder containing the imgs in this variable
var imgFolder = "/path/to/image/folder/"; 

$("select").change(function() var src; // variable to hold the src 
 
src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg"; 
// append src to a p element just for debugging sake(i.e to see the change in the src) 
$("p").text(src); 
 
// create an img element with the src each time and append to the image wrap div 
$(".img-wrap").html(``);
>);

UPDATED ONCE AGAIN

To make it show the image with the default selected options both on page load and on option select, i tweaked the code again

NEW JS CODE

function getImageSrc() // specify the path to the folder containing the imgs in this variable 
var imgFolder = "/path/to/image/folder/"; 
 
// loop through each select element 
$("select").each(function() // fire function to get src 
getSrc(); 
 
// fire function to get src on change 
$(this).change(function() getSrc(); 
>) 
>); 
 
function getSrc() var src; // variable to hold the src
 
src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg"; 
$("#imgElem").attr("src", src); 
// append src to a p element just for debugging sake(i.e to see the change in the src) 
$("p").text(src);
 
// create a an img element with the src each time and append to the image wrap div 
$(".img-wrap").html(``); 
>
>

// fire function on page-load
$(document).ready(function() getImageSrc();
>)

Источник

CSS Dropdowns

Create a dropdown box that appears when the user moves the mouse over an element.

Example

.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>

.dropdown:hover .dropdown-content display: block;
>

Example Explained

HTML) Use any element to open the dropdown content, e.g. a , or a element.

Use a container element (like ) to create the dropdown content and add whatever you want inside of it.

Wrap a element around the elements to position the dropdown content correctly with CSS.

CSS) The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a «card».

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Dropdown Menu

Create a dropdown menu that allows the user to choose an option from a list:

This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:

Example

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content display: block;
>

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn background-color: #3e8e41;
>

Источник

26 CSS Dropdown Menus

Collection of hand-picked free HTML and CSS dropdown menu code examples from codepen and other resources. Update of July 2019 collection. 9 new items.

Related Articles

Author

Links

Made with

About a code

Dropdown Dark/Light

Pure CSS dropdown dark/light.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gooey Dropdown Menu

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

Drop Down Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Navigation with Sub-Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Dropdown Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

The More Menu

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Drop Down Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Molten Menu

This combines a CSS drop down menu, and the oozing effects of liquid flame.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

HTML & CSS Dropdown Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Menu

Responsive gradient dropdown menu.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Main Menu

Horizontal menu with dropdown effects in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Menu

No JS — be sure to check out the mobile menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Dropdown Menu

HTML and CSS dropdown menu with nice effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Horizontal Dropdown Menu

Pure CSS horizontal dropdown menu with nice transitions and beautiful palette.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Dropdown Menu

Cool HTML & CSS dropdown menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Fancy Menu

Fancy dropdown menu in HTML and CSS. Inspired by https://dribbble.com/shots/1075480-Ui-Kit-Hotel

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Recursive Hover Navigation

Only CSS recursive hover nav.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Cool Dropdown Menu Effects

Cool dropdown menu pure CSS effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Dropdown Menu

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

Author

Links

Made with

About the code

Dropdown Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Pure CSS Dropdown Menu

Menu with dropdown made only in CSS, with a line that follow the hover on the line.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Pure CSS Dropdown Menu

Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник