Web Front-end development practice 6: simple conversion of CSS navigation menus combined with level-2 drop-down menus

Web Front-end development practice 6: simple conversion of CSS navigation menus combined with level-2 drop-down menus

The navigation menu and secondary drop-down menu are all discussed in the previous blog posts. In fact, there are many ways to achieve this. The specific situation depends on the situation.

After learning about the jQuery framework, there will be more abundant animation effects. Due to the initial stages of learning Ajax and jQuery

Navigation menu and level 2 drop-down menu cannot be done, but after learning CSS and JS, we can still implement some simple changes. This blog post is about CSS implementation.

The navigation menu is combined with two simple transformations of the secondary drop-down menu.

The first step is to implement it on the basis of the previous blog post. In fact, only HTML and CSS can make good results, but compared with JS and CSS

For jQuery, there is a big gap. You will feel deeply after learning about JS and jQuery.

Switch navigation menu in English

Creation principle: You can implement the Conversion Based on the secondary drop-down menu. Hover the mouse over the corresponding menu, and the secondary menu appears in the navigation bar.

Below the menu, we can regard the English menu as a level-2 menu. When displayed, we move it up to the navigation menu to make the extra part

Hide.

Browser compatibility: I tested Firefox, Google, 2345 browsers, and IE7 and 8 browsers.

Code:

 

• Home
• Course Hall Course
• Learning center Learn
• Typical Case
• About our About

Initialization effect:

Hover:

Level 2 menu

As mentioned in the previous three blog posts, the level-2 drop-down menu is implemented using CSS, JS, and JQuery. There are many practices. This time, we mainly use CSS to implement

Now. For relevant blog posts, refer to: Web Front-end development practice 1: CSS Implementation of level-2 drop-down menus, Web Front-end development practice 2: Level-2 drop-down menus

JS implementation and Web Front-end development practice 3: jQuery Implementation of level-2 drop-down menus.

The procedure is the same as that of the secondary drop-down menu. Browser testing: IE7, 8, Google, Firefox, and 2345 browsers.

Code:

 

•  
• Homepage
• Course Hall +
  •  
  • Video Course +
    •  
    • Java
    • PHP
    • C Language
  • Case study +
    •  
    • Programming exercises
    • Instance operations
    • Answer Analysis
  • Communication and learning
• Learning center +
  •  
  • Front-end course +
    •  
    • HTML/CSS
    • JavaScript
    • JQuery
  • Mobile Development +
    •  
    • IOS development
    • WP Development
    • Android Development
  • Background Programming
• About us

Initialization effect:

 

Two-level drop-down menu effect:

Level 3 menu effects:

These are actually the most basic things. Each method has its own methods and features, as well as browser compatibility issues. It may also be caused

But it is easy to implement it by learning how it works. CSS implements a simple conversion of navigation menus.

Using JS and jQuery, we also need to compare the code conciseness degree and Implementation Effect of several methods with browser compatibility issues. From the base

The basic Web practice begins, and implements complex website architecture, website layout, and website effect display step by step.