{"id":345,"date":"2015-03-25T23:04:43","date_gmt":"2015-03-25T23:04:43","guid":{"rendered":"http:\/\/razonartificial.com\/themes\/reason-wp\/?page_id=345"},"modified":"2015-03-25T23:04:43","modified_gmt":"2015-03-25T23:04:43","slug":"components-dropdowns","status":"publish","type":"page","link":"https:\/\/test.innovative8.uk.com\/wp3\/components-dropdowns\/","title":{"rendered":"Components Dropdowns"},"content":{"rendered":"<section class=\"css-section\">\n<h2 class=\"section-title no-margin-top\">Dropdowns<\/h2>\n<div class=\"row\">\n<div class=\"col-sm-6 col-md-4\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div class=\"dropdown open drop-demo\">\n                                  <button class=\"btn dropdown-toggle sr-only\" type=\"button\" id=\"dropdownMenu1\"><br \/>\n                                    Dropdown<br \/>\n                                    <span class=\"caret\"><\/span><br \/>\n                                  <\/button><\/p>\n<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu1\">\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\" class=\"divider\"><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<li role=\"presentation\" class=\"divider\"><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-sm-6 col-md-4\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div class=\"dropdown open drop-demo\">\n                                    <button class=\"btn dropdown-toggle sr-only\" type=\"button\" id=\"dropdownMenu2\"><br \/>\n                                        Dropdown<br \/>\n                                        <span class=\"caret\"><\/span><br \/>\n                                    <\/button><\/p>\n<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu2\">\n<li role=\"presentation\" class=\"dropdown-header\">Dropdown header<\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\" class=\"dropdown-header\">Dropdown header<\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-sm-6 col-md-4\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div class=\"dropdown dropdown-inverse open drop-demo\">\n                                  <button class=\"btn dropdown-toggle sr-only\" type=\"button\" id=\"dropdownMenu3\"><br \/>\n                                    Dropdown<br \/>\n                                    <span class=\"caret\"><\/span><br \/>\n                                  <\/button><\/p>\n<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu3\">\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action<\/a><\/li>\n<li role=\"presentation\" class=\"dropdown-header\">Dropdown header<\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\" class=\"divider\"><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-sm-6 col-md-4\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div class=\"dropdown open drop-demo\">\n                                  <button class=\"btn dropdown-toggle sr-only\" type=\"button\" id=\"dropdownMenu3\"><br \/>\n                                    Dropdown<br \/>\n                                    <span class=\"caret\"><\/span><br \/>\n                                  <\/button><\/p>\n<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu3\">\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action<\/a><\/li>\n<li role=\"presentation\" class=\"dropdown-header\">Dropdown header<\/li>\n<li class=\"dropdown-submenu\">\n                                        <a href=\"javascript:void(0);\">CSS<\/a><\/p>\n<ul class=\"dropdown-menu dropdown-menu-left\">\n<li><a href=\"css_typography.html\">Typography<\/a><\/li>\n<li><a href=\"css_headers.html\">Headers<\/a><\/li>\n<li><a href=\"css_dividers.html\">Dividers<\/a><\/li>\n<li><a href=\"css_blockquotes.html\">Blockquotes<\/a><\/li>\n<li><a href=\"css_testimonials.html\">Testimonials<\/a><\/li>\n<li><a href=\"css_forms.html\">Forms<\/a><\/li>\n<li class=\"dropdown-submenu\">\n                                                <a href=\"javascript:void(0);\">CSS<\/a><\/p>\n<ul class=\"dropdown-menu dropdown-menu-left\">\n<li><a href=\"css_typography.html\">Typography<\/a><\/li>\n<li><a href=\"css_headers.html\">Headers<\/a><\/li>\n<li><a href=\"css_dividers.html\">Dividers<\/a><\/li>\n<li><a href=\"css_blockquotes.html\">Blockquotes<\/a><\/li>\n<li><a href=\"css_testimonials.html\">Testimonials<\/a><\/li>\n<li><a href=\"css_forms.html\">Forms<\/a><\/li>\n<li><a href=\"css_tables.html\">Tables<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"css_tables.html\">Tables<\/a><\/li>\n<\/ul>\n<\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\" class=\"divider\"><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-sm-6 col-md-4\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div class=\"dropdown dropdown-inverse open drop-demo\">\n                                  <button class=\"btn dropdown-toggle sr-only\" type=\"button\" id=\"dropdownMenu3\"><br \/>\n                                    Dropdown<br \/>\n                                    <span class=\"caret\"><\/span><br \/>\n                                  <\/button><\/p>\n<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu3\">\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action<\/a><\/li>\n<li role=\"presentation\" class=\"dropdown-header\">Dropdown header<\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\" class=\"divider\"><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"col-sm-6 col-md-4\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div class=\"dropdown dropdown-inverse open drop-demo\">\n                                  <button class=\"btn dropdown-toggle sr-only\" type=\"button\" id=\"dropdownMenu3\"><br \/>\n                                    Dropdown<br \/>\n                                    <span class=\"caret\"><\/span><br \/>\n                                  <\/button><\/p>\n<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu3\">\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action<\/a><\/li>\n<li role=\"presentation\" class=\"dropdown-header\">Dropdown header<\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here<\/a><\/li>\n<li role=\"presentation\" class=\"divider\"><\/li>\n<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                <!-- Panel Code --><\/p>\n<div class=\"panel panel-default\">\n<div class=\"panel-heading panel-heading-link\">\n                        <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\" class=\"collapsed\"><i class=\"fa fa-terminal\"><\/i> Show Code<\/a>\n                    <\/div>\n<div id=\"collapse1\" class=\"panel-collapse collapse\">\n<div class=\"panel-body panel-body-no-padding\">\n                            [xml]<br \/>\n&lt;div class=&quot;dropdown dropdown open drop-demo&quot;&gt;<br \/>\n    &lt;button class=&quot;btn dropdown-toggle sr-only&quot; type=&quot;button&quot; id=&quot;dropdownMenu3&quot;&gt; Dropdown &lt;span class=&quot;caret&quot;&gt;&lt;\/span&gt;<br \/>\n    &lt;\/button&gt;<br \/>\n    &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu3&quot;&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot; class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br \/>\n    &lt;\/ul&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>&lt;div class=&quot;dropdown dropdown-inverse open drop-demo&quot;&gt;<br \/>\n    &lt;button class=&quot;btn dropdown-toggle sr-only&quot; type=&quot;button&quot; id=&quot;dropdownMenu3&quot;&gt; Dropdown &lt;span class=&quot;caret&quot;&gt;&lt;\/span&gt;<br \/>\n    &lt;\/button&gt;<br \/>\n    &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu3&quot;&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot; class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;\/li&gt;<br \/>\n        &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Separated link&lt;\/a&gt;&lt;\/li&gt;<br \/>\n    &lt;\/ul&gt;<br \/>\n&lt;\/div&gt;<br \/>\n                            [\/xml]\n                        <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- panel show code --><br \/>\n            <\/section>\n","protected":false},"excerpt":{"rendered":"<p>Dropdowns Dropdown Action Another action Something else here Separated link Separated link Separated link Dropdown Dropdown header Action Another action Something else here Dropdown header Separated link Dropdown Action Dropdown header Another action Something else here Something else here Separated link Dropdown Action Dropdown header CSS Typography Headers Dividers Blockquotes Testimonials Forms CSS Typography Headers Dividers Blockquotes Testimonials Forms Tables Tables Another action Something else here Something else here Separated link Dropdown Action Dropdown header Another action Something else here Something else here Separated link Dropdown Action Dropdown header Another action Something else here Something else here Separated link Show Code [xml] &lt;div class=&quot;dropdown dropdown open drop-demo&quot;&gt; &lt;button class=&quot;btn dropdown-toggle sr-only&quot; type=&quot;button&quot; id=&quot;dropdownMenu3&quot;&gt; Dropdown &lt;span class=&quot;caret&quot;&gt;&lt;\/span&gt; &lt;\/button&gt; &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu3&quot;&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot; class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Separated link&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/div&gt; &lt;div class=&quot;dropdown dropdown-inverse open drop-demo&quot;&gt; &lt;button class=&quot;btn dropdown-toggle sr-only&quot; type=&quot;button&quot; id=&quot;dropdownMenu3&quot;&gt; Dropdown &lt;span class=&quot;caret&quot;&gt;&lt;\/span&gt; &lt;\/button&gt; &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu3&quot;&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot; class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;\/li&gt; &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Separated link&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/div&gt; [\/xml]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-left-menu.php","meta":{"footnotes":""},"class_list":["post-345","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":0,"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/pages\/345\/revisions"}],"wp:attachment":[{"href":"https:\/\/test.innovative8.uk.com\/wp3\/wp-json\/wp\/v2\/media?parent=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}