bbin电竞入口登录网站

Let’s explore how to use custom menus on bbin电竞 .

We’ll review how to set up a site menu, how to design it per breakpoint and how to add additional custom menus for specific site pages.

The site we’ll be working on has 5 pages. Let’s start by setting up this main menu.

When starting with a blank canvas, you’ll find a menu component in the right corner of the header, with a “ Home ” item by default. Go to Manage Menu to set up and manage the menu data.

Select Show Pages to choose which pages you want displayed on your menu. Here you’ll find a list of the existing pages on the site. Select the pages you want to show, then click Apply . 

They'll now appear as items on your menu.

Click the 3 dots next to each item to change the link, rename the page it belongs to, remove it from the menu, and manage the page settings.

Use these 4 dots on the left to grab an item and drag to rearrange the order.

You can select the Link icon to add new menu items that link to other destinations like a web address, page, document, and email.

To create a dropdown , use this icon. Once you select it, an unclickable item will be added to your menu.

Go to Show Pages and select the pages you want to add to the dropdown.

Now you can select ‘Move to Dropdown’ or drag items underneath it to the right.

Let’s take a look.

Now let’s rename this menu to stay organized. From the dropdown, go to Manage All Menus . Here you can rename, duplicate, or delete if it’s not in use. Let’s rename it as Main Menu .

From the floating action bar under Design , you can edit the color, corners, shadow effect, text and spacing of this menu. Let’s change the text color to pink.

Cascading rules apply here, so these style changes will be reflected on smaller breakpoints.

On the mobile viewport , you’ll find a hamburger menu in the top right corner by default. In the Layers panel, you’ll see the previous horizontal menu component is hidden for you automatically. Make sure you don’t delete it, as it will remove the menu from your entire site.

To set up the hamburger menu, go to Open Menu , select the container with your items, and click Manage Menu . As you can see, it automatically displays the data from the main menu we created earlier.

Use the floating action bar to customize the menu layout, design and behavior. Let’s adjust the spacing here.

To design this wider menu container, select it and click Design to choose the fill color and opacity. Use this bar to change the color and opacity of the site while the menu is open. This would also be a great place to add elements like social icons and a logo.

Under Animation , you can choose the effect you want to add to your hamburger icon when it appears on the screen.

Let’s head back to desktop. This Projects page has a lot going on, so we’ll add an additional custom menu for easier navigation through the sections.

For this menu, we’ll link to anchors and external links . From this floating action bar, you can set any element as an anchor. We've already set the rest of the anchors, let's just add this last one.

From the Add panel , under Menu , you’ll find 4 different types of menu components: horizontal, vertical, hamburger and anchor. Select a type, choose one of the suggested designs on the right, and drag into place.

As with the hamburger component, this new menu also displays the original menu data by default. To change this, go to Manage Menu , from the dropdown go to Manage All Menus and click Add New Menu . Here, you can add a new menu and set up its data.

Click the Link icon at the bottom, and select Anchor to choose exactly which ones you want to add. Don’t forget to rename the item each time you add it to the menu.

You will only be able to remove the "Home" item once you’ve added more items to your menu.

Once you’ve customized your menu design, use the Inspector panel on the right to make this menu Fixed so that it always shows as you scroll the page.

So there are now 2 separate menu components on the same page, each with their own distinct data, links and design.

bbin电竞 is an advanced creation platform. To master it, continue watching this series of video tutorials.