Put Your Menu Anywhere
Menus are essential parts of websites, as they allow us to link through other pages or contain important information. That's why we provide the Riode Menu Element.
Menu Types
The Riode Menu Element provides 4+ menu display types. Each type has it's own character. Please try one by one, then you will be satisfied enough to use our element.
Horizontal Type Menu
This type is very classic and will give you feeling of comfort. There is a saying, simple is the best!
- Classic and Comfortable
- Flexible with menu items overflow
- Controllable megamenu position
Vertical Type Menu
This type might make your menu looks different. Please provide different feeling to your customers.
- Modern and Fresh
- Controllable entire menu width
- Flexible megamenu appearance
Toggle Type Menu
The toggle type menu allows you to show or hide additional menu by means of hover event or something else.
- Customizable with border option
- Advanced display management
- Flexible sidebar width option
Collapsible Type Menu
The Collapsible Type Menu allows you to show submenu items in a collapsible way.
- Useful for mobile menus
- Controllable entire menu width
- Customizable with various options
Introduce A Menu Skin Concept
Riode provides you Skin Concept for styling menus globally. If you prepare 3 skin presets in advance, you can use them for different menus anytime.
The Menu Skin might be regarded as a kind of style preset for certain menu. The menu skin contains ancestor styles, content styles and toggle styles. After you have created certain skin with certain style options, every menu which has this skin will be given these style settings.
The menu normally has ancestors, content(submenu) and toggle icons. In addition, each part needs massive style options (typography, color and space). So it is too time-consuming to give styles one by one. In this case, the Menu Skin will help you.
Firstly, you have to give specific style options to a certain skin(from skin 1 to skin 3) in the theme option panel. Second, drag and drop the Menu Element into any place you want to place your menu in any page builder. Lastly, select menu skin in the multi select control on the content edition panel.
Toggle Dropdown Options
The Toggle Dropdown Menu Type is one of specials. This is very powerful, because it has flexible and descriptive options.
No Border
Toggle Icon & Hover Icon
Show After Home Loading
Show After Page Loading
Toggle Label
Fit Width To Sidebar
Custom Style Over Global
You might need to give specific style to your menu over global styles (menu skin). In this case, just use the Menu Element style settings.
Element Options Glossary
These options allow you to make classic and modern menus by means of various types and abundant customization controls.
- Select Menu – Select certain menu you want to place among menus have been created.
- Select Skin – Select certain skin you have already prepared in the theme option panel.
- Select Type – Select certain type you want to display among 4 fashionable types.
- Show as dropdown links in mobile – Enables your menu be dropdown links on mobile.
- Underline on hover – Gives underline style to your menu items on hover.
- Width(px) – Type a number of your menu’s width.
- Toggle Label – Type a toggle label.
- Toggle Icon – Choose a toggle icon.
- Toggle Hover Icon – Choose a toggle hover icon.
- No Border – Enables whether the menu border will be shown or hidden.
- Show After Homepage Loading – Shows your menu dropdown only in home page.
- Show After Page Loading – Shows your menu dropdown in all pages.
- Fit Width To Sidebar – Makes the menu dropdown be laid on top of homepage sidebar and resized equally with sidebar width.
- Menu Ancestor – Controls menu ancestor’s typography, border width, border radius, color, background color, border color, padding and margin.
- Submenu Item – Controls submenu item’s typography, border width, border radius, color, background color, border color, padding and margin.
- Menu Toggle – Controls menu toggle’s typography, icon size, icon space, border width, border radius, color, background color, border color and padding.
- Menu Dropdown – Controls menu dropdown’s padding, background color, border color and box shadow.