Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve all kinds of navigation menu problems in AmazeUI front-end development". The editor shows you the operation process through actual cases, and the operation method is simple, fast and practical. I hope this article "how to solve all kinds of navigation menu problems in AmazeUI front-end development" can help you solve the problem.

First, transform the horizontal text menu provided by AmazeUI.

The background color of the text horizontal menu provided by AmazeUI is white, the font is blue, and there is no corresponding class to rewrite the font.

We can add a css to the background and text and rewrite the background and text color

The effect is as follows:

The code is as follows:

Navigation menu-horizontal text / * here is the color of the rewritten text * / .am-menu-default .am-menu-nav a {color:#222;} / * here is the color of the rewritten background * / .am-menu-nav {background:#f1f1f1 } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 1-4 Project 1-5 Project 1-6 Project 2 Project 3 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 5-5 Project 5-6

Second, use the button group and the drop-down button

The idea of solving the Bootstrap navigation bar, "[Bootstrap] navigation bar navbar defects and solutions on IE8" (click on the open link) is used here, but the combination of the AmazeUI button group and the drop-down button is quite weak. There is no button group that combines the drop-down button with the button. At the same time, its rasterized layout can not restrict the size of its drop-down buttons, so you must integrate several div yourself, adjust their width and margin properties, and regulate their size.

The effect is as follows:

The code is as follows:

Navigation menu-drop-down list / * Center the width occupied by each drop-down button * / .am-dropdown {width:30%; text-align:center } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 2 Project 3 Project 3-1 Project 3-2 Project 3-3 Project 3-4 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 6

Here, it is best to put three components in each row, set css to text-align:center, and add a margin-left:-1.5% just to center it, and width:100% occupies one line.

The div beneath it takes up 30% of the width. The width of the next button and drop-down button must be 110%, so that you can just match the original style and match the button with the drop-down button.

Among them, the li class= "am-divider" means the dividing line.

Third, use the tab of no drop-down items

In fact, there is really no need to use drop-down items for navigation in the mobile phone. The drop-down menu is very difficult on the mobile screen. Set up a navigation directly from the tab. The code is also short, and users will not be dissatisfied. The point is that AmazeUI already provides this layout. Then, you can also assign secondary navigation in this page.

The effect is as follows:

The code is as follows:

Navigation menu-tab layout Project 1 Project 2 Project 3 Project 4 Project 5 Project 6 Project 7

At the same time, AmazeUI also provides another style of tab layout, with the following effects:

The code is as follows:

Navigation menu-tab minimalist layout Project 1 Project 2 Project 3 Project 4 Project 5 Project 6

Finally, post the effect picture and code of the entire page:

Navigation menu Navigation menu-horizontal text / * here is the color of the rewritten text * / .am-menu-default .am-menu-nav a {color:#222 } / * here is the color of the rewritten background * / .am-menu-nav {background:#f1f1f1 } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 1-4 Project 1-5 Project 1-6 Project 2 Project 3 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 5-5 Project 5-6 Navigation menu-drop-down list / * Center the width occupied by each drop-down button * / .am-dropdown {width:30% Text-align:center } Project 1 Project 1-1 Project 1-2 Project 1-3 Project 2 Project 3 Project 3-1 Project 3-2 Project 3-3 Project 3-4 Project 4 Project 5 Project 5-1 Project 5-2 Project 5-3 Project 5-4 Project 6 Navigation menu-tab layout Project 1 Item 2 Project 3 Project 4 Project 5 Project 6 Project 7 Navigation menu-tabs Minimalist layout Project 1 Project 2, project 3, project 4, project 5, project 6, "how to solve various navigational menu problems in AmazeUI front-end development" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.