Adds a custom dropdown option to WP_NAV_MENUS where the user can select a predefined css class for each menu item:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <?php function menu_item_class_select(){ global $pagenow; if ($pagenow == "nav-menus.php"){ ?> <script> jQuery(document).ready(function(){ function create_dd(v){ //create dropdown var dd = jQuery('<select class="my_class"></select>'); //create dropdown options //array with the options you want var classes = ["","class1","class2","class3"]; jQuery.each(classes, function(i,val) { if (v == val){ dd.append('<option value="'+val+'" selected="selected">'+val+'</option>'); }else{ dd.append('<option value="'+val+'">'+val+'</option>'); } }); return dd; } jQuery(".edit-menu-item-classes").each(function() { //add dropdown var t = create_dd(jQuery(this).val()); jQuery(this).before(t); //hide all inputs jQuery(this).css("display","none"); }); //update input on selection jQuery(".my_class").bind("change", function() { var v = jQuery(this).val(); var inp = jQuery(this).next(); inp.attr("value",v); }); }); </script> <?php } } add_action('admin_footer','menu_item_class_select'); ?> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
