JavaScript - Fancy Dropdown with Images

From NoskeWiki
Jump to navigation Jump to search
Different images shown in a dropdown

About

NOTE: This page is a daughter page of: JavaScript


The standard dropdown isn't very fancy... and it doesn't feature image. This one does!


Simple tab bar example

fancy_dropdown.html: 

<!doctype html>
 
<html lang="en">
<head>
  <title>Fancy Dropdown</title>
  <link rel="stylesheet" href="fancy_dropdown.css?v=1.0">
  <script src="fancy_dropdown.js"></script>
</head>
 
<body>

<div class="dropdown">
  <input type="text" id="car-type" value="choose your car type" class="field"
         readonly="readonly" onmouseover="showElement('menu-id', true);" />
  <ul class="list" id="menu-id" onmouseleave="showElement('menu-id', false)">
    <li onclick="setValue('car-type', 'sedan'); showElement('menu-id', false);">
      <img src="sedan.png" style="max-width: 130px;">Sedan</li>
    <li onclick="setValue('car-type', 'suv'); showElement('menu-id', false);">
      <img src="suv.png" style="max-width: 130px;">SUV</li>
    <li onclick="setValue('car-type', 'hatchback'); showElement('menu-id', false);">
      <img src="hatchback.png" style="max-width: 130px;">Hatchback</li>
  </ul>
</div>

</body>
</html>


fancy_dropdown.js: 

/**
 * Show or hide the element with the matching id.
 * @param {string} divId The id of the element to show/hide.
 * @param {boolean} show True to show, false to hide.
 */
function showElement(divId, show) {
  document.getElementById(divId).style.display = (show) ? "inline" : "none";
}

/**
 * Set the value of the element with the matching id.
 * @param {string} divId The id of the element to change.
 * @param {string} value Value to set.
 */
function setValue(divId, value) {
  document.getElementById(divId).value = value;
}


fancy_dropdown.css: 

.dropdown {
  position: relative
}
.dropdown .field {
  width: 300px;
  background: #EC6603;
  color: #fff;
  padding: 5px;
  border: none;
  cursor: pointer;
  font-family: 'lucida sans unicode',sans-serif;
  font-size: 1em;
  border: solid 1px #EC6603;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.dropdown .field:hover {
  border: solid 1px #fff;
  -moz-box-shadow: 0 0 5px #999;
  -webkit-box-shadow: 0 0 5px #999;
  box-shadow: 0 0 5px #999
}
.dropdown>ul.list {
  display: none;
  position: absolute; left: 30px; top: -30px; z-indropdowndex: 999;
  width: 300px;
  margin: 0; padding: 10px; list-style: none;
  background: #fff; color: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px #999;
  -webkit-box-shadow: 0 0 5px #999;
  box-shadow: 0 0 5px #999
}
.dropdown>ul.list li {
  padding: 10px;
  border-bottom: solid 1px #ccc;
}
.dropdown>ul.list li:hover {
  background: #EC6603;
  color: #fff;
}
.dropdown>ul.list li:last-child {
  border: none
}


Code license
For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)


Retrieved from "http://andrewnoske.com/w/index.php?title=JavaScript_-_Fancy_Dropdown_with_Images&oldid=448"