How to adapt and adjust the label size of the Element-UI horizontal menu el-menu on the PC and mobile side?

Element-UI horizontal menu el-menu: adaptation between PC and mobile terminals and label size adjustment

Element-UI's el-menu component is powerful, but developers often need additional processing when adapting to PC and mobile. This article will explore how to adjust the size of menu labels in mode="horizontal" mode, and how to deal with the differences between hovering and clicking on the mobile side.

question:

Using mode="horizontal" el-menu , on the PC side, the menu item hovered and expanded, leaving and closed, as expected. However, on the mobile terminal, this interaction is invalid. You need to click to expand the submenu and click to close it in other areas. In addition, developers also hope to be able to resize menu labels.

Code example:

The following code shows a horizontal el-menu that contains first and second menus. The PC side is normal, but the mobile terminal menu needs to be expanded/closed.

<el-menu :ellipsis="ellipsis" active-text-color="#ffd04b" background-color="#1b80e9" class="el-menu-demo" mode="horizontal" ref="menu" text-color="#fff">
  <el-menu-item index="0">
    <a target="_blank">front page</a></el-menu-item>
  <el-menu-item index="1">
    <a target="_blank">Event News</a></el-menu-item>
  <el-sub-menu index="2">
    <template>National fitness</template>
    <el-menu-item index="2-1">Introduction to the swimming pool</el-menu-item>
    <el-menu-item index="2-2">Charge announcement</el-menu-item>
    <el-menu-item index="2-3">Service staff announcement</el-menu-item>
    <el-menu-item index="2-4">Public notice of rules and regulations</el-menu-item>
  </el-sub-menu>
</el-menu>

methods: {
  handleOpen(key, keyPath) {
    console.log("open: key=" key, "keyPath=" keyPath);
  },
  handleClose(key, keyPath) {
    console.log("close: key=" key, "keyPath=" keyPath);
  }
}

Solution:

• Menu Tag Size: Use CSS style to control font size ( font-size ) and margins ( padding ). For example:

 .el-menu-demo .el-menu-item {
  font-size: 14px;
  padding: 0 15px;
}

• Mobile adaptation: el-menu automatically switches to click-and-expand mode on the mobile side, which is part of its responsive design, not a mistake. If you need to maintain the hover effect on the PC side on the mobile side, you need to customize the components or consider other UI libraries. You can use media queries to adjust styles based on screen width, for example:

 @media (max-width: 768px) {
  .el-menu-demo {
    /* Mobile style*/
  }
}

Through CSS style adjustment and responsive design, the display and interaction problems of el-menu on different devices can be effectively solved, thereby improving the user experience. If more complex interaction logic is needed, you need to consider custom components or use other more flexible UI components.

The above is the detailed content of How to adapt and adjust the label size of the Element-UI horizontal menu el-menu on the PC and mobile side?. For more information, please follow other related articles on the PHP Chinese website!