{"id":2520,"date":"2013-06-05T16:27:55","date_gmt":"2013-06-05T16:27:55","guid":{"rendered":"http:\/\/weblusive.com\/epic\/?page_id=2520"},"modified":"2013-06-05T16:27:55","modified_gmt":"2013-06-05T16:27:55","slug":"dropdown","status":"publish","type":"page","link":"https:\/\/www.pardosilver.com\/?page_id=2520","title":{"rendered":"Dropdown"},"content":{"rendered":"<h3>Dropdown<\/h3>\n<p>In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything!<\/p>\n<p><a class=\"button\" href=\"#\" data-dropdown=\"tinyDrop\">Link Dropdown \u00bb<\/a>\u00a0<a class=\"button\" href=\"#\" data-dropdown=\"contentDrop\">Content Dropdown \u00bb<\/a><\/p>\n<p>To create the dropdown you&#8217;ll need to attach a <code>data-dropdown=\"your-id\"<\/code> to whatever element you want the dropdown attached to. From there you&#8217;ll create a list that holds the links or content and add an <code>id=\"your-id\"<\/code> that associates with the element it belongs to. To style the dropdown, we&#8217;ve included a class of <code>.f-dropdown<\/code> that you can target and style to your hearts desire. If you want the dropdown to be content, simply chain the class <code>.content<\/code> to the dropdown.<\/p>\n<p><a href=\"#\" data-dropdown=\"drop1\">Has Dropdown<\/a> | <a href=\"#\" data-dropdown=\"drop2\">Has Content Dropdown<\/a><\/p>\n<p><!-- Begin Dropdowns --><\/p>\n<ul class=\"f-dropdown\" id=\"tinyDrop\" style=\"left: -99999px;\" data-dropdown-content=\"\">\n<li><a href=\"#\">This is a link<\/a><\/li>\n<li><a href=\"#\">This is another<\/a><\/li>\n<li><a href=\"#\">Yet another<\/a><\/li>\n<\/ul>\n<div class=\"f-dropdown content medium\" id=\"contentDrop\" style=\"left: -99999px;\" data-dropdown-content=\"\">\n<h4>Title<\/h4>\n<p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!<br \/>\n<img decoding=\"async\" alt=\"\" src=\"http:\/\/placehold.it\/170x120\" \/><br \/>\nMore test.<br \/>\n<a class=\"button\" href=\"#\">Button<\/a>\n<\/div>\n<ul class=\"f-dropdown\" id=\"drop1\" style=\"position: absolute; top: 261.78125px; left: -99999px;\">\n<li><a href=\"#\">This is a link<\/a><\/li>\n<li><a href=\"#\">This is another<\/a><\/li>\n<li><a href=\"#\">Yet another<\/a><\/li>\n<\/ul>\n<div class=\"f-dropdown content\" id=\"drop2\" style=\"position: absolute; top: 261.78125px; left: -99999px;\" data-dropdown-content=\"\">\nSome text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!\n<\/div>\n<p><!-- End Dropdowns --><br \/>\n<strong>Available class options:<\/strong><br \/>\n<code>tiny:<\/code> Make the dropdown have a max-width of 200px<br \/>\n<code>small:<\/code> Make the dropdown have a max-width of 300px<br \/>\n<code>medium:<\/code> Make the dropdown have a max-width of 500px<br \/>\n<code>large:<\/code> Make the dropdown have a max-width of 800px<br \/>\n<code>content:<\/code> Add padding inside the dropdown for better looking content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dropdown In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything! Link Dropdown \u00bb\u00a0Content Dropdown \u00bb To create the dropdown you&#8217;ll need to attach a data-dropdown=\u00bbyour-id\u00bb to whatever element you want the &hellip; <a href=\"https:\/\/www.pardosilver.com\/?page_id=2520\" class=\"more-link\">Contin\u00fae leyendo <span class=\"screen-reader-text\">Dropdown<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":2495,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-2520","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages\/2520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2520"}],"version-history":[{"count":0,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages\/2520\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=\/wp\/v2\/pages\/2495"}],"wp:attachment":[{"href":"https:\/\/www.pardosilver.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}