html - Drop Down Menu Categories / Sub Categories -

html - Drop Down Menu Categories / Sub Categories -

what trying have drop downwards menu divided. in illustration there 5 options how can split drop downwards categories? illustration alternative 1 , 2 pop out of environment category , alternative 3 , 4 sports category , 5 college category? http://jsfiddle.net/fc3550sk/

for example:

drop down: please select when click menus environment, sports, colleges.. hover on environment , allow take alternative 1 or 2... or hover on sports , allow chose 3 or 4 , on..

this have far:

<select name="special" id="special"> <option>please select</div> <option data-img="/images/img/animalfriend.png" value="1">animalfriend</option> <option data-img="/images/img/aquaculture.png" value="2">aquaculture</option> <option data-img="/images/img/protectouroceans.png" value="3">protect our oceans</option> <option data-img="/images/img/conservewildlife.png" value="4">conserve wildlife</option> </select> <!-- modal --> <div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">close</span></button> <h4 class="modal-title" id="mymodallabel">specialty plate</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> <button type="button" class="btn btn-primary accept">accept</button> </div> </div> </div> </div>

$(function() { $('#special').on('change', function() { if ($('option:selected', this).is('[data-img]')) { $('#modal_special').find('.modal-body').html('<p>image go here:</p>') .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/>') .end().modal('show'); } }); $('.accept').on('click',function() { //do $('#modal_special').modal('hide'); }); });

any help appreciated!!

i don't know of way attach "hover" event listener standard drop-down menu, it's not much work implement own custom drop-down jquery, html , css.

custom drop-down advantage #01

you assign many custom values each entry want.

in example, have "specialty plates", , may want assign price, special code assigned plate, image assigned plate, , on. html/jquery version, can create custom drop-downs simple <span> tags this:

<span data-code="sprt01" data-image="" data-price="34.00">sports 01</span> <span data-code="sprt02" data-image="" data-price="35.00">sports 02</span> <span data-code="sprt03" data-image="" data-price="36.00">sports 03</span>

notice how each entry has 3 custom values assigned it: data-code, data-image, , data-price. if utilize html drop-down, don't have much freedom. there ways extend values associated standard drop-down, getting @ values messy, , still not have access hover behavior features require.

custom drop-down advantage #02

you can utilize hover behavior in way want.

in example, want "submenus" show when values in drop-down selected, far know, there isn't way gain access values "hovered" in standard drop-down, , looking html-only solution doesn't exist, have utilize javascript in 1 way or another.

using jquery, can values in custom drop-down elements this:

$("span").hover( function(){ var text = $(this).text(); console.log("you have hovered on: ", text); }, function(){ // have hovered off span } );

my solution problem

putting these ideas practice, set simple demo of how can create custom drop-down using applications parameters.

you can review jsfiddle of demo here.

the basic thought create hierarchy in html construction of top-level options (environment, sports, colleges) in div .drop_down_scroll_container, , place sub-level divs (environment 01, environment 02, etc) below div in div classed .dropdown-subcategory. magic happens, javascript looks index of top-level option, , reveals dropdown-subcategory same index.

for example, in next snippet of html, can see index positions of each of spans within drop_down_scroll_container div:

<div class="drop_down_scroll_container"> <span>environment</span> <!-- index 0 --> <span>sports</span> <!-- index 1 --> <span>colleges</span> <!-- index 2 --> </div>

so then, when hover on of top-level options (environment, sports, colleges) can inquire jquery reveal corresponding submenu div, sitting below .drop_down_scroll_container div in div containers class of .dropdown-subcategory

<div id="dropdown" class="specialtyplatescategories"> <div class="selectheader">click select plates:</div> <!-- set top-level options --> <div class="drop_down_scroll_container"> <span>environment</span> <span>sports</span> <span>colleges</span> </div> <!-- div @ index 0 of: #dropdown.dropdown-subcategory --> <!-- fade in when drop_down_scroll_container index 0 hovered --> <div id="env_subcategories" class="dropdown-subcategory"> <span data-code="env01" data-image="" data-price="31.00">environment 01</span> <span data-code="env02" data-image="" data-price="32.00">environment 02</span> <span data-code="env03" data-image="" data-price="33.00">environment 03</span> </div> <!-- div @ index 1 of: #dropdown.dropdown-subcategory --> <!-- fade in when drop_down_scroll_container index 1 hovered --> <div id="sports_subcategories" class="dropdown-subcategory"> <span data-code="sprt01" data-image="" data-price="34.00">sports 01</span> <span data-code="sprt02" data-image="" data-price="35.00">sports 02</span> <span data-code="sprt03" data-image="" data-price="36.00">sports 03</span> </div> <!-- div @ index 2 of: #dropdown.dropdown-subcategory --> <!-- fade in when drop_down_scroll_container index 2 hovered --> <div id="colleges_subcategories" class="dropdown-subcategory"> <span data-code="coll01" data-image="" data-price="37.00">colleges 01</span> <span data-code="coll02" data-image="" data-price="38.00">colleges 02</span> <span data-code="coll03" data-image="" data-price="39.00">colleges 03</span> </div> </div>

if none of made sense, here way of looking at:

when first item in .drop_down_scroll_container hovered, jquery looks first instance of .dropdown-subcategory below it. when sec item in .drop_down_scroll_container hovered, jquery reveal sec instance of .dropdown-subcategory, , on. lets build many options want, without having worry giving specific names, order matters in case. when "environment" alternative (who's index equals 0) hovered, .dropdown-subcategory index of 0 show. basic idea.

so jquery puts together:

$(document).ready(function(){ // when header custom drop-down clicked $(".selectheader").click(function() { // cache actual dropdown scroll container var dropdown = $(this).parent().find(".drop_down_scroll_container"); // toggle visibility on click if (dropdown.is(":visible")) { dropdown.slideup(); $(this).parent().find(".dropdown-subcategory").fadeout(); } else { dropdown.slidedown(); } }); // when top-level menu item hovered, decide if // coorespnding submenu should visible or hidden $(".drop_down_scroll_container span").hover( // hover on function() { // remove "highlighted class other options $(this).parent().find("span").removeclass("highlighted").removeclass("selected"); $(this).addclass("highlighted").addclass("selected"); // index of hovered span var index = $(this).index(); // utilize hovered index reveal // dropdown-subcategory of same index var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index); hideallsubmenusexceptmenuatindex($(this).parent().parent(), index); subcategorydiv.slidedown(); }, // hover off function() { if (!$(this).hasclass("highlighted")) { var index = $(this).index(); var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index); subcategorydiv.slideup(); } }); // hide submenu items except submenu item @ _index // hide of opened submenu items function hideallsubmenusexceptmenuatindex(formelement, _index) { formelement.find(".dropdown-subcategory").each( function(index) { if (_index != index) { $(this).hide(); } } ); } // when menu item hovered $("span").hover( function() { $(".hoveredover").text($(this).text()); }, function() { $(".hoveredover").text(""); } ); // when sub-menu alternative clicked $(".dropdown-subcategory span").click(function() { $(".dropdown-subcategory span").removeclass("selected"); $(".clickedoption").text($(this).text()); $(this).addclass("selected"); $(this).parent().parent().find(".selectheader").text($(this).text()); closedropdown($(this).parent().parent()); showspecialplatemodal($(this).text(), $(this).attr("data-image"), $(this).attr("data-price"), $(this).attr("data-code")); }); // close dropdowns contained in divtosearch function closedropdown(divtosearch) { divtosearch.find(".drop_down_scroll_container").fadeout(); divtosearch.find(".dropdown-subcategory").fadeout(); }; // populate , launch bootstrap modal dialog specialty plates function showspecialplatemodal(name, image, price, code) { $('#modal_special').find('.modal-body') .html('<h2>' + name + '</h2>') .append('<br/>special plate code: <span class="code">' + code + '</span><br/>') .append('<p>image go here:</p><br/><img alt="" src="' + image + '"/>') .append('<br/><br/>price: <span class="price">' + cost + '</span><br/>') .end().modal('show'); } // when modal "accept" button pressed $('.accept').on('click', function() { var modal_element = $('#modal_special'); var name = modal_element.find("h2").text(); var cost = modal_element.find("span.price").text(); var code = modal_element.find("span.code").text(); $('#modal_special').modal('hide').end(alert(name + " selected cost of " + price)); }); });

note: there may open-source solutions take care of problem in more elegant fashion. approach @ solving issue this. can see, takes little bit of setup going. can command styling of drop-down in css, , can extend want.

again, can review jsfiddle see of code in action here.

hope helps!

html css twitter-bootstrap