How to create a responsive drop-down menu-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to create a responsive drop-down menu

P粉521013123 2023-09-04 15:47:42

501

The hamburger menu icon should be on the right and the image should be on the left.

When we click on the menu to open, it should expand into a drop-down menu that should have logo home About us gallery contact.

   
 Home
 About us
 Gallery
 Contact us
   Contact us

I just need to convert it to CSS.

I need it to adapt to the iPhone 14 Pro's responsive design to become a hamburger menu.

P粉521013123

reply all (2)

P粉7482188462023-09-05 09:49:42 2 floor

I thought this might be helpful to you:CSS @media Rule. As you saw in the tutorial, CSS has a way to check the width of the screen.

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }

In this example, when the width is less than 600 pixels, the background color will be set to light blue. Using this rule, you can change your CSS accordingly.

You should try to implement it yourself, not just copy-paste from the internet. Go ahead and have fun using CSS; it's the only way to learn it.

Like+0

Add Reply

P粉7388210352023-09-05 00:41:11 1 floor

This is the modified CSS code to implement a responsive hamburger menu:

CSS (styles.css):

body { margin: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; display: flex; align-items: center; } .container { display: flex; justify-content: space-between; align-items: center; } .logo { color: #fff; text-decoration: none; font-size: 24px; } .menu-toggle { width: 30px; height: 30px; background-color: #fff; cursor: pointer; display: none; /* 在较大屏幕上默认隐藏菜单图标 */ } .menu-toggle::before, .menu-toggle::after { content: ""; display: block; width: 100%; height: 3px; background-color: #333; } .menu { display: flex; align-items: center; } .menu ul { list-style: none; margin: 0; padding: 0; display: flex; } .menu li { padding: 10px; } .menu a { color: #fff; text-decoration: none; font-size: 18px; } /* 移动设备的媒体查询 */ @media only screen and (max-width: 767px) { .menu { display: none; /* 在小屏幕上默认隐藏菜单 */ flex-direction: column; background-color: #333; position: absolute; top: 50px; right: 0; width: 100%; } .menu.active { display: flex; /* 激活时显示菜单 */ } .menu li { width: 100%; text-align: center; } .menu-toggle { display: block; /* 在小屏幕上显示菜单图标 */ } }

Like+0

Add Reply