CSS is a powerful design language that can be used to beautify the style and layout of web page elements. Among them, implementing menu navigation is a common application of CSS. In this article, we will detail how to implement menu navigation using CSS.
1. HTML Basic Structure
Before we start writing CSS styles, we need to understand the basic structure of HTML. In this example, we need to create a menu navigation and define its basic structure. The following is a basic HTML code:
In this HTML structure, we use thetag to define menu navigation. Thetag. Each list item contains a link, using thetag. Now that we have defined the basic structure of the menu navigation, we will start writing CSS styles
2. Basic styles
Before starting the style design, you can first add some to the entire menu The basic styles are as follows:
nav { background-color: #333; font-size: 18px; border-radius: 5px; } ul { list-style: none; padding: 0; margin: 0; } li { display: inline-block; margin: 0 10px; } a { display: block; color: #fff; text-decoration: none; padding: 10px; }
In these basic styles, we set the background color, font size, border rounded corners and other styles of the menu navigation. For the unordered list, we set its display style to None, set both inner and outer margins to 0, and each list item is an inline block-level element with certain margins. Styles for link styles include setting the text color to white, setting no underlining, padding, etc.
3. Mouseover and selection styles
Next, we can add style effects for mouseover and selection. For example, when the mouse moves over a link, we want the link background color to change to indicate to the user that the current link is active. This effect can be achieved by the following code:
a:hover { background-color: #555; } a:active { background-color: #777; }
When the mouse hovers over the link, the background color of the link will turn into dark gray; when the user clicks the link, the background color will further turn into light gray , to highlight the link's active status.
4. Drop-down menu
For main menu items with submenus, we may need to implement the effect of drop-down menus so that users can access submenu items more conveniently. Drop-down menus can be implemented using CSS pseudo-classes and their properties. The drop-down menu can be added to the main menu item by the following code:
li:hover ul { display: block; } ul ul { display: none; position: absolute; top: 40px; background-color: #555; } ul ul li { display: block; width: 200px; } ul ul li a { padding: 8px; }
In this code, we use theli:hoverpseudo class to detect whether the mouse is hovering over the main menu on the item. If so, display the dropdown menu in the child element below. For the drop-down menu, since it is actually below the main menu item, we need to absolutely position it and place it below the main menu item. The text color and background color of drop-down menus may also be slightly different so that users can clearly differentiate between main menu items and submenu items.
5. Responsive Design
When designing a website, we should take into account the differences between different devices. Therefore, in order to ensure that the menu navigation displays properly on mobile devices, we need to add some responsive design styles. For example, we might need to hide a dropdown menu on mobile devices and add specific styling on touchscreen devices. This can be achieved with the following code:
@media screen and (max-width: 768px) { ul { display: none; position: absolute; top: 60px; width: 100%; background-color: #333; } li { display: block; margin: 0; } li:hover ul { display: none; } a { display: block; padding: 10px; border-bottom: 1px solid #fff; } }
In this code, we have added a@mediamedia query to detect the screen size of the device. Some styles change if the screen width is less than or equal to 768 pixels. For example, we'll disable the drop-down menu and stack the menu items on top of each other while adding a bottom border to differentiate each menu item. Additionally, we moved the entire menu to the top of the page using absolute positioning to ensure the menu is easier to use on touchscreen devices.
The above is the style design required to implement menu navigation. Just copy these CSS style codes and add them to your web page. Of course, in actual development, some changes will need to be made based on the specific requirements of the website, but they provide a good starting point for adding a beautiful menu navigation to your website.
The above is the detailed content of How to implement menu navigation in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
