Responsive Dropdown Button<\/title>\n<style>\n \/* Style the dropdown container *\/\n .dropdown {\n position: relative;\n display: inline-block;\n }\n\n \/* Style the dropdown button *\/\n .dropdown-button {\n background-color: #0b2b3a; \/* Change background color to match the shade of blue in the image *\/\n color: white;\n padding: 10px 20px;\n font-size: 16px;\n border: none;\n cursor: pointer;\n border-radius: 50px; \/* Oblong shape *\/\n white-space: nowrap; \/* Ensure the text does not wrap *\/\n transition: background-color 0.3s ease;\n }\n\n .dropdown-button:hover {\n background-color: #0e3a4f; \/* Slightly lighter blue on hover *\/\n }\n\n \/* Style the dropdown menu *\/\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: white;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n border-radius: 5px;\n overflow: hidden;\n }\n\n \/* Style the dropdown items *\/\n .dropdown-content a {\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n transition: background-color 0.3s ease;\n }\n\n .dropdown-content a:hover {\n background-color: #ddd;\n }\n\n \/* Show the dropdown menu on button hover *\/\n .dropdown:hover .dropdown-content {\n display: block;\n }\n\n \/* Responsive adjustments *\/\n @media screen and (max-width: 600px) {\n .dropdown-button {\n font-size: 14px; \/* Reduce font size for smaller screens *\/\n padding: 8px 15px; \/* Adjust padding for smaller buttons *\/\n width: 100%; \/* Make the button full-width *\/\n box-sizing: border-box; \/* Ensure padding doesn't affect width *\/\n }\n \n .dropdown-content {\n min-width: 100%; \/* Make dropdown menu full width of its container *\/\n }\n\n .dropdown-content a {\n padding: 10px 12px; \/* Slightly reduce padding on small screens *\/\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"dropdown\">\n <button class=\"dropdown-button\">Filter<\/button>\n <div class=\"dropdown-content\">\n <a href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/roles\">Roles<\/a>\n <a href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/events\">Events<\/a>\n <a href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/artifacts\">Artifacts<\/a>\n <\/div>\n<\/div>\n\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-group alignwide is-content-justification-right is-nowrap is-layout-flex wp-container-core-group-is-layout-3e2b038e wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image alignwide\">\n <div class=\"image-container\" id=\"image-container\" style=\"max-width: 100%; overflow: hidden;\">\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-content\/uploads\/2024\/07\/kaye.png\" \n alt=\"Example Image\" \n usemap=\"#example-map\" \n id=\"main-image\" \n style=\"width: 100%; height: auto;\">\n <\/div>\n\n <map name=\"example-map\">\n <area shape=\"rect\" coords=\"77,151,268,213\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/customers\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"133,274,233,357\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/productowner\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"123,369,223,452\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/productbacklog\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"306,202,428,288\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/theteam\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"319,340,416,389\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintplanning\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"402,396,490,468\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintgoals\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"468,276,558,369\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintbacklog\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"506,156,592,270\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/refinement\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"621,137,711,220\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/scrummaster\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"726,135,833,207\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/dailyscrum\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"817,224,919,300\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintreview\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"602,246,755,361\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprint\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"806,322,938,406\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/mvp-3\/\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"804,411,953,491\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintretrospective\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"94,507,257,549\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/agilevalues\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"269,504,432,546\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/agileprinciples\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"441,505,604,547\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/scrumvalues\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"1012,29,1042,62\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/bug\/\" alt=\"Clickable Area\">\n <\/map>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/image-map-resizer\/1.0.10\/js\/imageMapResizer.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n imageMapResize();\n });\n <\/script>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Dropdown Button Filter Roles Events Artifacts<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-273","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":20,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages\/273\/revisions"}],"predecessor-version":[{"id":1402,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages\/273\/revisions\/1402"}],"wp:attachment":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/media?parent=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":273,"date":"2024-06-19T16:38:53","date_gmt":"2024-06-19T16:38:53","guid":{"rendered":"https:\/\/te-culture.com\/ScrumMasteryHub\/?page_id=273"},"modified":"2024-10-19T11:18:32","modified_gmt":"2024-10-19T11:18:32","slug":"scrumframework","status":"publish","type":"page","link":"https:\/\/te-culture.com\/ScrumMasteryHub\/scrumframework\/","title":{"rendered":"scrumframework"},"content":{"rendered":"\n\n\n\n\n\nResponsive Dropdown Button<\/title>\n<style>\n \/* Style the dropdown container *\/\n .dropdown {\n position: relative;\n display: inline-block;\n }\n\n \/* Style the dropdown button *\/\n .dropdown-button {\n background-color: #0b2b3a; \/* Change background color to match the shade of blue in the image *\/\n color: white;\n padding: 10px 20px;\n font-size: 16px;\n border: none;\n cursor: pointer;\n border-radius: 50px; \/* Oblong shape *\/\n white-space: nowrap; \/* Ensure the text does not wrap *\/\n transition: background-color 0.3s ease;\n }\n\n .dropdown-button:hover {\n background-color: #0e3a4f; \/* Slightly lighter blue on hover *\/\n }\n\n \/* Style the dropdown menu *\/\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: white;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n border-radius: 5px;\n overflow: hidden;\n }\n\n \/* Style the dropdown items *\/\n .dropdown-content a {\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n transition: background-color 0.3s ease;\n }\n\n .dropdown-content a:hover {\n background-color: #ddd;\n }\n\n \/* Show the dropdown menu on button hover *\/\n .dropdown:hover .dropdown-content {\n display: block;\n }\n\n \/* Responsive adjustments *\/\n @media screen and (max-width: 600px) {\n .dropdown-button {\n font-size: 14px; \/* Reduce font size for smaller screens *\/\n padding: 8px 15px; \/* Adjust padding for smaller buttons *\/\n width: 100%; \/* Make the button full-width *\/\n box-sizing: border-box; \/* Ensure padding doesn't affect width *\/\n }\n \n .dropdown-content {\n min-width: 100%; \/* Make dropdown menu full width of its container *\/\n }\n\n .dropdown-content a {\n padding: 10px 12px; \/* Slightly reduce padding on small screens *\/\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"dropdown\">\n <button class=\"dropdown-button\">Filter<\/button>\n <div class=\"dropdown-content\">\n <a href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/roles\">Roles<\/a>\n <a href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/events\">Events<\/a>\n <a href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/artifacts\">Artifacts<\/a>\n <\/div>\n<\/div>\n\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-group alignwide is-content-justification-right is-nowrap is-layout-flex wp-container-core-group-is-layout-3e2b038e wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image alignwide\">\n <div class=\"image-container\" id=\"image-container\" style=\"max-width: 100%; overflow: hidden;\">\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-content\/uploads\/2024\/07\/kaye.png\" \n alt=\"Example Image\" \n usemap=\"#example-map\" \n id=\"main-image\" \n style=\"width: 100%; height: auto;\">\n <\/div>\n\n <map name=\"example-map\">\n <area shape=\"rect\" coords=\"77,151,268,213\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/customers\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"133,274,233,357\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/productowner\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"123,369,223,452\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/productbacklog\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"306,202,428,288\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/theteam\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"319,340,416,389\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintplanning\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"402,396,490,468\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintgoals\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"468,276,558,369\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintbacklog\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"506,156,592,270\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/refinement\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"621,137,711,220\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/scrummaster\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"726,135,833,207\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/dailyscrum\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"817,224,919,300\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintreview\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"602,246,755,361\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprint\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"806,322,938,406\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/mvp-3\/\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"804,411,953,491\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/sprintretrospective\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"94,507,257,549\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/agilevalues\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"269,504,432,546\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/agileprinciples\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"441,505,604,547\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/scrumvalues\" alt=\"Clickable Area\">\n <area shape=\"rect\" coords=\"1012,29,1042,62\" href=\"https:\/\/te-culture.com\/ScrumMasteryHub\/bug\/\" alt=\"Clickable Area\">\n <\/map>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/image-map-resizer\/1.0.10\/js\/imageMapResizer.min.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n imageMapResize();\n });\n <\/script>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Dropdown Button Filter Roles Events Artifacts<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-273","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":20,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages\/273\/revisions"}],"predecessor-version":[{"id":1402,"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/pages\/273\/revisions\/1402"}],"wp:attachment":[{"href":"https:\/\/te-culture.com\/ScrumMasteryHub\/wp-json\/wp\/v2\/media?parent=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}