Tìm hiểu cách sử dụng UX Builder để tùy chỉnh Dropdown Menu cho website của bạn. Tổ chức phân cấp liên kết của bạn và cải thiện trải nghiệm người dùng nói chung. Để tạo được Dropdown menu bạn cần cài đặt Plugin Shortcode in Menus

Xem video hướng dẫn:

Css:

/*************** UX MENU ***************/

.ux-menu .nav-dropdown {
    min-width: 600px;
    padding: 0px;
}

.ux-megamenu .nav-dropdown {
    min-width: 100vw;
    padding: 0px;
}

.ux-megamenu li.menu-item {
    width:100%;
}

.container .ux-megamenu .row:not(.row-collapse) {
    margin-left: auto;
    margin-right: auto;
}

/*************** UX MENU - CALLOUT  ***************/


.ux-menu-callout a {
    color:#000; /* Change nav color */
}

.ux-menu-callout a:hover, .ux-menu-callout a:hover h4   {
    color:#000; /* Change nav hover color */
}

.ux-menu-callout .icon-box .has-icon-bg .icon .icon-inner {
    background-color: currentColor; /* Auto fill background with icon color */
}

.ux-menu-callout .nav-dropdown .menu-item-has-children>a {
    text-transform: none; /* Text transform parent links */
    font-size: 100%;
}

.ux-menu-callout span.widget-title {
    text-transform: uppercase;
    font-size:80%;
    letter-spacing: .05em;
	opacity: 0.8;
}

.ux-menu-callout ul.menu>li ul {
    border-left: 0px;
    padding: 0px 0px 10px 10px;
}

.ux-menu-callout .icon-box-text {
    padding-top: 5px;
}

.ux-menu-callout h4 {
    margin-bottom: 0px;
}

.ux-menu-callout p {
    font-size:80%;
}

.ux-menu-callout .widget .is-divider {
    margin: 5px 0px;
	opacity: 0;
}

.ux-menu-callout .widget {
    margin-bottom: 0px;
}

UX Shortcode

[row label="CSS* UX Menu: Callout" style="collapse" v_align="equal" padding="20px 20px 20px 20px" class="ux-menu-callout"]

[col span="7" span__sm="12" span__md="12"]

[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/bag.png" pos="left" margin="0px 0px 30px 0px" icon_border="4" icon_color="rgb(229, 206, 143)" link="/flatsome-assets/"]

<h4>Shop now</h4>
<p>Video tutorials & guides </p>

[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/percentage.png" pos="left" margin="0px 0px 30px 0px" icon_border="4" icon_color="rgb(180, 105, 106)" link="/flatsome-custom-styling/"]

<h4>We love Sale</h4>
<p> Enjoy the latest deals</p>

[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/fashion.png" pos="left" margin="0px 0px 20px 0px" icon_border="4" icon_color="rgb(34, 39, 74)" link="/sebs-showcase-with-flatsome-website-examples/"]

<h4>Shop the look</h4>
<p> Inspired by the latest trends</p>

[/featured_box]

[/col]
[col span="5" span__sm="12" span__md="12" bg_color="rgb(250, 250, 250)"]

[ux_sidebar]


[/col]

[/row]

Chúc bạn thành công !

0 0 votes
Đánh giá bài viết
NGUỒNSEB DE LA WEB
Tiên Viết
Mình là Tiên. 9 tuổi, mê công nghệ từ nhỏ đến giờ vẫn còn mê. Sau nhiều năm tìm hiểu, học hỏi giờ đã trở thành "Thợ cài win dạo". Với kinh nghiệm cài win dạo nhiều năm mình lập blog này để chém gió tào lao về công nghệ thông tin.
Theo dõi
Thông báo về
guest

0 Comments
Inline Feedbacks
View all comments