{"id":6145,"date":"2024-04-14T14:15:32","date_gmt":"2024-04-14T06:15:32","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6145"},"modified":"2024-04-14T14:15:32","modified_gmt":"2024-04-14T06:15:32","slug":"tailored-selection-panel","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/tailored-selection-panel\/","title":{"rendered":"Tailored selection panel"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Webflow provides a ready-made selection feature that you can easily place on your navigation bar or any section of your webpage. This empowers you to craft a customized selection panel swiftly.<\/p>\n<p>Nevertheless, for those who desire more authority in constructing, styling, and handling their selection panel, this tutorial will guide you through building a personalized selection panel!<\/p>\n<h5>Prerequisite<\/h5>\n<ul>\n<li>You&#8217;ll utilize <strong>block elements<\/strong> to fabricate the personalized selection component<\/li>\n<li>You&#8217;ll insert some <strong>anchor elements<\/strong> inside the selection content container<\/li>\n<li>You&#8217;ll also employ <strong>actions<\/strong> to enable the selection panel to function \u2014 opening and closing upon activation<\/li>\n<\/ul>\n<h5>Throughout this tutorial<\/h5>\n<p>To create a tailored selection panel, you&#8217;ll:<\/p>\n<ol>\n<li>Establish the selection container<\/li>\n<li>Develop the selection trigger<\/li>\n<li>Construct the selection content container<\/li>\n<li>Initiate the action to toggle the selection panel<\/li>\n<\/ol>\n<h2>Establish the selection container<\/h2>\n<ol>\n<li>Integrate your initial <strong>block element<\/strong> from the <strong>add elements<\/strong> section.<\/li>\n<li>Assign a <strong>class<\/strong> name. This will be referred to as the &#8220;selection wrapper&#8221;.<\/li>\n<li>Specify a <strong>width<\/strong> dimension<\/li>\n<li>Adjust the <strong>position<\/strong> to:<strong>\u00a0relative<\/strong> \u2014 this facilitates the absolute positioning of the forthcoming &#8220;selection content&#8221; container.<\/li>\n<\/ol>\n<p><strong>Discover more: <\/strong>Insights on positioning<\/p>\n<h6><strong>Design suggestion<\/strong><br \/>When setting a fixed width, ensure to cap the max-width at 100% or below. This way, you prevent the element from exceeding the width on smaller devices. Conversely, you can set the width to 100% and the max-width to a specific value like 500px or 1200px. This ensures that text lines don&#8217;t stretch on larger screens or images don&#8217;t surpass their original clarity.<\/h6>\n<h2>Develop the selection trigger<\/h2>\n<ol>\n<li>Insert a second <strong>block element<\/strong> inside the selection wrapper \u2014 carry this out in the <strong>navigator<\/strong> as the selection wrapper lacks canvas height.<\/li>\n<li>Apply a <strong>class<\/strong> to this block element. We&#8217;ve named it \u201cselection trigger\u201d.<\/li>\n<li>Drop a <strong>text element<\/strong> into the selection trigger. Double-click to modify the text.<\/li>\n<li>Add stylization such as a <strong>background shade<\/strong> (or a pattern or gradient) to the selection trigger block element<\/li>\n<li>Provide spacing to your text by adding some <strong>padding<\/strong><\/li>\n<\/ol>\n<h6><strong>Structural hint<\/strong><br \/>You can include various content in the selection trigger. You can even leave it blank. For instance, you could insert an icon or another text element saying close.<\/h6>\n<h4><strong>Refine the hover status and alter the cursor appearance of the trigger<\/strong><\/h4>\n<p>You can enhance the <strong>hover status<\/strong> of the selection trigger to entice users to click upon hovering.<\/p>\n<p><strong>Explore more<\/strong>:\u00a0Stylizing statuses<\/p>\n<p>Perhaps you think the typical mouse cursor seems odd during selection hover. You can opt to modify the <strong>type of cursor<\/strong> used within the trigger block element. For links, the pointer cursor is typically preferred. Alternatively, any cursor type can be selected.<\/p>\n<p><strong>Learn more: <\/strong><strong>Pointers<\/strong><\/p>\n<h2>Forging the selection content container<\/h2>\n<ol>\n<li>Insert a fresh <strong>block element<\/strong> right within the selection wrapper and position it below the selection trigger.<\/li>\n<li>Define a <strong>class<\/strong> named dropdown content<\/li>\n<li>Ensure the <strong>position is absolute<\/strong> \u2014 this prevents the selection from displacing other content on the page<\/li>\n<li>Set the <strong>width to 100%<\/strong> to occupy all accessible space within the selection wrapper<\/li>\n<li>Set the <strong>overflow to hidden<\/strong> \u2014 this proves beneficial when setting up the action later<\/li>\n<li>Include a <strong>background shade<\/strong> if desired<\/li>\n<\/ol>\n<p><strong>Learn more:<\/strong> Overflow<\/p>\n<h3>Incorporating content<\/h3>\n<p>The content can vary. Here, a few anchor elements will be incorporated.<\/p>\n<ol>\n<li>Drape an <strong>anchor element<\/strong> from the panel and position it within your selection content container<\/li>\n<li>Attribute a <strong>class<\/strong> to the anchor element. We&#8217;ll denote this as &#8220;dropdown link&#8221;, but you can insert any desired name.<\/li>\n<li>Adjust the <strong>display setting to block<\/strong> to fill the entire width of the selection content container<\/li>\n<li>Apply uniform <strong>padding<\/strong> on all four sides by holding shift and dragging<\/li>\n<li>Insert a <strong>text element<\/strong> into your anchor element<\/li>\n<li>Replicate the <strong>anchor element<\/strong> and paste it multiple times to cater to the required links in your selection<\/li>\n<li>Double-click each <strong>text element<\/strong> to rename every selection link<\/li>\n<li><strong>Anchor<\/strong> each anchor element to the relevant resource<\/li>\n<\/ol>\n<p><strong>Refer to: <\/strong>Our guide on configuring link settings for various link elements<\/p>\n<h3>Customizing the link text<\/h3>\n<p>Links inherit their style from the <strong>all links<\/strong> tag. Thus, modifying the text element nested within an anchor element won&#8217;t override the <strong>all links<\/strong> text styles. To style the text within an anchor element, the typography of the anchor element itself must be styled.<\/p>\n<ol>\n<li>Select the <strong>anchor element<\/strong> (the dropdown link)<\/li>\n<li>Alter the <strong>text hue<\/strong><\/li>\n<li>Eliminate the <strong>underline (text-decoration) to None<\/strong> to eliminate the link underline<\/li>\n<\/ol>\n<h5>Unearth further insights<\/h5>\n<ul>\n<li>Text style inheritance<\/li>\n<li>HTML tags<\/li>\n<\/ul>\n<h2>Establishing the action to toggle the selection<\/h2>\n<p>Create an action triggering upon selection by the designated element, occurring upon mouse click (or tap). To construct this:<\/p>\n<ol>\n<li>Select the selection trigger<\/li>\n<li>Initiate an action: <strong>element trigger: mouse click (tap)<\/strong><\/li>\n<\/ol>\n<h5>Yet, I desire to toggle my selection panel on hover instead of click<\/h5>\n<p>The forthcoming animations will be identical but at this juncture, opt for the <strong>selection wrapper<\/strong> and select\u00a0<strong>element trigger: mouse hover<\/strong>. Subsequently, proceed with the following steps.<\/p>\n<h5>Unveil the selection<\/h5>\n<ol>\n<li>Under <strong>on 1st click<\/strong> (or <strong>on hover<\/strong>), establish a new <strong>animation<\/strong>. Name it selection open.<\/li>\n<li>Select your selection content block element<\/li>\n<li>Inaugurate the initial <strong>animation action: size<\/strong><\/li>\n<li>Set the <strong>height to zero (0 px)<\/strong>. Given that overflow is hidden on the selection content, it discreetly vanishes.<\/li>\n<li>Assign this as the <strong>initial state<\/strong> to prevent the selection content from appearing at page load<\/li>\n<li>Create the subsequent <strong>animation action: size<\/strong><\/li>\n<li>Designate the <strong>height as auto \u2014<\/strong> manually input &#8220;auto&#8221; into the field and hit enter. Alternatively, tap the unit adjacent to the field and opt for auto from the unit list.<\/li>\n<\/ol>\n<h5>Conceal the selection<\/h5>\n<ol>\n<li>Beneath <strong>on 2nd click<\/strong> (or <strong>on hover out<\/strong>), integrate a new timed <strong>animation<\/strong>. Label this as selection close.<\/li>\n<li>Select the selection content<\/li>\n<li>Formulate an <strong>animation action: size<\/strong><\/li>\n<li>Revert the <strong>height<\/strong> back to <strong>0 px<\/strong><\/li>\n<\/ol>\n<h6><strong>Essential to understand<\/strong><br \/>You can adapt the easing and duration of any animation action to create a distinctive animation during selection toggling.\u00a0<\/h6>\n<p>\u200d<\/p>\n<h5>Proceeding forward<\/h5>\n<p>Now that you&#8217;ve grasped creating a personalized selection panel, you can expand upon this approach to craft more sophisticated elements like an <strong>expansion module<\/strong> ideal for FAQs<strong>.<\/strong><\/p>\n<h5>References<\/h5>\n<ul>\n<li>Erecting an expansion module<\/li>\n<li>Establishing an interactive selection arrow<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Build a fully custom dropdown menu using Webflow&#8217;s elements and interactions.","protected":false},"author":2,"featured_media":6146,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6145","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6145"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6146"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}